DEV Community: Mark jay

Building a Logo Checker: What the Preview Doesn't Tell You

Mark jay — Sun, 25 Oct 2026 08:41:34 +0000

A logo gets a lot of help in a large preview. There's room for the lettering, the background suits the colors, and every small detail has enough pixels to exist.

Put the same file in a browser tab and things get less forgiving.

The name turns into a smudge. A thin line disappears. Switch to a dark theme and half the mark goes with it.

We're building DepthLogo, an AI logo generator with a logo editor. One part of the product is a browser-based logo checker. It looks at the practical side of a logo file: transparency, resolution, how it holds up at small sizes, and how it behaves against different backgrounds.

That gives us a useful engineering problem to work on: what can a tool tell you about a file without pretending it can judge the entire design?

Start with the space the logo will occupy

A 2000px image can be a poor favicon. More source pixels won't make an eight-letter name readable inside a 16px square.

Consider a wordmark that's six times wider than it is tall. Fit it into a 32px square without cropping, and the artwork gets roughly five pixels of height. That's before any padding already present in the file.

The browser hasn't done anything wrong. The asset doesn't suit the slot.

You can catch quite a lot with a tiny test page. Put your own file at /logo.png and render it at the sizes you intend to use:

<div class="logo-preview">
  <img src="/logo.png" width="16" height="16" alt="Logo at 16px">
  <img src="/logo.png" width="32" height="32" alt="Logo at 32px">
</div>

<div class="logo-preview logo-preview--dark">
  <img src="/logo.png" width="16" height="16" alt="Logo at 16px on dark">
  <img src="/logo.png" width="32" height="32" alt="Logo at 32px on dark">
</div>

.logo-preview {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: #fff;
}

.logo-preview--dark {
  background: #0f172a;
}

.logo-preview img {
  display: block;
  object-fit: contain;
}

object-fit: contain keeps the image's proportions inside each square. It also keeps any empty space baked into the image. A 512px canvas with a small symbol in the middle still produces a small symbol.

Look at these previews at normal page zoom. Enlarging them is useful for debugging the pixels, but it changes the question. You're trying to find out whether someone can recognize the mark while looking for a tab.

Sometimes the right fix is a separate icon: the symbol alone, or a single letter. You can keep the full wordmark in the header.

PNG tells you the format, not the background

A white logo preview on a white page can hide an opaque white rectangle surprisingly well.

PNG supports transparency. That doesn't mean a particular PNG contains it. A gray checkerboard can even be painted into the image, so the familiar transparency pattern becomes part of the artwork.

For a pixel-based check, you need to inspect alpha as well as color. The browser's Canvas API exposes image pixels through getImageData(), which makes that kind of inspection possible locally.

There is a catch: finding a few partly transparent pixels doesn't prove the background is transparent. They might just be softened edges around an otherwise opaque image. Even a fully transparent pixel somewhere in the file says little about the rest of its background.

A visual check still helps. Place the image against white, a dark color, and a color you wouldn't normally choose for the brand. The awkward background is useful because it makes boxes and pale fringes easier to spot.

Also, a transparent background doesn't guarantee the logo will work in dark mode. A dark symbol can have completely correct transparency and still disappear against a dark header. That needs a light version of the mark, or an intentional background behind it.

Those are different problems, so the report should explain them separately.

An SVG can still contain a bitmap

The .svg extension isn't a promise that every part of the artwork is vector geometry.

SVG has an <image> element, and that element can contain raster artwork. This is valid SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <image href="logo.png" width="512" height="512" />
</svg>

The document scales. The PNG inside it still has a fixed number of pixels. Putting it inside an SVG doesn't turn those pixels into paths.

That matters when someone expects to use the file for a large sign or send editable artwork to a designer.

Finding an <image> element is a reason to inspect the file, though. It isn't a reason to reject every SVG that contains one. An SVG can legitimately combine vector shapes with a raster texture, and an image element can reference another SVG.

The useful question is whether the artwork provides what the person needs. If they asked for a scalable vector mark and received only a wrapped PNG, the file hasn't met that requirement.

