SVGEdit 上手指南：浏览器里打开一个矢量图形画板
【免费下载链接】svgedit Powerful SVG-Editor for your browser 
项目地址: https://gitcode.com/gh_mirrors/sv/svgedit
设计师让你顺手改个图标的颜色和大小，你手头又不想装重型图形软件。SVGEdit 是一个开源的 SVG 编辑器，直接跑在浏览器里：不用安装、不用注册，打开页面就能画。这篇文章先带你在本地把它跑起来，再用"画一个简单 App 图标"这个小任务走完基本操作。
SVG 是什么，为什么浏览器里画它刚刚好
SVG 是一种用 XML 文本来描述图形的格式，圆、矩形、路径都是可读的文字指令，所以它放大到多大都不糊，文件本身也可以直接粘贴进网页里。而现代浏览器本身就内置了 SVG 渲染引擎——在浏览器里画 SVG 不是将就，是它的主场。画完导出的就是一个几 KB 的文本文件，比位图省事得多。
三条命令在本地跑起 SVGEdit
最短路径就三步，每步都只干一件事：
- 克隆仓库，代码到手：
git clone https://gitcode.com/gh_mirrors/sv/svgedit
cd svgedit
- 安装依赖，
npm install。注意它要求 Node 20.19 以上或 22.12 以上，如果装完启动时报 engines 版本不满足，就是本机 Node 太旧，先升级再试。 - 启动开发服务器：
npm run start
然后在浏览器打开 http://localhost:8000/src/editor/index.html，看到工具栏加空白画布就是成功了。
最常见的两个失败点：一是端口 8000 被占用，vite 配置了 strictPort，会直接拒绝启动，换个空闲端口或关掉占用进程即可；二是按官方 README 的说法，若要长期自托管，建议先执行 npm run build --workspace @svgedit/svgcanvas 把画布子包本地构建一遍，更稳。
实战任务：画一个双色 App 图标
目标是画一个 100×100 的图标：黄色大圆当底，上面叠一个蓝色圆角矩形，最后导出成 SVG 文件。
- 点左侧工具栏的矩形工具，在画布上拖一个矩形。选中它后，顶部面板会出现宽度、高度输入框，直接填 100 和 100，让尺寸精确。再在颜色选择器里把填充改成黄色。如果面板里没有输入框，先确认元素真的处于选中状态。
- 同样方式再画一个小矩形叠在上面，把它的边角半径调大（面板里的圆角半径项，或直接拖矩形四角的控制点），填充改蓝色。想彻底去掉描边：按住 Shift 点击调色板里那个带红叉的"无颜色"方块。
- 用选择工具框选两个图形，按
Ctrl+G分组。之后拖动任何一个，整组一起移动，说明分组成功了。 - 点工具栏的保存/导出，选择 SVG 格式，浏览器会触发文件下载。打开下载的 .svg 文件确认一下：应该只有几行文本，背景、矩形、圆角都在。
新手高频卡点：画着画着没反应怎么办
元素被别的图形挡住，点不到怎么办？ 选中任意一个元素后，按 Shift+O / Shift+P 可以按顺序切换选中前后相邻的图形；再配合线框模式，画布会半透明显示，被挡住的元素一目了然。
为什么我改了参数却没反应？ 多半是你还处在组的编辑上下文里。双击一个组会"钻进去"编辑组内成员，这时外面的一切都不可改；编辑完按 Escape 退回到顶层再操作。
点导出没有下载发生？ 大概率是浏览器的弹窗拦截器（比如 AdBlock 一类的扩展）把下载动作拦了。在拦截设置里给当前站点放行，然后重试一次。
描边想去不掉？ 普通点击调色板会设置填充，按住 Shift 点击才是设置描边——所以是 Shift+点那个红叉方块，描边就没了。
想继续深入：扩展、配置与源码入口
SVGEdit 的功能相当一部分来自插件：网格、平移、图形库、图层面板这些都在 src/editor/extensions/ 目录下，改 ConfigObj.js 就能调整默认启用的扩展和界面配置。docs/tutorials/ 里有编辑器使用、配置项、API 等系列文档，适合想把它嵌进自己网页的人。而真正负责画布绘制与撤销重做的引擎是独立的 packages/svgcanvas/ 包，想读核心逻辑可以从这里入手。
SVGEdit 就是一个能在浏览器里跑的开源矢量图形工具：先按上面的步骤画完你的第一个图标，再挑一个扩展装上玩玩，基本用法就算拿下了。
【免费下载链接】svgedit Powerful SVG-Editor for your browser 项目地址: https://gitcode.com/gh_mirrors/sv/svgedit
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
