SVG 优化器
优化 SVG，清理元数据和脚本，压缩文件并转换为 React JSX。
SVG 输入
将 SVG 文件拖放到此处
选项
输出
Input: 0 bytes
Output: 0 bytes
SVG 背景 CSS
预览
JSX 输出没有可用的预览
为什么使用在线 SVG 优化器？
可扩展矢量图形 (SVG) 对于现代网页设计至关重要，可以在任何分辨率下提供清晰的视觉效果。然而，从 Illustrator、Figma 或 Sketch 等工具导出的原始 SVG 文件通常包含不必要的元数据、注释和隐藏属性，从而导致文件大小膨胀。我们的 SVG Pro 工具可帮助您 清理、缩小和优化 SVG 实现更快的页面加载和更干净的代码库。
面向开发人员的功能
- SVG 到 JSX 的转换： 自动将标准 SVG 属性（如
class、stroke-width）转换为 React 兼容的 JSX（className、strokeWidth）。非常适合 Next.js 和 React 应用程序。 - 安全消毒： 去除
<script>标签和内联事件处理程序（onclick等）等恶意代码，以防止使用用户上传的 SVG 时发生 XSS 攻击。 - CSS 背景生成器： 立即生成优化的数据 URI 片段以使用 SVG 作为 CSS 背景图像。
优化技术
- 删除元数据： 删除浏览器不需要的 XML 标头、文档类型和编辑器元数据（Adobe Illustrator、Inkscape）。
- 清洁属性： 删除显式默认值和无用 ID 以减小文件大小。
- 缩小结构： 安全地删除注释并折叠空格。
常见问题解答
如何将 SVG 转换为 React 组件？
只需上传 SVG 或粘贴代码，然后选中 “转换为 JSX” 选项即可。该工具将使用驼峰命名法属性，并将 class 替换为 className，为您提供一个可直接粘贴的 React 组件。
这个 SVG 优化器使用安全吗？
是的。 SVG Pro 完全在您的浏览器中运行。您的文件永远不会上传到任何服务器，确保您的专有资产和数据保持私密和安全。
为什么我的 SVG 文件这么大？
SVG 文件通常包含设计软件留下的“垃圾”，例如隐藏层、特定于编辑器的元数据以及路径数据中过高的精度。验证和缩小 SVG 通常可以将文件大小减少 30-70%，而不会造成视觉损失。