SVG 占位图生成器

生成自定义尺寸和颜色的 SVG 占位图，支持下载

0 次浏览最后更新: 2026/4/8

宽度

高度

背景色

文字色

自定义文字（可选）

查看 SVG 代码

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200">
  <rect width="100%" height="100%" fill="#cccccc"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#333333" font-family="sans-serif" font-size="25">300 × 200</text>
</svg>

关联介绍

什么是SVG占位图

SVG占位图用纯SVG代码生成，无需外部请求。可直接作为img src或CSS background-image。小巧、清晰、可定制颜色文字。纯前端实现，加载极快。

什么是内联SVG

内联SVG将SVG代码直接写在HTML中，而非作为外部文件引用。优点：无HTTP请求、可CSS样式控制、可用JavaScript操作DOM。图标系统常用内联SVG方式。