Placeholder Image Generator
Type width, height, a short label, and two hex colors. The page draws an SVG rectangle and mounts it in the preview. This is not a PNG file download and not a QR code.
Rated 4.7 out of 5 based on 387 reviews
How to draw a placeholder SVG
- Enter width and height as integers from 1 to 4000. The default is 320 by 180.
- Type a label up to 80 characters. The default reads 320 by 180. Background and text need 3- or 6-digit hex.
- Click Draw placeholder. The SVG preview fills #qrMount. The output box holds the same SVG markup.
- Copy the markup into a mock layout. This page does not encode a URL as a QR and does not offer a PNG download.
SVG placeholder rectangle
Labeled SVG box for layout mocks, not a QR matrix
| Format | SVG markup with viewBox matching width and height |
|---|---|
| Size cap | Each side from 1 to 4000 CSS pixels |
| Label | Centered text, at most 80 characters, XML-escaped |
| Fills | Background and text as 3- or 6-digit hex |
| Preview | SVG mounts in #qrMount on this page |
| Not included | PNG download, JPEG, and QR encoding |
What this placeholder draws
The engine returns an SVG rectangle. Width and height become both the SVG attributes and the viewBox. A rect fills the box with the background hex. A text node sits at 50% 50% with middle baseline and the foreground hex. Font size scales with the shorter side. The preview uses the same SVG the output box shows. This is a layout stand-in, not a photograph and not a QR symbol.
How the SVG is assembled
Width and height round to integers. Each must be at least 1 and at most 4000. Hex must match 3 or 6 digits, with or without #. The label is sliced to 80 characters and escaped for XML so < and & cannot break the markup. Font size is max(10, min(width, height) / 8). The shared QR encoder on this site is not called in placeholder mode.
Placeholder SVG versus QR
A QR encodes a URL or other text as modules. That job lives on the QR code generator. This page reuses the same preview mount so you can see the SVG, but the payload is a gray box and a label. Do not scan the preview expecting a link. For a CSS fade instead of a mock rectangle, use the CSS gradient page.
Use cases
Hold space in a wireframe, mark a 16:9 slot, or label a banner size before assets exist. Paste the SVG into an HTML mock. Raster export is your own step in another app if you need a PNG file.
Limits
No PNG or JPEG download. No logo, no photo, no QR modules. Label length caps at 80 characters. Sides cap at 4000. Invalid hex fails. The page runs in this tab. CZNull does not receive the sizes.