SVG Placeholder Generator

Generate custom SVG placeholder images with your own dimensions, colors, and text. Export as raw SVG, Base64, PNG or SVG.

Design Config

Width (px)

Height (px)

Custom Text

Font Size (px)

Include exact width/height attributes

Background Color

Text Color

Preview

Raw SVG Code

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

Base64 DataURL

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzUwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM1MCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIzNTAiIGZpbGw9IiNDQ0NDQ0MiIC8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzJweCIgZmlsbD0iIzMzMzMzMyI+NjAwIHggMzUwPC90ZXh0Pgo8L3N2Zz4=

Developer Tool Guide

About SVG Placeholder

Niuma Tools Dedicated to improving the daily efficiency of professionals and frontend developers. This is a ready-to-use, secure, and highly efficient productivity tool. Create custom SVG placeholders with custom dimensions, background/text colors, and custom text labels. Export as SVG, PNG, or Base64 DataURL.

Usage Notice & Privacy Guarantee

We have always adhered to the core development philosophy of "Offline First, Security First". Many features on this page are implemented through the local computing APIs of modern browsers, effectively solving the unpredictable privacy leakage risks faced when sending files and data to other websites. You can save it to your bookmarks as a solid and reliable part of your daily development, testing, or content creation workflow.

Related keywords: SVG placeholder / placeholder generator / custom image placeholder / layout placeholder