SVG 优化工具
已消毒处理优化和清理 SVG 文件。
- 图标工作流
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
什么是 SVG？
SVG（可缩放矢量图形）是一种基于 XML 的二维图形矢量图像格式，支持交互性和动画效果。与 JPEG 或 PNG 等位图格式不同，SVG 由数学路径定义，这意味着它们可以缩放到任意大小而不损失质量。这使其非常适合用于网页上的徽标、图标和插图，无论是在移动设备屏幕还是高分辨率桌面显示器上都能保持清晰锐利。
如何使用此工具
将您的 SVG 代码粘贴到左侧的“SVG 输入”文本区域中。点击“预览”查看图形并提取其调色板。使用“优化”或“压缩”按钮清理标记并减小文件体积。您还可以在“颜色”面板中输入新值并点击“应用”来替换特定颜色。点击“复制”或“下载”以保存经过消毒和优化的 SVG。
常见使用场景
图标管理，清理从 Figma 或 Illustrator 等设计工具导出的 SVG。主题定制，快速更改图标集的颜色以匹配您的品牌调色板。安全性，对来自不受信任来源的 SVG 进行消毒处理，以移除潜在的脚本或外部引用。性能优化，压缩 SVG 标记以减小内联图形的体积，提升页面加载速度。
专业提示
使用 currentColor 按钮，将所有显式的填充和描边转换为 currentColor，使您的 SVG 可以通过 CSS 轻松设置样式。在生产环境中使用 SVG 之前，请始终对其进行优化，确保文件尽可能小。在设计工具中创建 SVG 时，请使用“轮廓化描边”和“简化路径”功能，在优化之前降低生成代码的复杂度。