大家好，我是鹿梦。
先上链接：
项目官网：svgdo.com
GitHub：github.com/humenglover…
做 PictKit 的时候，里面有一个 SVG 编辑器的小功能。当时只是顺手放进去的，没想到用的人还挺多。
但 PictKit 毕竟是个工具箱，SVG 编辑嵌在里面施展不开。很多人跟我说想要一个独立的、更好用的版本。我想了想，那就单独做一个吧。
于是就有了 SVGDO。
一句话说清楚：一个纯前端运行的 SVG 编辑器，支持代码编辑、实时预览、图形拖拽变换、智能压缩，以及导出 SVG 和 PNG。所有处理在浏览器本地完成，不上传任何东西。
功能上我没偷懒，做了这些：
导入方式给了四种。可以直接拖拽 SVG 文件进来，可以粘贴代码，可以填远程 URL，还内置了一个 280 多个图标的素材库，点一下就能加载开始改。不是那种只支持一种导入方式的玩具。
编辑体验上，左边代码右边预览，两边实时同步。你在预览里拖拽一个图形，左边的代码跟著变；你改一行代码，右边立刻刷新。代码编辑器用了 Prism.js 做语法高亮，配色是深色主题，长时间盯着改代码眼睛不累。
图形的选中和变换也认真做了。点击任意元素能直接拖拽移动，四角和四边都能拉伸缩放，选中之后右侧会弹出属性面板，fill、stroke、opacity 这些常用属性直接在面板里改，不需要去翻代码。这个交互我调了很久，特别是移动端的触控，做到现在这样算是比较满意了。
优化是真的有用，不是摆设。分了安全模式（去掉注释、多余空格、默认值）和激进模式（连 metadata、空标签、冗余精度都干掉）。优化完实时显示省了多少字节和百分比，不满意可以一键恢复原始代码。我自己拿一些编辑器导出的 SVG 试过，激进模式经常能砍掉 40% 到 60%。
导出支持 SVG 和 PNG，PNG 能调缩放倍率和背景色（透明、白底、黑底），支持一键下载和复制代码。
还有几个我觉得值得一提的细节：
快捷键是照着实用的场景配的。Ctrl+O 打开文件、Ctrl+L 拉取 URL、Ctrl+I 图标库、Ctrl+S 下载 SVG、Ctrl+E 导出 PNG、Ctrl+Z/Y 撤销重做、滚轮缩放、Delete 删除选中元素。用熟了基本不用动鼠标。
多语言配了五种（中英日韩西），不是机翻，每个语种的 UI 文案我都校对过。
暗色模式、响应式布局、移动端底部 Tab 切换面板，手机上用也很顺手。
技术栈：React 19、TypeScript、Vite、Tailwind CSS，SVG 处理用 DOMParser 原生解析配合 svgpath 做路径操作，安全过滤用 DOMPurify，编辑器用 react-simple-code-editor 加 Prism.js。
整个项目花了我大概一个月，从 PictKit 里拆出来重构的。一开始只是把代码复制出来改改样式，后来发现架构得重新设计，又全部推倒写了一遍。现在这版我自己用着挺顺手的，应该不会再大改了。
如果你平时有改 SVG 的需求，可以试试 SVGDO。不需要下载软件，不需要注册登录，打开浏览器就是全部。
觉得有用的话，欢迎点个 Star。有问题或者想法，Issue 和 PR 都欢迎。
鹿梦
2026
