SVG Placeholder Generator

Create lightweight SVG placeholder images with custom text and colors.

Width (px) Height (px)

Background color

Text color

Pick a color, or type any valid CSS value like transparent or rgba().

Label text

Font size (px)

Live preview (Scaled to fit)

SVG markup

Data URL (Base64)

Need a lightweight placeholder image for a mockup, wireframe, or loading state? The SVG Placeholder Generator creates simple, resolution‑independent SVG images on the fly, with your choice of size, colors, and text.

What this tool does

Generates SVG placeholders by size (e.g. 800×600) with custom background and text color.
Displays a live preview so you can confirm the design before using it.
Outputs both raw SVG markup and data URLs (including Base64), ready for <img> tags, CSS backgrounds, or design tools.
Keeps dimensions and font size within practical bounds (width/height roughly 16–4000px and font sizes roughly 6–120px) for readability and performance.

How to use it

Set the width and height in pixels.
Choose the background color, text color, and optional label text (for example: 800×600 or Hero Image).
Review the preview image.
Copy either the SVG markup or the generated data URL into your project.

Because the image is pure SVG text, it is tiny, crisp at any resolution, and ideal for fast‑loading placeholders.

SVG Placeholder Generator