☰
Home
/
Colors & Design
/
Placeholder Image
🖼
Placeholder Image
Generate SVG placeholder images
☆
Bookmark
Loading tool…
Placeholder Image Generator
Width (px)
Height (px)
Custom text
Background
Text color
Common sizes
16:9
4:3
1:1
OG
Banner
Preview
SVG source
⧉ Copy
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"> <rect width="100%" height="100%" fill="#1e3a4a"/> <line x1="0" y1="0" x2="400" y2="300" stroke="#2dd4bf" stroke-opacity="0.15" stroke-width="1"/> <line x1="400" y1="0" x2="0" y2="300" stroke="#2dd4bf" stroke-opacity="0.15" stroke-width="1"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="37.5" fill="#2dd4bf" font-weight="600">400×300</text> </svg>
HTML img tag
⧉ Copy
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231e3a4a%22%2F%3E%0A%20%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22400%22%20y2%3D%22300%22%20stroke%3D%22%232dd4bf%22%20stroke-opacity%3D%220.15%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3Cline%20x1%3D%22400%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22300%22%20stroke%3D%22%232dd4bf%22%20stroke-opacity%3D%220.15%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-family%3D%22monospace%22%20font-size%3D%2237.5%22%20fill%3D%22%232dd4bf%22%20font-weight%3D%22600%22%3E400%C3%97300%3C%2Ftext%3E%0A%3C%2Fsvg%3E" width="400" height="300" alt="400x300" />
Markdown
