Make Tools
🖼️

SVG Placeholder Generator

Generate SVG placeholder images for your designs. Configure width, height, background color, text, and text color. Copy as SVG code or data URL.

SVG placeholder preview
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200">
  <rect width="100%" height="100%" fill="#cccccc"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="25" fill="#666666">300×200</text>
</svg>

Frequently Asked Questions

How do I use the output?
Copy the SVG code and embed it directly in your HTML, or use the data URL as an img src. Both formats are provided.
Can I customize the text?
Yes, enter custom text or leave it blank to automatically display the dimensions (e.g., 300x200).

Related Tools

🎨Color Converter (HEX, RGB, HSL)🌈CSS Gradient Generator📱QR Code Generator

How to Use

  1. 1 Set the image width and height in pixels.
  2. 2 Choose background and text colors using the color pickers.
  3. 3 Enter custom text or leave blank for automatic dimension display.
  4. 4 Copy as SVG code or as a data URL for use in img src attributes.