SVG 占位图生成

生成 SVG 占位图与 Data URI

浏览器内运算SVG Placeholder Generator工具型04生成器

什么是SVG 占位图生成

SVG 占位图生成器按指定尺寸、文字与配色生成矢量占位图,输出源码与可直接内联的 Data URI,体积仅几百字节且任意缩放不失真。生成在浏览器本地完成,不依赖任何图片服务。

怎么用SVG 占位图生成

  1. 1设置宽高,文字留空时会自动显示尺寸。
  2. 2按需调整背景色与文字色。
  3. 3复制 SVG 源码或 Data URI 用于开发占位。

常见问题

相比 placeholder 图片服务有什么优势?+

三点:不依赖外部服务(离线可用、不受墙也不会失效)、体积只有几百字节、矢量任意缩放清晰。缺点是不能生成照片类占位图,那种场景仍需真实图片。

Data URI 该怎么用?+

可以直接放进 img 的 src 或 CSS 的 background-image。注意 SVG 的 Data URI 应做 URL 编码而不是 Base64——编码后体积更小,本工具输出的就是编码形式。

相关工具

全部工具