Overview
Generate placeholder images as SVG - the format designers and developers actually want for mockups, because it scales and weighs a few hundred bytes. Set dimensions, background and text colours, and optional label text, then copy the SVG markup or a ready-to-paste data URI. Output is instant and fully local.
How It Works
Set the width and height (600 by 400 by default). Pick the background and foreground colours with the two colour pickers, and optionally type label text - leave it empty and the placeholder shows its own dimensions, like 600x400, which is the convention placeholder services use. The preview updates as you edit, rendered from the exact SVG you will copy. Two buttons hand you the raw SVG markup or the data URI form, both copied straight to the clipboard.
Step-by-Step Usage Guide
- Set the width and height you need.
- Choose background and foreground colours.
- Type label text, or leave blank for the default dimensions label.
- Copy the SVG or the data URI from the buttons below the preview.
Technical Specifications & Standards
The generator builds an SVG string directly: a full-bleed rectangle in the background colour, then a centred text element in the foreground colour, using system-ui with a bold weight and a font size of twelve percent of the shorter dimension, so labels scale sensibly from a 60-pixel badge to a 2000-pixel hero. Text is centred with dominant-baseline middle and text-anchor middle, the pair that centres text reliably across browsers in SVG. The data URI output is produced by encodeURIComponent over the markup, producing a data:image/svg+xml URI you can paste directly into an img src or CSS background - no base64 needed, which keeps the URI smaller and human-readable. Because the output is vector, the same placeholder serves a 100-pixel thumbnail and a retina banner without artefacts, and file size stays roughly constant regardless of dimensions. One limit to know: the label is a single line; long text will overflow the box rather than wrap.
Targeted Use Cases
- Dropping placeholders into a design mockup before real artwork exists.
- Building wireframes with correctly sized image slots.
- Creating lightweight test images for CSS layout development.
- Generating data URIs for email templates that block external images.
Notes & Gotchas
- Leave the label blank for generic boxes; type it only when the slot's purpose matters.
- Use the data URI for self-contained HTML or CSS with no extra file request.
- Keep labels short - the text is a single centred line and will not wrap.
- Prefer SVG over PNG placeholders wherever the consumer renders it, since it scales losslessly.
Frequently Asked Questions
What is the data URI output for?
It is the same SVG encoded as a data:image/svg+xml URI, so you can paste it directly into an img src attribute or a CSS background-image without hosting a file.
What happens if I leave the text empty?
The placeholder labels itself with its dimensions, for example 600x400, which matches the convention of popular placeholder-image services.
Why choose SVG over a PNG placeholder?
SVG is vector - it stays sharp at any size and the file is a few hundred bytes regardless of dimensions, while a PNG's size grows with pixel area.
Does the text wrap if it is long?
No. The label is a single centred line and long text overflows the box. Keep labels to a word or two.