SVG 占位图生成器完整使用指南

前端常用的占位图生成器：按宽高、背景色、文字色、文案、字号、描边宽度实时生成 SVG。宽 #width、高 #height 默认思路为 800×600 量级（以输入框当前值为准）；背景/文字支持 color 与 HEX 双向同步（#bgColor/#bgColorHex 等）。文案空时自动用「宽 × 高」；字号空时按 Math.min(w,h)/8 估算。预览 #previewImg，源码 #outputCode 可复制；可下载 SVG 或栅格化为 PNG。文本经 escapeXml 转义，降低破坏 SVG 的风险。适合原型、骨架屏、响应式断点示意，不是完整设计稿编辑器。

生成结构

根元素 svg：xmlns、width、height、viewBox。
rect 铺满画布填背景；若描边宽度 > 0，用文字色 stroke。
text 居中（text-anchor middle + dominant-baseline central），sans-serif 粗体。
update() 监听各输入的 input/change，同步 HEX 与预览/代码。
下载 SVG：Blob + objectURL；PNG：canvas 绘制后再 toDataURL。

边界

单行居中文本，不做自动换行排版引擎。
PNG 导出依赖画布栅格，极大尺寸受内存限制。
颜色为屏幕 sRGB 近似，不做印刷 CMYK。
不是图片压缩/格式转换器；真实照片请用媒体其他工具。

常见问题

文案里的 < 会不会弄坏 SVG？

escapeXml 会转义 <>& 引号等，降低注入式破坏。

字号不填会怎样？

按短边 / 8 自动估算，仍可手填覆盖。

HEX 与取色器不同步？

改 color 会写回 HEX 大写；改 HEX 在 change 时写回 color 再 update。

和 SVG 渲染页区别？

本页生成简单占位图；复杂 SVG 预览/调试请用专门 SVG 渲染工具。

前端接入方式

复制 SVG 源码可内联到组件，或下载 placeholder_宽x高.svg 作静态资源。需要光栅邮件模板时下 PNG。常见尺寸：Open Graph 1200×630、头像 256×256、横幅 1920×400。文案写组件名（如 Hero / Card）比只写像素更利于设计评审。描边可在浅色底上强化边界，避免和页面背景融在一起。

无障碍与对比度

占位图也尽量保证字色与底色对比足够，避免评审时看不清尺寸标注。装饰性占位可在正式图替换后删除 alt 或改为有意义描述。SVG 文本是可选的，真正上线内容请用业务文案组件，不要长期用占位图冒充真实图片 SEO。

导出问题排查

PNG 空白：检查宽高是否为有效正数。SVG 打不开：查看是否未转义的特殊字符（工具已 escape，但勿在生成后手工破坏标签）。极大尺寸浏览器卡顿时分档导出。需要圆角/多行文字/图片填充超出本页能力，请改用设计工具后导出。

设计协作话术

把占位图当「尺寸契约」：开发按 SVG/PNG 的宽高写 CSS，设计稍后替换真实视觉。文案写「首页 Hero 占位」比写「图片」更能减少误解。多断点时为 375/768/1280 各导一张，避免只出桌面尺寸。若占位长期留在生产环境，应换成真实图并补 alt，否则影响无障碍与观感。

参数组合示例

深色主题页面可用深底浅字；浅色后台可用浅灰底深字并加细描边。字号过小会看不清尺寸标注，过大则溢出观感差——可先留空让算法按短边估算，再微调。需要品牌色时可把背景设为品牌主色、文字用对比色，快速做活动页骨架。复杂插画请在设计工具完成，本页保持「纯色底 + 居中字」的克制能力边界。