image

SVG 优化器 / Data URI 生成器

优化 SVG、检测风险标记，并复制 URL-encoded / Base64 Data URI 与 CSS background 片段，浏览器本地处理。

SVG 输入

SVG 文本在浏览器本地处理，不会上传到 DevCove 服务器。

本工具不会在页面中渲染或执行 SVG。上线前请结合风险警告审查优化结果。

优化模式

尽可能保留 viewBox、title、desc、role 与 aria-* 属性。

粘贴或上传 SVG 文本以开始。

关于此工具

DevCove SVG 优化器帮助前端开发者在不上传源文件的情况下压缩 SVG。粘贴或上传 SVG 文本，进行安全预检，以 Safe 或 Aggressive 模式优化，并复制 Data URI 或 CSS 片段用于内联图标与背景。页面中不会执行或渲染 SVG。

如何使用

需要更小的 SVG 与可复制的 Data URI 时，可按以下步骤使用：

  1. 粘贴 SVG 标记或上传 .svg 文件。
  2. 查看安全预检中的脚本、事件属性或外链引用。
  3. 默认选 Safe，需要更小体积时可选 Aggressive。
  4. 点击优化 SVG 并对比优化前后体积。
  5. 复制优化后的 SVG、URL-encoded Data URI、CSS background 或 Base64 Data URI。

功能特点

面向前端 SVG 资产工作流：

  • Safe / Aggressive 两套 SVGO 预设，并移除 script 元素。
  • 预检脚本、事件处理器与外部 URL。
  • 输出优化 SVG 与 URL-encoded / Base64 Data URI。
  • CSS background-image 片段，便于内联图标背景。
  • 优化前后字节体积对比。
  • 100% 本地文本处理，不执行 SVG。

常见问题

SVG 会上传吗？

不会。SVG 仅在浏览器内优化。

为什么不预览 SVG？

为避免执行不可信标记，本工具仅按文本处理，不在页面中渲染。

Safe 与 Aggressive 有何区别？

Safe 保留 viewBox、title、desc 等可访问性属性；Aggressive 压缩更强，可能移除它们。

该用哪种 Data URI？

SVG 文本通常 URL-encoded 更小；若流水线要求可用 Base64。

有风险的 SVG 仍会优化吗？

会，但预检会列出源文中的风险模式，上线前请自行审查。

与图片压缩工具有何不同？

图片压缩处理位图；本工具优化 SVG 标记并生成 Data URI 片段。