SVG 注释与空白压缩 / Data URI 在线工具

在浏览器本地移除 SVG 注释、折叠标签间与连续空白，或把 SVG 文本编码成 image/svg+xml Data URI。页面不提供预览、尺寸分析或 SVG 安全净化。

功能特点

  • 移除 SVG 注释并折叠标签间空白
  • 压缩连续空白，不解析或修改 viewBox、尺寸、路径和颜色语义
  • 把原始或压缩后的 SVG 文本编码成 image/svg+xml Data URI

使用方法

  1. 粘贴 SVG 文本，并确认其中不含不可信脚本、事件属性或外链
  2. 选择注释与空白压缩，或直接生成 percent-encoded Data URI
  3. 复制结果后在目标浏览器、设计工具和 CSP 环境验证渲染与安全性

示例输入

  • 图标优化

    <svg width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="..."/></svg>

    适合移除注释、折叠空白，再按需生成可嵌入的 Data URI。

  • CSS 背景图

    <svg viewBox="0 0 16 16"><path d="M2 8h12"/></svg>

    适合转换为 url("data:image/svg+xml,...")，渲染结果需到目标浏览器验证。

  • 注释与空白清理

    <svg> <!-- remove --> <path d="M0 0" /> </svg>

    优化只移除 XML 注释、折叠标签间空白和多余空格，不解析 viewBox、路径或安全属性。

  • Data URI 不做优化

    <svg></svg>

    转 Data URI 只做 encodeURIComponent，不会先调用 SVG 优化；需要压缩时应先执行优化再转换。

示例输出

  • 图标优化

    <svg viewBox="0 0 24 24"><path fill="#000" d="..."/></svg>

  • CSS 背景图

    data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M2%208h12%22%2F%3E%3C%2Fsvg%3E

  • 注释与空白清理

    <svg><path d="M0 0"/></svg>

  • Data URI 不做优化

    data:image/svg+xml,%3Csvg%3E%3C%2Fsvg%3E

常见错误

  • 把文本压缩误当成图形优化；当前逻辑不理解路径、颜色、尺寸或视觉效果。
  • 直接处理含脚本、事件属性或外链的 SVG 不能消除安全风险，应先确认来源可信。
  • 生成 Data URI 后未在实际 CSP 和引用方式中验证，可能出现加载或转义问题。

适用场景

  • SVG 注释清理
  • 标签间空白压缩
  • SVG 转 Data URI
  • 前端小资源内联

实操检查

  • 先优化文本，再生成资源地址

    注释与空白压缩和 Data URI 生成是两个独立操作；Data URI 路径只做 encodeURIComponent，不会先解析或优化 viewBox、路径和颜色。

  • 编码完成不等于渲染或安全通过

    复制结果后应在目标浏览器和 CSP 环境检查 MIME、尺寸和实际显示，并另行确认没有脚本、事件属性、外链或 foreignObject；当前工具不提供这些结论。

页面专属核验

使用前与操作中

  • 先区分“优化 SVG”和“转 Data URI”两个按钮：优化只用正则移除注释、折叠空白和压缩 `/>`，转 URI 则直接对当前输入调用 encodeURIComponent。
  • 不要把当前工具当作 SVG XML 解析器或安全净化器；它不检查根元素、命名空间、脚本、外部资源、属性语义或渲染安全，原文应保留备份。
  • 将 Data URI 放入 CSS、HTML 属性或请求参数前，按目标上下文验证 MIME、引号、编码和浏览器渲染；优化结果与 Data URI 结果要分别测试。

结果出来后

  • 输入带 `<!-- remove -->`、标签间换行和多余空格的有效 SVG 后，优化结果是否移除注释、折叠标签间空白，并保持 `<svg` 与图形内容？
  • 输入 `<svg></svg>` 点击 Data URI 后，是否得到 `data:image/svg+xml,%3Csvg%3E%3C%2Fsvg%3E`，且没有把 MIME、百分号编码误当作压缩或净化？
  • 输入结构不完整或包含脚本/外部引用时，页面是否明确仍只是字符串处理，并在目标浏览器、CSP 和上传管线中另行验证安全与显示效果？

相关工具

工具边界

  • 当前页面不提供 SVG 预览，也不检查 viewBox、宽高、路径、颜色或渲染正确性。
  • 注释和空白压缩不是 SVG 安全净化，不会移除脚本、事件属性、外链或 foreignObject。
  • Data URI 适合小图标和临时资源，大文件会增加 HTML/CSS 体积并影响缓存复用。

与相似工具的区别

  • Data URI 生成 / 解析：SVG 工具额外提供注释与空白压缩，再编码为 SVG Data URI；Data URI 工具负责封装或拆解任意资源。

安全与兼容性

  • 注释与空白压缩、Data URI 编码在浏览器本地完成，但都不会净化脚本、事件属性、外链或 foreignObject。
  • 用于 CSS 或 img 前应在目标浏览器验证 image/svg+xml MIME、CSP 和实际渲染；当前页面不提供预览或兼容性结论。

下一步排查

  1. 先确认 SVG 来源可信，再选择注释与空白压缩或 Data URI 编码。
  2. 需要检查 viewBox、尺寸或视觉结果时，转到浏览器、设计工具或专门的 SVG 检查器验证。
  3. 正式发布前使用净化流程清理危险内容，并在实际 MIME、CSP 和缓存策略下测试。

常见问题

页面会修改 viewBox、宽高或路径吗？

不会主动解析这些属性；当前逻辑只移除注释并压缩空白。仍应对比文本，并在目标浏览器或设计工具检查结果。

生成 Data URI 就代表 SVG 安全吗？

不代表。编码不会移除脚本、事件属性、外链或 foreignObject，来源不可信时需先用专门流程净化。