SVG 工具箱（svgo 优化 / 改色 / 转 PNG / Vue React 组件）

免费在线 SVG 处理一站式工具：svgo 多遍优化压缩、批量颜色替换、导出 PNG / JPG（任意尺寸）、一键转 Vue / React 组件代码，浏览器本地处理零上传
NaN今日剩余数
NaN已转换数
NaN共帮助人次
总评分(undefined人)
点击或拖动 .svg 文件到此
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <!-- 演示：粘贴你的 SVG 替换这段 --> <path fill="#3b82f6" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> </svg>
颜色批量替换（实时生效）
→
导出位图（PNG / JPG）
512 × 512
SVG 源码
Vue 组件
React JSX
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <!-- 演示：粘贴你的 SVG 替换这段 --> <path fill="#ea580c" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> </svg>
使用指南
✨ 功能特点
• svgo 多遍优化（preset-default + 自定义插件），实时显示节省百分比 • 颜色批量替换，实时预览不需点按钮 • 导出 PNG / JPG，预设 64-2048 多档尺寸 + 透明 / 白底切换 • 一键转 Vue 组件 / React JSX 模板
📖 使用步骤
步骤 1
粘贴 SVG 源码或上传 .svg 文件
步骤 2
可选：填颜色映射（#旧 → #新）批量改色
步骤 3
点 svgo 优化压缩，或直接导出 PNG / SVG / Vue / React
喜欢就打个分吧!

反馈列表