SVG placeholder

Generators

Generate a sized SVG placeholder image with custom colors and label.

Width

Height

Background

Foreground

Label (blank → dimensions)

SVG markup

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="640×360"><rect width="640" height="360" fill="#1f2937"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="60" fill="#f3f4f6">640×360</text></svg>

Data URI

data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22360%22%20viewBox%3D%220%200%20640%20360%22%20role%3D%22img%22%20aria-label%3D%22640%C3%97360%22%3E%3Crect%20width%3D%22640%22%20height%3D%22360%22%20fill%3D%22%231f2937%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-family%3D%22ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20monospace%22%20font-size%3D%2260%22%20fill%3D%22%23f3f4f6%22%3E640%C3%97360%3C%2Ftext%3E%3C%2Fsvg%3E