什么是SVG 占位图生成?
SVG 占位图生成器按指定尺寸、文字与配色生成矢量占位图,输出源码与可直接内联的 Data URI,体积仅几百字节且任意缩放不失真。生成在浏览器本地完成,不依赖任何图片服务。
怎么用SVG 占位图生成?
- 1设置宽高,文字留空时会自动显示尺寸。
- 2按需调整背景色与文字色。
- 3复制 SVG 源码或 Data URI 用于开发占位。
常见问题
相比 placeholder 图片服务有什么优势?+
三点:不依赖外部服务(离线可用、不受墙也不会失效)、体积只有几百字节、矢量任意缩放清晰。缺点是不能生成照片类占位图,那种场景仍需真实图片。
Data URI 该怎么用?+
可以直接放进 img 的 src 或 CSS 的 background-image。注意 SVG 的 Data URI 应做 URL 编码而不是 Base64——编码后体积更小,本工具输出的就是编码形式。