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

免费在线 SVG 处理一站式工具：svgo 多遍优化压缩、批量颜色替换、导出 PNG / JPG（任意尺寸）、一键转 Vue / React 组件代码，浏览器本地处理零上传
NaNToday Remaining
NaNConverted
NaNTotal Helped
Rating(undefined users)
Click or drop a .svg file here
<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>
Batch color replace (live)
→
Export raster (PNG / JPG)
512 × 512
SVG source
Vue component
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>
User Guide
✨ Features
• svgo multi-pass optimization (preset-default + custom plugins), live size reduction percentage • Batch color replace with live preview • Export PNG / JPG with preset 64-2048 sizes, transparent or white background • One-click convert to Vue component / React JSX
📖 How to Use
Step 1
Paste SVG source or upload .svg file
Step 2
Optional: add color mappings (#old → #new) for batch recoloring
Step 3
Click optimize or export directly to PNG / SVG / Vue / React
Like it? Rate it!

Feedback List