Generate SVG placeholders with custom text and colors

Images

SVG Placeholder Generator

Create on-the-fly SVG placeholders with custom text, colors, and dimensions.

Generators

Width (px)

Height (px)

Font size (px)

Background color

Text color

Text (defaults to size)

Live preview

SVG rendered with your current settings.

300 × 200

HTML (inline SVG)

Paste directly into your markup.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice">
  <rect width="100%" height="100%" fill="#0f172a" />
  <text x="50%" y="50%" fill="#ffffff" font-size="32" font-family="'Inter', system-ui, -apple-system, sans-serif" dominant-baseline="middle" text-anchor="middle">300 x 200</text>
</svg>

SVG as Base64

Use as an img source or CSS background.

Base64 data will appear here once your SVG is ready.