SVG 占位图生成器

← ToolBox / SVG 占位图生成器
📖 查看「SVG 占位图生成：前端原型与邮件都适用使用指南」

🖼️ SVG Placeholder Image Generator

Generate SVG placeholder images in your browser — sized, labeled boxes for layouts.

📐 工作原理与说明
字号 = 限制在 12–48px 之间取 min(宽, 高) ÷ 8 的整数；宽高各自限制在 10–2000px；生成的 SVG 按 viewBox 等比居中放置文本
生成轻量可内联的 SVG 占位图。
  • 参数：宽高、背景色、文字内容、字体大小与文字颜色均可自定义。
  • 优势：SVG 为矢量格式，任意缩放不失真，体积极小且可直接内联进 HTML/CSS。
  • 用途：图片懒加载占位、设计稿填充、防止图片加载导致布局跳动（CLS）。
  • 建议：同时声明 width/height 或 aspect-ratio，为图片预留空间。

📚 深度解析：SVG 占位图生成器

💡 常见使用场景

生成
`600x400` 灰底居中文字“Placeholder”的 SVG。

❓ 常见问题（FAQ）

SVG 占位优势？
矢量、体积小、可改色。
为什么不用真实图片做占位？
占位图的目的是验证布局而非内容：SVG 可直接内联（零请求）、任意缩放不失真、可写提示文字标明尺寸，体积通常不到 1 KB。用真实图片反而会掩盖「图片加载失败时布局是否稳定」这类问题，也拖慢原型加载。

Formula & Standard References

Item Formula / Note Source / Standard
Canvas and coordinates viewBox defines the user coordinate system W3C SVG 1.1
Vector benefit scales without quality loss, ideal for icons and placeholders W3C SVG 1.1
Text metrics center text with text-anchor and dominant-baseline W3C SVG 1.1

🔗 相关工具

📄 .properties 解析器Java .properties 文件解析：支持 key=value、key:value、行内注释… 💻 AST抽象语法树查看器AST 抽象语法树查看器 🔤 Base64 文件转换文件与 Base64 互转：图片/文档/压缩包转 Base64 字符串（含 data URI 前缀… ✨ Basic Auth 生成器一键生成 HTTP Basic 认证所需的 Authorization 头与 URL 形式：用户名… #️⃣ Bcrypt 哈希/校验Bcrypt 在线哈希与校验工具，前端本地对密码执行 Bcrypt 加盐哈希（可设成本因子），或校…

🔗 相关工具

✨ .gitignore 生成器.gitignore 生成器是一款免费的在线IT 开发工具，生成后保存为项目根目录的 .gitign 📄 .properties 解析器Java .properties 文件解析：支持 key=value、key:value、行内注释、 ✨ API 签名生成器生成带时间戳与随机数的接口签名 ✨ ASCII 目录树生成器把路径列表一键生成 ASCII 目录树（├── └── │ 风格），支持文件/文件夹标记，复制进 R 💻 AST抽象语法树查看器在线 AST 查看器，用 acorn 解析 JavaScript 源码为抽象语法树并可视化展开节点， 🔤 Base64 文件转换文件与 Base64 互转：图片/文档/压缩包转 Base64 字符串（含 data URI 前缀选