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