别再把 SVG 当成一张图，Vector Forge 把图层和源码都摊到你面前

下午临时接到一个选题，文案已经改到第五版，封面还卡在一张旧 SVG 上。

问题不大，改两个标题、换一组颜色，再把 Logo 往右挪一点就行。可你知道最烦的是什么吗？这张图是设计师很早以前交付的，文件里塞着一层又一层 <g>、路径和蒙版。它在浏览器里看起来就是一张图，真要改，得翻出 Figma，或者打开那个只为改一行字也要加载半天的桌面软件。

对靠内容吃饭的人来说，这种小修改特别消耗心气。重新画太重，直接放弃又不甘心。

Vector Forge 想解决的就是这段缝隙。它是一款跑在浏览器里的 SVG 编辑器，把一个原本只能预览的 SVG 文件，拆成能点、能选、能改的图层和源码。拖进去，改完，导出。没有账号，也不需要安装。

它的目标很克制。不是去和 Figma、Illustrator 拼完整设计能力，而是让你更快地完成已有 SVG 的二次编辑。

一张 SVG，为什么总让人又爱又怕

SVG 对自媒体创作和设计协作很友好。它清晰、可无限缩放，适合做公众号头图、社交媒体配图、播客封面、Logo 变体、活动主视觉里的图标。

但它也有一个反直觉的地方。视觉上它像图片，文件里其实是一棵节点树。

一个按钮图标可能只有几个 path，一张海报却可能有几十个文字、矩形、分组和滤镜。拿到这种文件时，创作者经常只想完成下面几件小事。

• 把「周三晚 8 点」改成「周五晚 8 点」
• 把品牌蓝替换成这次活动的橙色
• 暂时隐藏一层装饰，给标题让出空间
• 把旧 Logo 换成另一个版本

代码编辑器能改，但看不见结果。纯预览器能看，却动不了内容。完整设计软件当然做得到，只是为这点改动重新进入一套复杂工作流，有点杀鸡用牛刀。

Vector Forge 的切口就在这里，给 SVG 一张可见的结构地图。

它把代码和画布绑在了一起

打开体验站后，左边是图层树，中间是画布，右边是属性检查器。你也可以切到 Source 视图，看格式化后的 SVG 源码。

表面上看，这像是常见的三栏编辑器。真正有用的部分，是四个视图在操作同一份 SVG 文档。

项目里的 parseSvg 会用 DOMParser 读取 SVG，递归遍历 rect、path、text、g 等可编辑节点，并给它们补上 data-editor-id。这个 ID 不是给用户看的，它是图层树、画布命中和源码行之间的暗号。

所以，在画布上点一个元素，编辑器能反查到左侧图层。在线条很多的文件里点中一个 path，也能跳回对应源码。选中文字后直接双击，画布上的文字会进入编辑状态。

这点非常重要。很多创作者并不想学 SVG 语法，他们想要的是「我点到的，就是我能改的」。

适合内容团队的一条五分钟工作流

我更愿意把它当成一个「交付物再利用」工具。

假设你手里有一套设计师交付的活动视觉，明天要给视频号、小红书和公众号做三个变体。与其让设计师再开三次文件，不如先把原 SVG 拖进 Vector Forge。

先在图层树里折叠分组，找到主标题和日期。点一下眼睛图标，隐藏不需要的角标。接着在属性面板换填充色、描边色、透明度或描边宽度，双击文字换成新文案。最后用拖拽调整元素位置，确认画面没问题后导出。

中途改坏了也没关系。useEditorDocument 里的 commitDocument 把每次文档变更纳入历史栈，默认保留最近 50 步。Cmd/Ctrl + Z 和 Cmd/Ctrl + Shift + Z 可以撤销或重做，这比手改 XML 时「保存前先复制一份」稳得多。

它还支持多选。按住 Cmd/Ctrl 点选多个元素，画布会显示各自边界和组合边界。对于要一起移动的标题、日期和小标签，这个细节很省时间。

