点击或拖动 .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
喜欢就打个分吧!

反馈列表