SVG Placeholder Generator

Generate custom SVG placeholder images with your own dimensions, colors, and text. Export as raw SVG, Base64, PNG or SVG.

Design Config

Width (px)

Height (px)

Custom Text

Font Size (px)

Include exact width/height attributes

Background Color

Text Color

Preview

Raw SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 350" width="600" height="350">
  <rect width="600" height="350" fill="#CCCCCC" />
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace, sans-serif" font-size="32px" fill="#333333">600 x 350</text>
</svg>

Base64 DataURL

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzUwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM1MCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIzNTAiIGZpbGw9IiNDQ0NDQ0MiIC8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzJweCIgZmlsbD0iIzMzMzMzMyI+NjAwIHggMzUwPC90ZXh0Pgo8L3N2Zz4=

Tool guide

Create configurable SVG placeholders

Set dimensions, background and text to generate a placeholder, then copy SVG code or download SVG or PNG.

How to use

Set dimensions, colors and text.
Inspect the preview and copy code or download an image.

Example and expected result

Scenario: width 600, height 400, text Demo.
Output: a 600×400 placeholder for layout testing.

Capabilities and limits

PNG is rasterized and may blur when enlarged.
Fonts depend on the device and destination; large exports require more memory.

Troubleshooting

Check fonts when text differs in the destination. Reduce dimensions first if exporting fails.

Data processing and storage

Graphics are generated in the browser without a remote placeholder service; exported files use local downloads.

Read the full data-processing notice