Even paths don't solve the favicon problem from earlier. Vector geometry can scale down cleanly while becoming too small to recognize. File structure and small-size legibility need separate checks.

This part can stay in the browser

For DepthLogo's checker, the selected logo file stays on the user's device. The file inspection runs in the browser.

That's a good fit for this particular job. Reading image dimensions, looking at pixels, and showing background previews don't inherently require a server upload. Someone checking an unreleased brand can use the tool without sending us the artwork.

I wouldn't apply that decision to every image-processing feature. Large files and expensive operations need their own performance budget. But for a focused file checker, local processing is worth considering before adding an upload endpoint.

It also helps to keep the analysis separate from the interface. Small test images can isolate specific cases: a dark shape on transparency, a colored shape in a white box, or fine lines that stop surviving at small sizes. You can test the expected warning without making the entire page part of the test.

A nice-looking result screen won't tell you whether the checker can distinguish those cases.

A warning needs a next step

The difficult part of a checker is deciding what its findings mean to the person using it.

A wide wordmark might be exactly right for a website header. Warning about its proportions only helps if you explain that it will be hard to use in a square avatar. Otherwise, the tool is criticizing a design for a job it wasn't meant to do.

The same goes for a detailed, shaded logo. It may work well on a large landing page and need a simpler companion for the browser tab.

A useful report can say, “Keep this version for the header; use the symbol on its own for the favicon.” That gives someone a task they can finish. A lower score on its own mostly gives them something to worry about.

That's the role we give the logo checker: help people spot file and usage problems before they place the logo everywhere. It doesn't decide whether their brand is good, or whether the mark is legally available.

If you're adding a logo to a project, try the small previews before spending time on the large one. Getting the file into an <img> tag is easy. Making sure it still does its job there takes a closer look.

How an Online Stamp Maker Works: A Deep Dive into Browser-Based Design Tools

Mark jay — Tue, 07 Apr 2026 02:33:52 +0000

Building a browser-based design tool sounds straightforward — until you realize users expect Photoshop-level control, instant previews, and multi-format exports, all without installing anything. Having spent time building an online stamp maker, I want to walk through the real technical challenges behind this kind of product and how we solved them.

- The Core Rendering Decision: Canvas vs SVG

The first architectural decision in any browser-based design tool is the rendering engine. You have two primary options: HTML5 Canvas and SVG DOM. Each has a fundamentally different model.

Canvas is a pixel-based imperative API. You draw to it with commands:

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 180, 0, Math.PI * 2);
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 4;
ctx.stroke();

The canvas doesn't know about the circle after drawing it. It's pixels on a bitmap. This makes it fast for rendering complex scenes, but terrible for interaction — you have to implement your own hit detection.

SVG is a retained-mode vector format. Every shape is a DOM node you can query, style, and modify:

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', 200);
circle.setAttribute('cy', 200);
circle.setAttribute('r', 180);
circle.setAttribute('stroke', '#1a1a1a');
circle.setAttribute('stroke-width', '4');
svg.appendChild(circle);

The element persists. You can addEventListener on it, animate it, transform it — the DOM does the heavy lifting.

For a stamp maker specifically, SVG wins. Stamps are vector by nature: circles, text, borders, logos. The design must remain editable after placement. And SVG is the primary output format for professional print production. Using Canvas as the primary renderer would mean converting back to SVG for export — a lossy and complex round-trip.

Circular Text: The Hardest UI Problem

The signature feature of any seal or stamp design is text rendered along a circular arc. This looks deceptively simple but involves non-trivial math.

SVG has a native solution: with a element as the reference curve.

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="top-arc"
      d="M 60,200 A 140,140 0 1,1 340,200"
    />
  </defs>
  <text font-family="Futura, sans-serif" font-size="18" fill="#1a1a1a"
        letter-spacing="8">
    <textPath href="#top-arc" startOffset="50%" text-anchor="middle">
      ACME CORPORATION
    </textPath>
  </text>
</svg>

