SVG 占位图生成器
快速创建自定义尺寸、颜色与文字的 SVG 占位图。本地生成，隐私安全。
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。
推荐步骤
- 按设计栅格设定宽高（如 1200×630 社媒、375×200 移动横幅）。
- 选对比足够的底色与字色，文案写模块名或尺寸。
- 复制 SVG 内嵌到 HTML，或下载 PNG 给不支持内联 SVG 的位置。
- 需要多尺寸时改参数连续导出，统一命名。
边界
- 单行居中文本，不做自动换行排版引擎。
- 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，否则影响无障碍与观感。
参数组合示例
深色主题页面可用深底浅字；浅色后台可用浅灰底深字并加细描边。字号过小会看不清尺寸标注，过大则溢出观感差——可先留空让算法按短边估算，再微调。需要品牌色时可把背景设为品牌主色、文字用对比色，快速做活动页骨架。复杂插画请在设计工具完成，本页保持「纯色底 + 居中字」的克制能力边界。