SVG Placeholder Generator

What this tool is used for

• Producing a lightweight placeholder image at an exact size for a layout.
• Generating a labelled box that shows its own dimensions during development.
• Replacing a remote placeholder service with a local data URI.
• Filling an image slot without waiting on real assets.
• Testing how a layout handles a specific aspect ratio.

Frequently Asked Questions

Why use SVG placeholders instead of a service?

They need no network request — the image is inline data, so it renders instantly, works offline, and survives the placeholder service going down or rate-limiting you. Several popular placeholder hosts have disappeared, breaking every page that used them.

How do I embed one?

As a data URI in src, or inline in the markup. For data URIs prefer URL-encoding over Base64 — SVG is text, and Base64 inflates it by about 33% while URL-encoding often leaves it smaller than the original.

Do they prevent layout shift?

Only if the dimensions are set. An SVG with a viewBox and explicit width/height gives the browser an aspect ratio to reserve space with, which is what keeps Cumulative Layout Shift down — the same reason real images need width and height.

Are they accessible?

A decorative placeholder should carry alt="" so screen readers skip it. Announcing 'placeholder 600 by 400' to a screen reader user is noise. If the image will later convey meaning, the alt text belongs on the real image.

Can I use them in production?

Yes — as low-quality image placeholders (LQIP) shown while the real image loads, or as skeleton screens. Being tiny and inline, they add no request and can be part of the initial HTML payload.

How large is the file compared with a raster placeholder?

Typically a few hundred bytes, against several kilobytes for an equivalent PNG. That is small enough to inline as a data URI, which removes the request entirely — the main reason to prefer SVG here.

Does a data URI need base64 encoding?

No, and it is usually worse. SVG is text, so URL-encoding it keeps the payload smaller than base64's 33% inflation. Only the `#`, `<`, `>` and quote characters strictly need escaping.

Can it be styled with CSS from the page?

Only when inlined directly in the markup. An SVG loaded through `<img>` or a data URI is a separate document, so page styles and `currentColor` do not reach inside it — a frequent surprise when a placeholder ignores a theme.

Common errors and gotchas

• Leaving placeholders in production, which is what makes them worth keeping obviously fake.
• Using a remote placeholder service, which adds a request and a dependency the SVG removes.
• Forgetting the xmlns attribute, without which the SVG will not render standalone.
• Not encoding the `#` in a hex colour inside a data URI, which truncates it.
• Choosing a placeholder size that is not the real asset's ratio, so the layout shifts later.