The startOffset="50%" with text-anchor="middle" centers the text at the top of the arc. The arc path uses the SVG Arc command (A): center x/y, rx/ry, x-axis-rotation, large-arc-flag, sweep-flag, end x/y.

For the bottom arc (a second line of text that curves the other direction):

<defs>
  <path id="bottom-arc"
    d="M 60,200 A 140,140 0 0,0 340,200"
  />
</defs>
<text>
  <textPath href="#bottom-arc" startOffset="50%" text-anchor="middle">
    EST. 2020 · NEW YORK
  </textPath>
</text>

The key difference: sweep-flag flips from 1 to 0, reversing the arc direction so text reads naturally at the bottom.

The Letter Spacing Problem at Small Radii

Here's where theory meets reality: letter-spacing in SVG (and CSS) adds spacing after each glyph, measured in straight-line units. On a tight curve, this creates uneven visual spacing — the gap feels wider at the outer edge of each letter and tighter at the inner edge.

There's no CSS property to fix this. The correct solution is to manually place each glyph using textLength and lengthAdjust="spacingAndGlyphs", or better yet, compute per-character rotation and placement programmatically:

function placeTextOnArc(text, cx, cy, radius, startAngle) {
  const chars = text.split('');
  const angleStep = (2 * Math.PI) / (chars.length * 4); // tune spacing

  return chars.map((char, i) => {
    const angle = startAngle + (i * angleStep);
    const x = cx + radius * Math.cos(angle);
    const y = cy + radius * Math.sin(angle);
    const rotation = (angle * 180 / Math.PI) + 90;

    return `<text x="${x}" y="${y}" 
                  transform="rotate(${rotation}, ${x}, ${y})"
                  text-anchor="middle">${char}</text>`;
  }).join('');
}

This approach gives you per-character control and consistent visual spacing regardless of radius — critical for production-quality output.

Multi-Format Export Architecture

A serious online stamp maker needs to export multiple formats from a single SVG source: PNG, PDF, EPS, SVG, and DOCX. Each has different requirements.

SVG Export
Straightforward — serialize the DOM:

function exportSVG(svgElement) {
  const serializer = new XMLSerializer();
  const svgString = serializer.serializeToString(svgElement);
  const blob = new Blob([svgString], { type: 'image/svg+xml' });
  triggerDownload(blob, 'stamp.svg');
}

One caveat: inline fonts. If your SVG uses a custom web font loaded via @font-face, the exported SVG won't embed that font. You need to either:

Convert text to paths (font-to-path conversion, handled server-side with libraries like opentype.js)

Embed the font as a base64 data URI inside the SVG

PNG Export
Use an element as a bridge to :

async function exportPNG(svgElement, scale = 3) {
  const svgString = new XMLSerializer().serializeToString(svgElement);
  const blob = new Blob([svgString], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);

  const img = new Image();
  img.src = url;

  await new Promise(resolve => img.onload = resolve);

  const canvas = document.createElement('canvas');
  const size = svgElement.viewBox.baseVal;
  canvas.width = size.width * scale;   // 3× for 300 DPI equivalent
  canvas.height = size.height * scale;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  canvas.toBlob(blob => triggerDownload(blob, 'stamp.png'), 'image/png');
  URL.revokeObjectURL(url);
}

The scale = 3 multiplier is critical — rendering at 3× the display size gives you ~300 DPI output when printed at the stamp's physical dimensions. Without this, the exported PNG will look pixelated in documents.

PDF Export

Browser-side PDF generation is handled by libraries like jsPDF or pdf-lib. The cleanest approach is to embed the PNG raster inside the PDF rather than attempting SVG-to-PDF vector conversion:

import { jsPDF } from 'jspdf';

async function exportPDF(svgElement) {
  const pngDataUrl = await svgToPNGDataURL(svgElement, 4); // 4× scale

  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: [50, 50] // 50×50mm page for a stamp
  });

  pdf.addImage(pngDataUrl, 'PNG', 0, 0, 50, 50);
  pdf.save('stamp.pdf');
}

