返回工具集
矢量图形 代码编辑 免费导出

SVG 在线编辑器

绘制矩形、圆形、线条与手绘路径,添加文字,或直接导入 SVG 文件 / 粘贴代码进行编辑,可导出 PNG / SVG 文件,全程在浏览器本地完成。

隐私保护: 所有绘制、导入与导出均在浏览器本地完成,不会上传或存储任何图形数据。
导入 / 新建
100%
画布 800 × 500
画布是空的 选择上方工具栏中的绘图工具开始绘制,
或从上方「导入 / 新建」打开 SVG 文件 / 粘贴代码
拖拽绘制 · 点击选中 · 拖拽移动 · 滚轮 / +− 缩放 · 空格 / 中键 / 拖空白处平移 · 0 复位视图
快捷键
V 选择 · R 矩形 · C 圆形 · E 椭圆 · T 文字 · G 多边形 · O 星形 · L 线条 · P 手绘 · X 橡皮擦
Del 删除 · Ctrl+Z 撤销 · Ctrl+Y 重做 · Ctrl+D 复制 · 方向键 微调 · 空格+拖拽 平移

SVG 代码预览

0 行
导出

常见问题(FAQ)

SVG 编辑器可以做什么?

可绘制矩形、圆形、椭圆、线条、多边形、星形与手绘路径,添加文字并实时编辑 SVG 代码,导出 PNG / SVG 文件。

适合谁使用?

适合前端开发者与设计师快速生成、调试矢量图形,所见即所得,无需安装软件。

支持导入已有 SVG 文件吗?

支持。可直接打开本地 .svg 文件或粘贴 SVG 代码进行编辑。

导出 PNG 会失真吗?

PNG 导出按当前画布尺寸渲染,缩放后绘制可保持清晰;SVG 为矢量格式,任意缩放不失真。

SVG 和 PNG 有什么区别?

SVG 是矢量格式,缩放无损、体积小,适合图标与网页;PNG 是位图,适合复杂渐变与照片类图形。

参考资料

  1. SVG 规范 — W3C:https://www.w3.org/TR/SVG2/
  2. SVG 元素参考 — MDN:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element