SVG 使用指南

第一步：优化 SVG 文件

在将 SVG 用于网页前，建议先优化以减小文件大小。访问 HeronTool 的 SVG 优化器，上传或粘贴 SVG 代码。工具会自动移除冗余元数据、注释和不可见元素，并压缩路径数据。优化后，你可以下载精简版本，或直接复制优化结果。

第二步：将 SVG 转换为 CSS

优化完成后，使用 HeronTool 的 SVG 转 CSS 工具。将优化后的 SVG 代码粘贴到输入框，点击“转换”按钮。工具会生成对应的 CSS 代码，通常以 background-image 或 mask 属性的形式，将 SVG 作为数据 URI 嵌入。你可以选择输出格式（如 base64 或 URL 编码），并预览效果。

第三步：在项目中使用生成的 CSS

将生成的 CSS 规则复制到你的样式表中。例如，你可以为某个元素设置 background-image: url("data:image/svg+xml,...")。这样无需额外请求 SVG 文件，减少 HTTP 请求，提升加载速度。同时，由于 SVG 被内联，你可以通过 CSS 变量或媒体查询轻松控制其样式。

常见问题 (FAQ)

Q: 转换后 CSS 中的 SVG 无法显示？ 请检查 SVG 代码是否包含 XML 声明（如 ），如有，请移除。同时确保 SVG 中没有未转义的字符（如 # 需编码为 %23）。

Q: 如何保持 SVG 的响应式？ 在 SVG 根元素上设置 viewBox 属性，并在 CSS 中设置 width: 100%; height: auto;。HeronTool 的转换工具会保留 viewBox。

Q: 能否批量转换多个 SVG？ 目前 HeronTool 的 SVG 转 CSS 工具支持单文件转换，但你可以使用优化器批量处理后再逐个转换。