SVG Placeholder Generator
Generate a lightweight placeholder image as SVG markup or a data URI.
SVG markup
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"><rect width="100%" height="100%" fill="#1f2937"/><text x="50%" y="50%" font-family="sans-serif" font-size="67" fill="#9ca3af" text-anchor="middle" dominant-baseline="middle">600×400</text></svg>
Data URI
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%20viewBox%3D%220%200%20600%20400%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231f2937%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20font-family%3D%22sans-serif%22%20font-size%3D%2267%22%20fill%3D%22%239ca3af%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E600%C3%97400%3C%2Ftext%3E%3C%2Fsvg%3E
SVG placeholders
An SVG placeholderis a tiny, dependency-free stand-in image you can drop into mockups and prototypes — no external service required. Because it's vector text, the data URI stays small and scales crisply. Paste the markup directly into HTML, or use the data URI as an img src. It's generated entirely in your browser.
Related: the SVG to data URI encoder, the CSS gradient generator, and the QR code generator.
Related Generators tools
UUID Generator
Generate secure v4 UUIDs.
QR Code Generator
Create customizable QR codes and export as SVG or PNG.
Lorem Ipsum
Generate placeholder paragraphs, sentences, or word lists.
Random Hex Generator
Generate cryptographically random hexadecimal strings.
Random Number String
Generate a random string of digits of any length.
Random String Generator
Generate random strings from a custom character set.
Random Color Generator
Generate random colors as HEX, RGB, and HSL.
MAC Address Generator
Generate random MAC addresses in several formats.