Placeholder SVG at the required dimensions

Designers and developers can create a placeholder when a layout needs an SVG with dimensions chosen for the intended space.

Generate an SVG at the required dimensions and obtain a placeholder image that matches the exact space you need to represent in a layout.

How to use

Enter the width you need on the first line, then the height on the second.
Type an optional text on the third line if you want it shown inside the generated image.
Run the generation to produce the SVG at the requested size.
Copy the code from the result area and paste it into your page or design file.
Change the values and generate again as many times as you need.

Example

The sample asks for a width of 800, a height of 450 and the text Banner. After generating, check that the output really is SVG markup and that the dimensions match what you asked for, since those values decide how much room the placeholder takes in your layout.

Input

800
450
Banner

Limits and formats

The output is a vector drawing, not a photograph, so it belongs in mockups rather than final artwork.
Everything comes from what you enter: the size and, optionally, one piece of text.
Keep width and height as positive whole numbers.
Look at how it renders in your browser before adding it to a live page.

Where processing happens

The vector image is described and assembled by the page inside your browser, using the size and text you provide. No file is uploaded and nothing is transmitted during generation. The markup stays on screen until you clear it or leave the page.

Frequently asked questions

What is a placeholder image actually used for?

It stands in for artwork that is not ready yet. You can see whether a layout holds together and whether the planned proportions look right, without waiting for the final picture from a designer or photographer.

What does the generated SVG contain?

It describes a frame at the size you asked for, plus the text you typed if you typed one. Nothing else is added, so you always know what the code holds before you paste it somewhere.

Should I keep it on a live website?

Better to treat it as a mockup tool, since it signals that a visual is still missing. Swap it for the final image before publishing, otherwise visitors will see the placeholder instead of a picture.