占位图生成器就是给还没做好图的地方先放一张「假图」，标好尺寸和文字，让页面或设计稿看起来是完整的。它解决的是开发时图片还没到位、排版会塌的问题。比如你在写一个电商列表页，商品图接口还没联调，直接写 <img src=""> 会让卡片高度变成 0，这时生成一张 400×300、灰底、写着「商品图 400×300」的 SVG 占位图，布局立刻稳住。SVG 是矢量格式，放大到 2 倍、3 倍都不糊，文件通常只有几百字节，比 PNG 小得多，也不会像外链占位服务那样因为网络问题加载失败。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 生成耗时 | 填参数到出图约 2 秒 | 用 PS 新建画布、打字、导出，约 1-2 分钟 |
| 文件体积 | 800×450 的 SVG 约 0.6KB | 同尺寸 PNG 约 8-15KB，是 SVG 的 15 倍以上 |
| 放大清晰度 | 矢量，放大 10 倍边缘依然锐利 | 位图放大 2 倍就开始出现锯齿和模糊 |
| 修改成本 | 改数字重新生成，5 秒内完成 | 回到源文件改文字再导出，约 30 秒 |
| 离线可用 | 纯前端计算，断网可生成 | 依赖在线占位服务时，断网直接裂图 |
可以。把生成的 SVG 存成文件后写 <img src="placeholder.svg" width="800" height="450">，浏览器会按矢量渲染。也可以把 SVG 源码转成 Data URI 塞进 src，但注意 Data URI 里 # 要写成 %23，否则颜色会被截断。单张 800×450 的占位图源码通常不到 1KB。
SVG 里的 text 不会自动换行，超出画布就看不见了。假设画布宽 200px、字号 36px，一行大约只能放 5 个汉字。文字太长时要么把字号降到 16px 以下，要么把画布宽度加到 600px 以上，或者手动在文字里加换行拆成多个 text 元素。
SVG 本身是矢量，理论上可以写到 100000×100000，但浏览器渲染和内存会吃不消。实际用 1×1 到 4000×4000 都没问题，超过 4000px 建议只当设计标注用，不要真的塞进页面。另外宽高必须是正整数，写 0 或负数会生成空白。
不会。整个生成过程在浏览器里用 JavaScript 拼 SVG 字符串，数据不出本机，断网也能用。你可以打开开发者工具的 Network 面板，点生成按钮不会产生任何请求。关掉页面后输入内容也不会被保存，刷新就没了。
常用做法是背景 #CCCCCC、文字 #666666，对比度约 3.5:1，够看清但不抢眼。如果占位图要放在深色页面上，可以反过来用 #333333 底配 #999999 字。避免纯黑配纯白，对比度 21:1 太刺眼，反而让人误以为是正式内容。
适用于网页开发、UI 设计稿、文档排版等需要临时占位的场景。SVG 尺寸按像素 1:1 对应 CSS px，不涉及 DPI 换算；若用于印刷需自行按 300DPI 放大尺寸。文字仅支持单行，不支持自动换行和自定义字体文件。所有计算和字符串拼接都在浏览器本地完成，不上传任何数据，关闭页面即清空。