SVG placeholder generator

Create lightweight placeholders for mockups and loading states

All generation runs locally in your browser

Last updated: February 5, 2026

CreatorFrank Zhao

Width (px)

Background

Height (px)

Text color

Font size (px)

Custom text

Use exact size

SVG HTML element

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

SVG in Base64

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzUwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM1MCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIzNTAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4MzUwPC90ZXh0PiAgIAo8L3N2Zz4=

Preview

Introduction / overview

The SVG Placeholder Generator creates a tiny SVG image you can use as a stand-in for a banner, hero image, chart, or thumbnail. You control the pixel size, background color, text color, and optional label.

Typical users include designers, frontend developers, documentation writers, and anyone building UI skeletons. Everything runs locally, so your inputs stay in your browser.

Good pairings

If you need to inspect or decode a data URL, pair this with our Base64 String Encoder/Decoder for quick verification.

How to use (quick start)

Set the Width and Height in pixels.
Choose Background and Text color.
Optionally enter Custom text (otherwise it shows width×height).
Copy the SVG (HTML) or the Base64 data URL (embed as an image).

Worked example (numbers included)

Set width to $600$ and height to $350$ . If Custom text is empty, the label becomes:

\text{label} = 600 \times 350 \Rightarrow \text{label} = \text{\"600x350\"}

Then click Copy Base64 and paste the data URL into an img tag or CSS.

Real-world examples

Design handoff mockups

Background: You want consistent image proportions before real assets arrive. Input: $1200$ by $600$ . Result: A crisp, scalable rectangle with a clear label.

Skeleton screens for loading states

Background: A grid loads images from a CDN. Input: $320$ by $200$ . Result: Layout stays stable while content loads.

Documentation placeholders

Background: You’re writing docs and want predictable visuals. Input: $800$ by $450$ with label “Preview”. Result: A stable cue without shipping real images.

Common scenarios / when to use

Inline SVG in HTML

Copy the SVG and paste it inline for zero network requests.

Theme previews

Test brand colors and contrast quickly without real assets.

Stable aspect ratios

Keep grids stable while design and engineering iterate.

Local-only generation

Useful when you can’t upload assets to third-party tools.

Tips & best practices

Prefer viewBox for responsiveness: turning off “Use exact size” keeps the SVG flexible.

Keep labels short: long text can overflow in small placeholders.

Share settings with teammates: use Share to generate a link that includes your inputs.

Calculation method / formula explanation

The placeholder is an SVG with a background rectangle and centered text. The coordinate system is defined as:

\text{viewBox} = \langle 0,\ 0,\ W,\ H \rangle

The label is centered (conceptually):

x_c

=

0.5\,W

,

y_c

=

0.5\,H

Related concepts / background info

SVG viewBox: makes the graphic scale cleanly without blurring.

Data URLs: embed the image directly into your HTML/CSS.

Base64: an encoding format (not encryption).

Frequently asked questions (FAQs)

Is this the same as a PNG placeholder?

No. SVG stays sharp at any scale and is ideal for simple geometric placeholders.

Should I enable “Use exact size”?

Enable it for fixed pixel output. Disable it when you want responsive scaling.

Can I share the Base64 output?

Yes, but avoid sensitive labels. Base64 can be decoded easily.

How do I download the SVG?

Use the Download button in the calculator, or copy the SVG and save it as a file.

Why is my text cut off?

The placeholder is intentionally simple. Use shorter labels or a smaller font size for tight dimensions.

Limitations / disclaimers

This tool generates intentionally simple SVGs: one rectangle plus one text label.
Long labels may overflow; keep Custom text short for best results.
Base64 is an encoding, not a security feature.

External references / sources

Related Calculators

Chronometer

Use a simple chronometer (stopwatch) to track elapsed time down to milliseconds. Runs locally in your browser.

Try Now

Email normalizer

Normalize email addresses to a standard format for easier comparison. Useful for deduplication and data cleaning. Runs locally in your browser.

Try Now

ETA calculator

Estimate the time needed to consume a total amount at a constant rate, and get an expected end time. Runs locally in your browser.

Try Now

JWT parser

Parse and decode your JSON Web Token (JWT) and display its content. All computation runs locally in your browser.

Try Now

MIME types

Know which file extensions are associated to a MIME type, and which MIME type is associated to a file extension. Includes a full MIME types table.

Try Now

Lorem ipsum generator

Generate random Lorem Ipsum placeholder text with customizable paragraphs, sentences, and word counts. Runs locally in your browser.

Try Now