SVG 占位图片生成器

生成一张 SVG 格式的占位图片,可自定义尺寸、颜色和文字——非常适合在拥有真实图片之前搭建界面原型。

示例:

工作原理

在项目的真实图片或照片准备就绪之前,设计师和开发者会使用尺寸正确的占位图来预览最终布局。该工具生成一个体积小、可无损缩放的 SVG,在中央显示尺寸或自定义文字。

为什么占位图使用 SVG 而不是 PNG?

SVG 在任何显示尺寸下都保持清晰,并且体积通常比等效的 PNG 小得多,这加快了原型阶段的加载速度。

我可以将此 SVG 直接嵌入 HTML 吗?

可以,生成的 SVG 代码可以直接粘贴到 <img src="data:image/svg+xml,..."> 标签中,用作 CSS 背景,或下载为独立的 .svg 文件。

100% 本地处理:SVG 完全在您的浏览器中通过 WebAssembly 生成。