SVG Placeholder
Generate simple SVG placeholder images with custom size, colors, text and corner radius.
How to use it
- Set the width and height in pixels (16 to 4096).
- Pick the background and text colors, type a label and set a corner radius.
- The preview and the SVG code update as you change anything.
- Click Copy to grab the code, or Download to save it as a .svg file.
Common use cases
- Wireframes and mockups - drop properly sized boxes into layouts before real assets exist.
- Local development - avoid hotlinking remote placeholder services in offline or air-gapped work.
- Design specs - hand developers exact-ratio placeholders that scale without blur.
- Email and print drafts - sketch image slots in a format that stays sharp at any size.
Why it stays private
The SVG is built from your inputs with plain string concatenation in the browser - there is no server, no template service and no request. The generated file is self-contained: one rectangle and one text element.
FAQ
Q: Does the generated SVG depend on external fonts? A: It uses a generic sans-serif font stack, so the label renders with whatever system font is available. For pixel-identical text everywhere, convert the label to outlines in a design tool.
Q: Can I use HTML or line breaks in the label? A: No. The label is escaped, so angle brackets and ampersands appear literally. Keep it to a single short line; it is a placeholder after all.
Q: Why is there a 4096 pixel limit? A: Placeholders do not need to be huge, and the cap keeps the preview and the copied code reasonable. Generate at a smaller size and scale the SVG - it stays sharp.
Your data stays on this device
SVG Placeholder runs 100% locally. Everything you paste or drop is processed by your own browser and never transmitted. Nothing is stored on our servers — close the tab and it is gone.
Nothing you type is sent to a server, logged, or used for analytics. The page works even with your network disconnected after first load.