Why use SVG for placeholders?

An SVG placeholder is a few hundred bytes of text, scales without blurring and can be inlined as a data URI, so it adds almost nothing to page weight.

Should I use the URL-encoded or Base64 data URI?

For SVG, the URL-encoded form is usually shorter than Base64, since Base64 adds about 33% overhead. Both work in src and CSS url().

Can I change the text on the placeholder?

Yes. Enter custom text, or leave it empty to show the image dimensions.

SVG Placeholder Image Generator

Generate customizable SVG image placeholders with custom dimensions, colors, and text.

About SVG placeholder generator

Generates a lightweight SVG placeholder image with a set width and height, background and text colors, and custom text or the default 'W x H' label. Font size auto-fits unless you set one, and the font can be sans-serif, serif or monospace. You get the SVG source (optionally minified), a URL-encoded data URI, a Base64 data URI and an <img> tag, or you can download the .svg file.

Common uses

Fill image slots in a layout before final images exist
Inline a placeholder as a data URI without an extra request
Create sized placeholders for common formats like 1200x630 or 1920x1080
Use as a fallback image in tests or a design system

FAQ

Why use SVG for placeholders?: An SVG placeholder is a few hundred bytes of text, scales without blurring and can be inlined as a data URI, so it adds almost nothing to page weight.
Should I use the URL-encoded or Base64 data URI?: For SVG, the URL-encoded form is usually shorter than Base64, since Base64 adds about 33% overhead. Both work in <img> src and CSS url().
Can I change the text on the placeholder?: Yes. Enter custom text, or leave it empty to show the image dimensions.