SVG占位符生成器
⚙️ 画布设置
{{ bgOpacity }}%
{{ textOpacity }}%
{{ fontSize }}px
{{ patternOpacity }}%
{{ stripeAngle }}°
👁️ 实时预览
{{ safeW }} × {{ safeH }}
📄 SVG 代码
{{ svgCode }}
💡 功能说明
在线 SVG 占位图生成器:在浏览器本地实时生成指定尺寸的 SVG 占位图片,常用于前端开发、原型设计与排版占位,无需上传任何图片,结果完全由本地计算,不上传服务器。
- 自定义画布:支持手动输入宽高(1~8000px),或一键套用 200×200、640×360、1920×1080、1080×1080 正方形、750×1334 移动端竖图、1200×630 分享图等常用比例。
- 背景与文字:背景支持纯色 / 条纹 / 网格,可分别设置颜色与透明度;占位文字可自定义(留空自动显示尺寸),并支持字号、粗细、对齐调整。
- 实时预览:右侧实时渲染效果,并提供完整 SVG 源码,可一键复制或直接下载 .svg 文件。
- 矢量无损:SVG 为矢量格式,放大不失真,体积小,可直接内联到 HTML / CSS 或作为独立文件引用。
- 本地生成:所有 SVG 均由浏览器本地生成,不依赖服务器、不上传任何数据。
⚠️ 注意事项
- SVG 为矢量格式,放大不会失真,非常适合做响应式占位图。
- 透明背景请调低背景透明度(0%),或直接使用纯色背景;条纹 / 网格可单独设置图案颜色与图案透明度。
- 占位文字中的特殊字符(如 & < > ")会自动转义,避免 SVG 解析错误。
- 生成的 SVG 体积通常很小,可直接内联嵌入页面,也可保存为 .svg 文件独立引用。