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