SVG 占位图生成器

生成占位图 SVG：宽高、纯色或渐变背景、文字与字号、圆角、边框、内边距与简约/网格/斜纹风格，输出 SVG 源码、data URI 与 img 用法。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

尺寸

宽度高度

使用线性渐变

背景

文字留空时显示「宽 × 高」

字号0 表示按尺寸自动计算文字颜色

圆角边框内边距边框颜色

风格

预览

预览就是最终 SVG，可右键另存为 .svg

SVG 源码

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" role="img" aria-label="600 × 400">
  <rect x="0" y="0" width="600" height="400" rx="0" ry="0" fill="#EEEEEE" />
  <text x="300" y="200" fill="#808080" font-family="system-ui, sans-serif" font-size="80" text-anchor="middle" dominant-baseline="central">600 × 400</text>
</svg>

data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSI2MDAgw5cgNDAwIj4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgcng9IjAiIHJ5PSIwIiBmaWxsPSIjRUVFRUVFIiAvPgogIDx0ZXh0IHg9IjMwMCIgeT0iMjAwIiBmaWxsPSIjODA4MDgwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjgwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCI+NjAwIMOXIDQwMDwvdGV4dD4KPC9zdmc+

HTML 用法

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSI2MDAgw5cgNDAwIj4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgcng9IjAiIHJ5PSIwIiBmaWxsPSIjRUVFRUVFIiAvPgogIDx0ZXh0IHg9IjMwMCIgeT0iMjAwIiBmaWxsPSIjODA4MDgwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjgwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCI+NjAwIMOXIDQwMDwvdGV4dD4KPC9zdmc+" alt="600 × 400" width="600" height="400" />

这个工具能做什么

做原型或骨架屏时先放一张占位图，标上尺寸，等真图到位再替换，不用去找临时素材。
生成统一的图片占位风格：纯色或渐变背景、网格 / 斜纹纹理、圆角边框，整站视觉一致。
把 SVG 转成 data URI 内联进 CSS 或 HTML，省掉一次图片请求，也不依赖任何外部文件。
需要一张能任意缩放且不失真的占位图时用 SVG，比同样尺寸的 PNG 小得多。

示例

输入

宽 600、高 400、背景 #EEEEEE、文字留空、字号 0（自动）、文字颜色 #808080、风格简约

输出

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" role="img" aria-label="600 × 400">
  <rect x="0" y="0" width="600" height="400" rx="0" ry="0" fill="#EEEEEE" />
  <text x="300" y="200" fill="#808080" font-family="system-ui, sans-serif" font-size="80" text-anchor="middle" dominant-baseline="central">600 × 400</text>
</svg>

文字留空时显示「宽 × 高」，也就是 600 × 400；字号自动取内容区短边的 1/5，即 400 ÷ 5 = 80。颜色统一输出大写 hex。

常见问题

字号留 0 是怎么算的？

取内边距之后内容区短边的五分之一，且最小 8。600 × 400 无内边距时是 400 ÷ 5 = 80。想让文字明显更大或更小就手动填字号，填了就不再自动计算。

内边距会改变图片尺寸吗？

不会。内边距只把文字往中间收，画布还是 600 × 400。另外内边距会被限制在短边的一半以内，避免内容区被压成负数（内容区最小 1 × 1）。

渐变和网格 / 斜纹能同时用吗？

可以。渐变时纹理画在渐变上面，两者叠加；如果只想要纯色加纹理，关掉渐变并选网格或斜纹即可，这时纹理用单独的 pattern 铺在色块上。

颜色能写 #RGB 或省略 # 吗？

可以。支持 3、4、6、8 位 hex（3 位会展开成 6 位，例如 #EEE → #EEEEEE），也可以省略 # 直接写 EEEEEE，大小写不限。认不出的值会提示「颜色必须是合法的 HEX 值」。

生成的 SVG 会请求外部资源吗？

不会。SVG 只用内联的 rect、text、pattern 和渐变，字体是 system-ui 系统字体栈，没有任何外链。data URI 版本也不依赖网络，断网可用。

关键词：svgplaceholderimagemockupdata uribase64占位图占位符图片占位原型图骨架图

这个工具能做什么

示例

常见问题

同类工具