Gallery wall · frame and mat · tombstone label
SVG Placeholder Generator
Set a size, colours and a line of text. The placeholder hangs in the frame, resizing on the wall as you type, with its label beside it. Copy the SVG, a data URI or an img tag, or download the file.
Commission
The piece
A placeholder that weighs nothing
Layouts need images before the images exist. An SVG placeholder is a few hundred bytes of text that draws a rectangle with a label at any size you like, scales without blurring, and can be pasted straight into HTML or CSS as a data URI, so there is no file to host while you design. This page writes that SVG for you and shows it hung and framed, so you see the proportions the way they will read on the page.
Using it
Copy SVG gives the raw file for saving or pasting inline. Copy data URI gives a data:image/svg+xml string to use as an img src or a CSS url(). Copy img gives a ready <img> tag with width and height set, which keeps your layout from jumping when the real image arrives.
Why a gallery wall
Galleries hang work at 57 inches to the centre and beside each piece put a small card, the tombstone label: artist, title, year, medium, dimensions. A placeholder is a piece with no artist yet, so it gets a frame, a mat and a label with its dimensions, which is all a placeholder really has to say.
Why does the text field say the size?
Because that is the most useful placeholder text: anyone looking at the mock-up sees what size image to supply. Type anything else to override it; clear the field to go back to the size.
Can I use a font of my own?
The SVG names a generic family (sans-serif, serif or monospace) so it renders everywhere without loading a font. Edit the copied code to name a specific one if you like.
Is anything uploaded?
No. The SVG is generated in your browser, and the download is created there too.