占位图生成
按尺寸生成一张带文字的占位图，PNG、JPEG、WebP、SVG 都能出，也能直接拿 SVG 的 data URI 去占位置。
位图格式（PNG、JPEG、WebP）是拿 SVG 现渲染出来的，所以预览、下载和粘贴代码看到的完全一致；SVG 则是直接输出矢量源码，放大不掉色。
预览
800 × 600 · 0 B
正在准备预览。
这个尺寸就是 SVGA（800 × 600）：4:3
SVG 片段
data URIdata:image/svg+xml;charset=utf-8,…（950 字符）
HTML 片段<img src="data:image/svg+xml…">
data URI 里已经写死了宽高属性，直接放进 img 的 src 就能占位，不会因为图片没加载而让布局抖动。
占位图的正确用法
开发阶段布局还没定，接口也还没给图，用占位图先把位置占住，比留一个空 div 靠谱得多：空 div 高度是 0，图片一上来整个页面会往下跳。给占位图写上真实的宽高，浏览器在图片真正加载前就按这个尺寸预留位置，页面就不会抖。
data URI 是把图片内容直接写进 HTML 或 CSS 的方式，优点是没有额外请求、随页面一起到达，缺点是体积会随 base64 或百分号编码膨胀，而且不能被单独缓存。小图标、骨架屏的占位块适合这么做；大图还是老老实实用文件地址。这里 SVG 用的是百分号编码而不是 base64，因为文本形式可读、体积也更小。
骨架屏场景更适合用 SVG 而不是位图：SVG 是矢量的，同一个文件在 1 倍屏和 3 倍屏上都清晰，字节数还常常比同尺寸的 PNG 小一个量级；改颜色只要改一个属性，不用重新导出图片。
最后提醒一句，占位图是给开发看的，别让它上生产环境。上线前要么换成真实图片，要么至少把「800 × 600」这种文字改成产品里合理的默认图，否则用户看到的就是一张带对角线的大灰块。