SVG 占位图
免费在线SVG占位符生成器，无需安装。可自定义大小和颜色。
关于 SVG 占位符
一款适用于网页开发和设计原型制作的轻量级 SVG占位符图像生成工具。可以生成具有可调节尺寸、背景颜色、文本颜色以及可显示文字的可定制占位符图像。输出结果仅为纯 SVG 标记格式，可以作为数据 URI 或内嵌 SVG 使用——无需外部图像文件。
如何使用
1. 使用“宽度”和“高度”输入项来设置图片的尺寸（默认值为 640×360）。 2. 通过颜色选择器或十六进制码输入项来选择背景颜色。 3. 选择用于尺寸标签的文本颜色。 4. 可以选择是否自定义显示文本（默认显示内容为 “WIDTH × HEIGHT”）。 5. 点击“复制为 SVG”以复制 SVG 格式的文件；点击“复制为 URI”则可以将文件复制为 base64 编码后的 data:image/svg+xml 格式的 URI 格式。 6. 将复制后的文件内容粘贴到 HTML 中的 img src 属性或 CSS 中的 background 属性中。
不同的输出格式
• SVG标记：原始的<svg>...</svg>代码，可以直接嵌入到HTML中。 • 数据URI：经过base64编码后的data:image/svg+xml字符串，适用于img src属性、CSS背景图像，或任何可以接受URL的地方。 这两种格式都是自包含的，无需外部依赖或网络请求。
使用案例
• 网页开发：在布局与设计阶段使用占位图像。 • 响应式设计测试：针对特定宽高比生成图像。 • 原型图设计：用于线框图的快速占位图形。 • 电子邮件模板：无需外部托管服务的轻量级占位图像。 • 文档制作：带有可自定义标签的示例图像。
▶我可以导出哪些图像格式？
该工具会生成 SVG 标记以及数据 URI。SVG 是基于矢量的格式，可以在任何分辨率下完美缩放。数据 URI 格式可以将 SVG 直接嵌入到您的 HTML 或 CSS 中，无需单独的文件。
▶我可以自定义字体或文本样式吗？
当前版本使用 Arial 字体，文本大小根据图片的尺寸自动调整。文本大小的计算方法是较小尺寸尺寸的 1/8，最小值为 10 像素。
▶我的数据会被发送到服务器上吗？
不。所有的 SVG 生成工作都在用户的浏览器中本地进行。用户的输入永远不会离开设备。
▶我可以将其用于移动设备吗？
是的，该工具具有完全的响应式设计，可以在所有设备上使用，包括手机和平板电脑。
▶我如何在代码中使用生成的占位符？
对于 SVG 标记，可以直接将其粘贴到 HTML 中。对于数据 URI，可以在 img 标签的 src 属性中使用它（例如：<img src='data:image/svg+xml;base64,...'>），或者在 CSS 中使用它（例如：background-image: url(data:image/svg+xml;base64,...)）。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。