📖 在线SVG编辑器/压缩器：从矢量图到React组件
SVG (Scalable Vector Graphics) 是现代Web开发中图标、Logo、数据可视化、插画的首选格式。ng.cc推出的在线SVG编辑器/压缩器提供完整工具箱：代码编辑、实时预览、智能压缩（6项优化）、格式化/压缩一行、一键生成React/React Native组件（JSX/TSX）。所有处理均在浏览器本地完成，SVG文件不上传服务器，保护设计隐私。
⚡ 6项智能压缩
移除注释/空白/元数据、数值精度优化、移除无用属性、转换基本形状。平均压缩率40%+。
⚛️ React组件转换
一键生成JSX/TSX组件，支持React Native SVG语法。自动提取viewBox，支持props透传。
🎯 实时预览/分析
编辑SVG代码右侧实时渲染，自动统计原始/压缩后大小、压缩率、元素数量。
📦 6个示例模板
品牌Logo、用户图标、柱状图、社交媒体、渐变色、组合图形。快速上手体验。
🎯 SVG优化最佳实践
- 移除编辑器元数据：Illustrator、Sketch、Inkscape等工具会添加大量无用注释和命名空间，可安全移除。
- 简化数值精度：将小数点后3位以上数字保留2位，文件体积可减少10%-20%。
- 转换基本形状：将<rect>、<circle>等保留为独立标签，避免复杂<path>。
- 移除默认属性：如fill="black"、stroke="none"等默认值可删除。
💡 React SVG组件设计模式
🔹 属性透传
将width、height、fill、className等作为props传入，支持...props展开，便于外部样式覆盖。
🔹 默认尺寸
从原始SVG中提取width/height作为默认值，外部可覆盖。本工具自动识别viewBox。
🔹 TypeScript支持
TSX模式自动生成完整接口定义，包含width、height、fill、className、style等类型。
🔹 React Native适配
将<path>转换为<Path>，使用react-native-svg库语法，跨平台兼容。
❓ 常见问题解答
❓ Q1：SVG压缩会损失画质吗？
不会。本工具进行的压缩是无损优化：移除注释、空白、元数据、简化数值精度（2位小数对矢量图形足够），不会改变图形形状、颜色、位置。您可以通过实时预览直观对比。
❓ Q2：生成的React组件可以直接使用吗？
完全可以。JSX模式生成标准函数组件，可直接复制到React项目中；TSX模式包含完整类型定义；React Native模式需安装react-native-svg库。代码已优化，无额外依赖。
❓ Q3：支持多色SVG吗？
支持。工具会保留SVG中所有颜色定义。您也可以在生成的React组件中通过fill="currentColor"实现跟随文本颜色，或通过props传入自定义颜色。本工具默认使用原始颜色，您可手动修改生成的JSX。
❓ Q4：与SVG优化工具SVGO相比如何？
本工具实现了SVGO核心优化功能的子集：移除注释、移除元数据、精度优化、移除无用属性。虽然不如SVGO全面（如合并路径、排序属性等），但完全本地运行、无需安装、即开即用，适合快速优化单个SVG文件。
❓ Q5：我的SVG数据会上传到服务器吗？
绝对不会。 本工具是纯静态页面，所有SVG编辑、压缩、转换代码均在您的浏览器JavaScript引擎中执行。您可以断开网络测试，工具依然完整工作。您的SVG文件、设计稿完全不经过任何服务器，适合处理商业项目、未发布的设计资产。
❓ Q6：如何将PNG/JPG转换为SVG？
本工具是SVG编辑器，不包含位图矢量化功能。PNG/JPG转SVG需使用专业矢量工具（如Adobe Illustrator、Inkscape）的「图像描摹」功能。您可以将描摹后的SVG代码粘贴到本工具进行压缩和组件转换。
🔗 关联工具推荐
本工具是ng.cc开发者工具箱设计工具系列的一员，您可能还需要：
⚡ 所有处理均在浏览器本地完成，您的SVG文件不会上传至任何服务器。