SVG 占位符生成器

SVG Placeholder Generator

Create lightweight SVG placeholder images with custom text and colors.

Width (px) Height (px)

Background color

Text color

Pick a color, or type any valid CSS value like transparent or rgba().

Label text

Font size (px)

Live preview (Scaled to fit)

SVG markup

Copy

Data URL (Base64)

Copy

需要一个轻量级占位图用于模型、线框图或加载状态吗？SVG占位图生成器可即时创建简洁、分辨率无关的SVG图像，并支持自定义尺寸、颜色和文本。

此工具的功能

• 生成指定尺寸的SVG占位图（例如800×600），支持自定义背景和文字颜色。
• 实时预览显示，便于在使用前确认设计效果。
• 同时输出原始SVG代码和数据URL（包括Base64格式），可直接用于<img>标签、CSS背景或设计工具。
• 将尺寸和字号限制在实用范围内（宽度/高度约16–4000像素，字号约6–120像素），以确保可读性和性能。

使用方法

1. 设置以像素为单位的宽度和高度。
2. 选择背景颜色、文字颜色以及可选的标签文字（例如：800×600 或 Hero Image）。
3. 预览生成的图像。
4. 将SVG标记或生成的数据URL复制到您的项目中。

由于图像是纯SVG文本，因此体积极小，在任何分辨率下都清晰锐利，是快速加载占位符的理想选择。