🎨
100% 浏览器本地运算 · 矢量资产零上传
SVG 图标代码转换器
将 SVG 源码一键转换为 CSS 数据 URI、React JSX 组件、Vue 3 组件、Base64 编码，并支持 1x/2x/4x 高清 PNG 栅格化导出。
实时渲染预览：
SVG 即时预览
// 请在左侧输入包含 <svg> 标签的代码
位图导出 (Canvas 离屏栅格化)：
三步快速转换与使用 SVG 矢量资源
1
导入或粘贴 SVG 代码
粘贴由 Figma、Illustrator 导出的原始 SVG，实时预览图标并支持切换底色。
2
选择目标前端框架格式
一键转为无需外部引用的 CSS 背景、React 组件（小驼峰命名）或 Vue 3 模板。
3
复制代码或导出高清位图
点击复制代码，或通过离屏 Canvas 按 1x/2x/4x 分辨率无损栅格化为透明 PNG 导出。
常见问题解答
Q: 为什么生成的 CSS 数据 URI 比 Base64 更推荐？
CSS 数据 URI 使用 UTF-8 字符编码与最小化字符转义（如将 # 替换为 %23），体积通常比 Base64 小 20%~30%，且在 Gzip 传输压缩下效率明显更佳。
Q: 转换为 React JSX 时做了哪些属性兼容？
工具会自动将 class 替换为 className、将横杠命名（如 stroke-width、fill-rule）规范化转换为驼峰式命名（strokeWidth、fillRule），开箱即用无警告。