短一点说，设计师负责第一次把东西设计好，创作者可以用这条工作流完成后续的小范围改版。两边都少一点来回。

它不是把 SVG 转成画布，而是保留它的原样

这里有个容易被忽略的工程选择。

不少在线编辑器会把导入素材变成位图或一套内部对象模型，编辑体验可能更统一，代价是导出的结果不一定还是原来的 SVG。Vector Forge 走了另一条路，它一直把 SVG markup 当作文档本体。

拖动元素时，translateElementsById 会把位移写回节点的 transform 属性。改颜色、透明度、描边或文字时，updateElementAttributes 也是直接修改相应节点。对于矩形缩放，bakeRectTranslateScaleTransform 会把可解析的平移和缩放变回 x、y、width、height，减少连续编辑留下的变换包袱。

导出前，sanitizeForExport 会清掉 data-editor-id 等编辑器临时属性，minifySvg 再去除多余空白并收敛小数精度。也就是说，编辑器在工作时给 SVG 加的索引，不会跟着成品泄漏出去。

对于要继续交给前端、放进网页或反复复用的素材，这比导出一张 PNG 更有价值。图仍然是矢量图，下一次还可以继续改。

素材库让「从零画」变成「从一个好起点改」

如果你没有现成 SVG，Vector Forge 也不至于让你面对一块空白画布。

仓库的 public/svg-collections/ 放了动画示例、加载动效、Logo 和创意动画等预设素材，SvgCollectionModal 可以把其中一个元素加入当前文档。你还可以新建矩形、圆、椭圆、线、折线、多边形、路径和文字。

我觉得这个方向挺适合自媒体创作。很多人真正缺的不是一支从零画贝塞尔曲线的手，而是一个可以马上替换颜色、文字和尺寸的起点。

不过别把它理解成模板设计平台。目前的素材更像可拆入画布的积木，完整的 Banner、Logo、UI 卡片模板库还在路线图里。它适合补一个图标、加载动效或装饰元素，不适合期待一键产出整张成熟海报。

哪些场景值得打开它

下面这几类工作，我会优先推荐 Vector Forge。

如果你的素材本来就是 SVG，目标是局部编辑后继续以 SVG 交付，它很顺手。

轻量工具的边界，要在动手前知道

这类工具最怕被夸成万能画板。Vector Forge 目前的边界其实写得很清楚。

第一，它更适合桌面端。路线图把移动端列为「低成本兜底」，小屏操作复杂图层、精确拖拽和多选都不舒服。用手机临时看看可以，认真改图还是电脑更靠谱。

第二，它不做完整设计软件。没有打算和 Figma、Boxy SVG 正面竞争，也暂时没有网格吸附、标尺、旋转手柄、对齐分布和完整模板库。需要精细排版、多人评审或复杂插画，还是回到原来的设计工具。

第三，当前文档主要存进浏览器的 localStorage。useEditorDocument 会在 350 毫秒后写入本地缓存，写入失败会提示。这个设计让你不必注册账号，也意味着换设备、清浏览器数据前，最好先把 SVG 导出到本地。分享链接和短链属于后续计划，暂时别把浏览器缓存当云端项目库。

这不是缺点清单，而是它能保持轻的原因。创作工具一旦把账号、云端协作、团队权限和全功能排版都装进去，那个「打开就改」的瞬间通常就没了。

给创作者的一个判断方法

以后拿到 SVG，可以先问自己一个问题。

这次任务是「重新设计」，还是「复用已有设计资产」？

前者需要设计系统、版式推敲和完整工具链。后者更需要的是可见的图层、能马上修改的属性，以及干净的导出。Vector Forge 属于后面这一类。

我把它叫作「结构可见的复用」。设计师交付的 SVG 不再是一份只能请求修改的附件，而是团队每个人都能安全改一点、继续用下去的素材。

想直接试试，可以打开 Vector Forge 在线体验，或者阅读 GitHub 仓库 的源码和路线图。