SVG在线编辑预览 - 代码编辑·实时渲染·节点属性·SVGO压缩·多格式导出
什么是SVG在线编辑预览？
SVG在线编辑预览是一款集代码编辑、可视化预览、属性面板三位于一体的SVG编辑工具。左侧代码编辑器实时编写SVG代码，右侧即时渲染预览，点击图形节点即可弹出属性面板修改 fill / stroke / transform 等属性，内置 SVGO 压缩优化体积，支持导出 PNG高清图片、JSX和Vue组件模板，全程浏览器本地处理，不上传任何文件。
把代码、可视化预览、属性面板三者绑在同一份SVG上：左边写代码、右边实时渲染、点节点弹属性面板改fill/stroke/transform，再加SVGO压缩和多格式导出，全程浏览器本地处理。
三种修改入口
| 入口 | 适合场景 |
|---|---|
| 代码编辑器 | 整体重构、批量替换、加 <g> 等结构 |
| 点击节点 + 属性面板 | 单个形状改色 / 描边 / 旋转，无须找到对应path |
| SVGO按钮 | 一键剥注释、合并path、裁剪精度，看前后字节差 |
三者状态实时同步：编辑器改代码 → 预览刷新；预览选节点 → 面板回填当前值；面板改属性 → 代码相应位置回写。
导出格式
- SVG / data URL / base64 — 三种文本形式，分别用于文件下载、内联、CSS background-image 等
- PNG ×1 / ×2 / ×3 — 按 viewBox 尺寸栅格化，高清屏选×2、印刷选×3
- JSX / Vue 模板 — 已处理好 camelCase / kebab-case、className / class、style对象化等差异，可直接拷进组件文件
隐私与限制
文件读取、SVG渲染、SVGO压缩、PNG栅格化全部在浏览器本地完成，不会发起网络请求。注意：SVG内若引用了外部图片（<image href="https://...">），渲染时仍会向该地址请求；解析失败时预览区会显示错误提示，按提示回到代码定位即可。
使用场景
设计稿落地前端
从 Figma / Sketch 导出 SVG 后，在工具里调色、压缩再贴进项目，省掉来回切矢量软件的开销。
替换图标主题色
拿到一份现成 icon，点中路径直接改 fill / stroke，所见即所得，不必硬找 path 索引。
上线前体积压缩
SVGO 一键剥掉编辑器残留的注释、ID 和过高小数精度，对照前后字节再决定要不要继续手调。
转 React / Vue 组件
不用脚手架，直接拷一份 JSX 或 Vue 模板，属性大小写、style对象都已就地处理，粘贴即用。
常见问题
SVGO 压缩具体做了什么？
内置 SVGO 默认 preset，包含：删除注释和元数据、合并相邻 path、剥离无用 ID 和默认值、把过高的小数精度（如 12.3456789）裁到合理位数、压缩颜色（#ffffff → #fff）等。压缩后会显示前后字节对比，常见缩减 30%-70%；如果 SVG 本身已经手写得很简洁，压缩比例会很小，属于正常。
转 JSX 和 转 Vue 模板有什么区别？
JSX：所有 kebab-case 属性转成 camelCase（stroke-width → strokeWidth、xlink:href → xlinkHref），class 改为 className，style 转成对象写法。Vue 模板：保留 kebab-case 和 class，style 同样需要对象或字符串。两份模板都已就地处理好大小写和转义，可以直接贴进 React 或 Vue 单文件组件。
为什么 fill 改了没生效？
SVG 节点的属性可能被以下两种情况覆盖：（1）SVG 内部带有 <style> 或 class 选择器，CSS 优先级高于属性 fill="..."；（2）形状本身写的是 fill="currentColor"，最终颜色由外层 CSS 的 color 决定。前者删掉冲突的 <style> 或对应 class；后者把 fill 改成具体颜色即可生效。
PNG ×1 / ×2 / ×3 是什么意思？
把 SVG 按 viewBox 尺寸的 1 / 2 / 3 倍像素栅格化导出。×2 适配高清屏（Retina 等 2x DPR 显示）、×3 适配印刷或大屏播放。如果导出 PNG 模糊，多半是原 SVG viewBox 本身太小（如 0 0 24 24，×1 就只有 24×24 像素），再高倍数也是放大模糊——改大 viewBox 或直接选 ×3 即可。
支持多大的 SVG 文件？
几百 KB 以内的 SVG 渲染、SVGO 压缩、属性编辑都能即时响应；1MB 以上或节点数过万的（典型是完整地图轮廓）SVGO 可能要 1-2 秒。这类 SVG 多半是设计软件未做合并的导出物，建议在源软件里做布尔合并 / 简化再粘进来。
改了节点属性后能撤销吗？
属性面板每次改动都会写回左侧代码编辑器，编辑器自带 Ctrl+Z 撤销和 Ctrl+Shift+Z 重做栈，所有编辑（输入代码、属性面板、SVGO 压缩、格式化）都纳入同一条历史。重做后预览会同步刷新；属性面板若还选着原节点，控件会读到最新值。