SVG placeholder image generator
Generate a lightweight SVG placeholder image (dimensions, text, colors) as SVG, data-URI or <img> tag.
🔒 100% client-side — no data sent
Generate an ultra-light SVG placeholder image for your mockups: choose the dimensions, colors and label, then grab the SVG, a data-URI or a ready-to-paste <img> tag. No network request, everything is generated locally.
What is it for?
- ▸ Replace a missing image in a mockup
- ▸ Create test thumbnails at the right dimensions
- ▸ Avoid depending on an external placeholder service
- ▸ Inline an image via data-URI
FAQ
Why an SVG placeholder rather than an image?
It is a tiny text file, crisp at any size and embeddable directly as a data-URI, with no network request.
How do I use the data-URI?
Paste it into the src attribute of an <img> tag or a CSS background-image property.
What is the maximum size?
Up to 4000 pixels per side. Since the SVG stays vectorial, it remains crisp at any display size.
Is the label customizable?
Yes, leave the field empty to show the dimensions, or type your own text.
Related tools
Basic Auth · header generator Generate the HTTP Authorization: Basic header from a username and password. Bearer · Authorization header Generate the HTTP Authorization: Bearer header and extract a token from a header. Code playground (JS/TS/Python/PHP) Run JavaScript, TypeScript, Python or PHP and see the result instantly, 100% in your browser. Color shades Generate the tints and shades of a color for your palette, in your browser. Cookie · parser Break down a Cookie or Set-Cookie header into readable key/value pairs. CORS headers · builder Generate CORS headers (Access-Control-Allow-*) for your server.