For true vector PDF output (needed for professional print), server-side rendering with tools like Puppeteer (headless Chrome) or CairoSVG is more reliable.

State Management for the Design Editor

A stamp editor needs to track the full design state: border styles, text content, font choices, sizes, colors, logo images. This state must be:

1.Reactive — UI updates instantly as properties change
2.Serializable — saveable to JSON for session persistence
3.Undoable — users expect Ctrl+Z

A simple command pattern works well here:

class StampEditor {
  constructor() {
    this.state = {
      outerText: 'COMPANY NAME',
      innerText: 'EST. 2020',
      fontSize: 16,
      letterSpacing: 8,
      borderWidth: 3,
      borderStyle: 'double',
      inkColor: '#1a1a1a'
    };
    this.history = [];
    this.redoStack = [];
  }

  update(patch) {
    this.history.push({ ...this.state });
    this.redoStack = [];
    this.state = { ...this.state, ...patch };
    this.render();
  }

  undo() {
    if (!this.history.length) return;
    this.redoStack.push({ ...this.state });
    this.state = this.history.pop();
    this.render();
  }
}

The immutable update pattern (spreading into a new object) is crucial — it ensures each history entry is a clean snapshot, not a reference to a mutated object.

Real-World Lessons

After building and iterating on Stampdy as a production stamp maker, a few things stand out:

Font rendering inconsistency across browsers is the biggest pain point. Chrome, Firefox, and Safari all render the same SVG font slightly differently — especially at small sizes. The safest fix is to pre-render text-heavy stamps to PNG on the server using a headless browser and serve that as the preview.

User-uploaded logos require aggressive sanitization. SVGs can contain tags and external resource references. Never render user-uploaded SVG directly into the document — parse it, strip dangerous elements, then embed.</p> <p>Performance on mobile degrades fast with complex SVGs. Profile with Chrome DevTools and look at layout/paint time for the SVG element. In practice, stamps with more than 500 path nodes need Canvas fallback on mobile.</p>

StampDy: Your Go-To Online Rubber Stamp Maker

Mark jay — Sun, 07 Sep 2025 02:08:28 +0000

Ever found yourself scrambling for a last-minute seal for a contract or wishing you could jazz up your packaging without breaking the bank? I did too—until I stumbled on StampDy, a browser-based platform that makes creating custom stamps genuinely painless.

Imagine designing a professional-quality rubber stamp in minutes: just pick a shape (round, square, even triangle), type your text, tweak fonts and spacing, upload your logo, and voilà—you’ve got a live preview ready to download in SVG, PNG, PDF, or even DOCX. No installs, no confusing UI, and zero design chops required.

What sets StampDy apart is how thoughtfully it balances power with simplicity:

Real-time Editing: See every tweak instantly—resize your company name, reposition your icon, adjust the border width—without hitting “Refresh.”

Template Library: From official notary seals to playful event monograms, the growing collection of ready-to-edit layouts means you’re never starting from a blank canvas.

Multi-format Downloads: Whether you need a high-res PNG for digital docs or a vector SVG for your stamp maker, StampDy supplies the right file, watermark-free.

Mobile-Friendly: Design on your laptop, tablet, or even your phone while you’re on the go.

For freelancers, small-biz owners, teachers, or anyone who loves adding a personal touch, StampDy sidesteps the usual hassles—no emailing back-and-forth with a designer, no hefty setup fees, and no outdated software to learn. Once your design is ready, you can send it straight to your favorite stamp manufacturer or keep it digital for documents and presentations.

Behind the scenes, StampDy’s intuitive editor runs entirely in your browser, so there’s nothing to install or update. Its smart validation flags low-contrast text or low-resolution logos, so your final impression comes out crisp every time.

I’ve used it for everything from sealing mock contracts in workshops to branding gift tags for small orders, and it never disappoints. If you’ve ever thought “I wish I could make my own stamp,” StampDy was built for you. Tap into it at https://stampdy.com, and give your documents and packaging the bespoke flair they deserve.