SVG Placeholder Generator

A free online SVG placeholder image generator. Create placeholder SVG graphics with custom widths, heights, background colors, text content, text colors, and font sizes instantly in your browser. Choose from common dimensions (16:9, 1:1, banner) or color presets, view live rendering, and export/copy raw SVG code or copy it directly as a Base64-encoded Data URI for immediate use in CSS background-images or HTML img tags.

Dimension Presets

Configuration

SVG Preview

800 x 450

Usage in Web Projects

HTML Image Tag (using Data URI)

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaW..." width="800" height="450" alt="Placeholder" />

CSS Background Image

.placeholder-bg {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaW...");
  width: 800px;
  height: 450px;
}

Related Design Tools

CL

Color Converter (HEX / RGB / HSL)

Convert colors between HEX, RGB, HSL, and CMYK formats.

Ic

Image Compressor

Compress images in your browser — JPEG, WebP, PNG. No uploads.

Cp

Color Palette Generator

Generate complementary, analogous and triadic palettes from any colour.

Browse all Design tools →