SVG 占位图
指定尺寸/颜色/文字即时生成占位 SVG，可预览可下载。
预览(实际渲染尺寸等比缩放)
SVG 源码
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<rect width="100%" height="100%" fill="#1e293b" />
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="126" fill="#f8fafc">1200 × 630</text>
</svg>使用说明
这个工具解决什么问题
改版面要等真实图、写文档要配示意框、发 issue 描述布局要有示意图——用一张纯色「宽 × 高」占位图顶上最省事。这个工具即时生成纯 SVG 占位图:尺寸颜色随填随出,还能改成任意居中文案当横幅用。
核心能力
实时预览:右侧按真实比例渲染,棋盘格底衬出透明区域;颜色用取色器或手填 hex 都行。
三种出口:复制 SVG 源码、下载 .svg 文件、或直接右键存预览图;源码就五行,可读可手改。
尺寸预设:设计稿与社交平台的高频尺寸一键带入,不用记数字。
使用建议
生成 OG 分享图底图(1200×630)后,可以贴进「Meta 标签生成」的 og:image 流程配合用;批量占位需求直接改源码里的 width/height 复制多份;SVG 想转 PNG 可用本站「SVG 预览导出 PNG」。
常见问题
生成的 SVG 能安全放进代码库吗?
能。输出是无脚本的纯 SVG:颜色只接受 hex 与有限命名色,文本做了 XML 转义,没有外链没有事件——内联进 HTML、贴进 README、存成 .svg 文件都安全。
常用尺寸有预设吗?
有:OG 分享图 1200×630、公众号封面 900×383、网页配图 800×400、缩略图 320×180、头像 128×128 一键带入;其他尺寸手填,1–10000 都支持。
字号怎么定?
留 0 自动:按短边 ÷5 计算,夹在 12–160 之间;想精确控制就手填。文字缺省自动填「宽 × 高」,改掉它就是带文案的占位横幅。