Qsc
发布于 2026-07-18 / 1 阅读
0
0

SVG编辑器

SVGEdit — 浏览器里的矢量图编辑器

SVGEdit 是一款快速、基于 Web 的 SVG 绘图编辑器,无需安装任何软件,打开浏览器即可使用。项目已有 15 年以上历史,是最受欢迎的开源 SVG 编辑器之一。也是本人Push的第一个开源项目。

https://qsc.ink/svg-editor

核心功能

功能

说明

绘图工具

矩形、圆形、椭圆、多边形、路径、线条、文本等基础图形

路径编辑

节点编辑、贝塞尔曲线调整、路径布尔运算

图层管理

支持多图层、图层排序、锁定/隐藏

样式编辑

填充色、描边、渐变、透明度、描边样式

对齐与分布

多对象对齐、等距分布、组合/解组

导入导出

支持 SVG 文件导入、SVG/PNG 导出

撤销重做

完整的操作历史栈

使用场景

  • 图标设计:绘制矢量图标,导出 SVG 用于网页开发

  • 流程图/示意图:快速绘制简单的技术图示

  • SVG 学习:直观编辑 SVG 元素,理解矢量图结构

  • 轻量编辑:不想装 Illustrator/Inkscape 时的在线替代方案

快速上手

  1. 选择图形工具:点击左侧工具栏的图形按钮(矩形、圆形等)

  2. 绘制图形:在画布上拖拽绘制,按住 Shift 可约束比例

  3. 调整样式:选中图形后,在顶部/右侧面板修改填充色、描边等

  4. 路径编辑:切换到路径工具,可逐节点调整曲线

  5. 导出文件:菜单 → 导出为 SVG 或 PNG

快捷键

快捷键

功能

Ctrl+Z / Ctrl+Y

撤销 / 重做

Ctrl+A

全选

Ctrl+D

复制并偏移

Ctrl+G / Ctrl+Shift+G

组合 / 解组

Delete

删除选中

↑↓←→

微调位置

Shift+拖拽

约束比例绘制

技术信息

  • 原项目SVG-Edit/svgedit

  • 协议:MIT License

  • 技术栈:JavaScript、SVG Canvas

  • 浏览器支持:Chrome、Firefox、Safari 等现代浏览器


评论