Placeholder Image Generator

A Placeholder You Can Own as SVG

Wireframes and unfinished interfaces often need an image with exact intrinsic dimensions before final artwork exists. This placeholder image generator creates SVG source containing a solid rectangle and centered label. Nothing is fetched from an image service, so the result is deterministic and easy to place in a repository, fixture, component story, or static mockup.

The controls are direct: Width, Height, Background Color, Text Color, and Label Text. The right side shows editable-input results as read-only SVG Output Code and renders that markup beneath it. Copy copies the SVG source itself, not a URL, HTML <img> element, PNG, or binary file.

Defaults produce a 400 by 300 SVG with a dark #262626 background, white text, and the label 400x300. Updating any field regenerates both source and preview immediately.

What the Generated Markup Contains

The structure is intentionally small:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <rect width="100%" height="100%" fill="#262626"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#ffffff">400x300</text>
</svg>

Explicit width and height give the asset intrinsic dimensions. The matching viewBox establishes coordinates for scaling. The rectangle covers the entire canvas. The text uses percentage coordinates, middle baseline alignment, and centered anchoring. Font size is fixed at 20 SVG units regardless of dimensions.

Because this is vector markup, it remains sharp when scaled. The intrinsic aspect ratio comes from width and height, but a consuming layout can still distort it by forcing unrelated CSS dimensions. Use max-width: 100%; height: auto or an aspect-ratio container when proportional resizing matters.

From Controls to a Project Asset

Set dimensions to the intended slot rather than an arbitrary large size. For a 16:9 thumbnail, try 640 by 360. For a square avatar fixture, use 256 by 256. For an Open Graph mock area, use 1200 by 630. The generator imposes no preset menu, so you enter exact numbers.

Choose CSS-compatible fill strings. Six-digit hex values are the least surprising. Named colors, RGB functions, and some other CSS colors may render because SVG accepts CSS paint syntax, but the text fields do not validate them. A malformed fill can cause the corresponding element to fall back or disappear without a tool-level warning.

Set a short label that identifies purpose, not merely size: Article image, Profile, or Chart preview. If Label Text is completely empty, the generator automatically substitutes widthxheight, using the current numeric values. This fallback is convenient when testing a set of responsive dimensions.

Press Copy, create an .svg asset through your normal project workflow, and paste the copied markup as its contents. The page itself does not offer a download button. Alternatively, inline the markup in HTML or a component where project conventions permit.

Useful Integration Patterns

For static HTML, save the SVG and reference it as an image:

<img src="/placeholders/article-card.svg" alt="" width="640" height="360">

An empty alt is appropriate only when the placeholder is decorative and surrounding content provides meaning. During development, a descriptive alt such as Article image placeholder can make unfinished states obvious to screen-reader testing, but production semantics should reflect the final image’s purpose.

Explicit HTML dimensions help browsers reserve layout space and reduce cumulative layout shift. Match them to the SVG’s aspect ratio. CSS can then reduce the rendered width responsively.

For a React story or visual test, importing a committed SVG is usually more stable than depending on a remote placeholder endpoint. There are no network delays, rate limits, random images, or changed third-party assets. The generated source is also reviewable in version control.

For email, SVG image support varies by client and security policy. A raster PNG fallback may be more dependable. This tool does not rasterize SVG, so conversion requires another application or build step.

Dimensions and Edge Conditions

Width and height are numeric inputs, but there are no min or max attributes and values are converted directly to JavaScript numbers. Zero, negative, decimal, and extremely large values can therefore enter the output. SVG dimensions should normally be positive finite numbers. A zero-sized canvas is invisible, a negative dimension is invalid, and enormous dimensions can make downstream rasterization expensive.

Clearing a number field converts the empty value to zero. Restore a positive number before copying. NaN is unlikely through the browser’s number control but nonstandard input behavior should still be reviewed in generated code.

The preview injects generated markup directly into the page. Label text is inserted into the SVG string without XML escaping. Characters such as <, >, and &, or text resembling markup, can break the SVG structure and may be interpreted as markup. Use plain trusted labels only. Do not paste user-controlled HTML, scripts, or untrusted content into Label Text.

The same escaping concern applies when copying the source into another environment. A label like R&D must be represented as R&D in valid XML. The generator does not perform that conversion for you.

Visual Constraints of This Simple Template

The label is single-line text. It does not wrap, truncate, shrink, or measure itself against the canvas. A long sentence can overflow a narrow image. The fixed 20-unit font can look tiny on a 1600-pixel banner and oversized on a 32-pixel icon. Edit font-size, use a shorter label, or add SVG text layout manually after copying.

There are no controls for font family beyond the hardcoded generic sans-serif, font weight, line height, border, corner radius, icon, pattern, gradient, alignment, or multiple text lines. There is also no checker for color contrast. White on a pale background may be unreadable even though both fills are valid.

SVG text appearance depends on fonts available where it renders. Since sans-serif is generic, exact glyph metrics can differ by operating system. For pixel-identical visual snapshots, outline the text using a design tool or use a controlled embedded font subject to licensing and file-size constraints.

Preflight Before Reuse

Confirm positive dimensions and the intended aspect ratio. Verify both colors in the preview. Keep the label short and XML-safe. Decide whether SVG is supported in the destination. Add suitable alt text at the point of use. If committing an asset, run the project’s SVG sanitizer or formatter where required.

Do not mistake the preview’s available panel size for the exported size: the embedded SVG carries the exact width and height entered. Do not expect Copy to copy the rendered pixels. Do not use untrusted label input. Do not rely on this primitive placeholder as a production loading skeleton; it has no animation or responsive content logic.

For fixture libraries, name the saved file by role and ratio, not only dimensions. That keeps later replacements understandable when several components happen to share one size.

Test the copied SVG outside the preview

The page preview inserts the generated string directly into a container, while a saved SVG is parsed as a standalone XML document. Those environments can expose different mistakes. After copying, open the saved asset directly and check the browser console or an XML validator, especially when labels or color values were edited manually. Also inspect the source for the requested numeric width, height, and matching viewBox; the preview panel may visually constrain a large asset and hide its intrinsic size. If the destination runs an SVG optimizer, compare its result because optimization can alter dimensions, text handling, or accessibility metadata.

Placeholder Image Generator FAQ

What file type does the tool generate?

It generates SVG markup. The output is text describing vector elements, not a PNG or JPEG.

Can I download the image directly?

This component provides Copy for SVG source and a rendered preview. It does not include a download control.

What happens when Label Text is blank?

The SVG label falls back to the current dimensions in widthxheight form.

Can the label span multiple lines?

No automatic wrapping or multiline control is provided. Add <tspan> elements manually after copying if needed.

Why is my color not visible?

Check that the fill text is valid CSS/SVG color syntax and that foreground and background are not identical. There is no inline validation message.

Is custom label text escaped?

No. XML-significant characters can break the markup, and untrusted text is unsafe. Use plain trusted text or escape it manually.

Will the placeholder preserve its aspect ratio?

The SVG has a matching viewBox, width, and height. A consuming layout can still distort it if CSS forces both dimensions to a different ratio.

Does generation require an external service?

No image API is involved. The component builds and previews the SVG string in the browser.