Images

SVG Placeholder Generator

Generate SVG placeholder images with custom dimensions, colors, and text.

Web & Frontend

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.

About SVG Placeholder Generator

The SVG Placeholder Generator is a handy tool for frontend developers needing a quick mock image. It creates lightweight, scalable vector images with custom dimensions and colors, outputting the result as a base64 svg or raw code.

Streamline your prototyping workflow. Instead of searching for stock photos or creating dummy files in design software, use this placeholder generator to create a properly sized placeholder image in seconds. It allows you to test responsive layouts with precise aspect ratios.

Set the Width and Height, then pick background and text colors. You can add a custom label to identifying area. Copy the img src data URI to embed it directly in your HTML or download the .svg file.

Under the Hood

The SVG is constructed as a React component string and then serialized. Unlike raster image generators that require server-side Canvas processing, this tool builds a vector DOM representation. It instantly converts the SVG string to a Base64 Data URI (`data:image/svg+xml;base64,...`) allowing developers to embed it directly as a `src` attribute without any HTTP requests.