免费在线 SVG 编辑器 — 绘制图形和文字，下载 SVG

在画布上绘制图形、箭头、手绘线条和文字，然后下载干净的 SVG 或 PNG。免费，在浏览器中运行，无需注册。

点击图形将其选中，拖动可移动，拖动控制点可调整大小。方向键微调位置（按住 Shift 每次 10 px）。

键盘快捷键

V 选择 / 移动
R 矩形
E 椭圆
G 三角形
S 星形
L 直线
A 箭头
P 自由画笔
T 文字
Ctrl/⌘ Z 撤销，加 Shift 重做
Ctrl/⌘ D 复制一份
Del 删除所选
方向键 微调 1 px，加 Shift 为 10 px
绘制时按住 Shift：正方形、圆形、45° 直线
Esc 取消选择或取消拖动

一切都在你的浏览器中进行：不会上传任何内容，你的绘图会自动保存在本地，刷新也不会丢失。需要的不是简单草图，而是 logo、插画式图表或完整的品牌体系？探索更多免费工具。

发现问题，或者觉得哪里可以更好？每条消息我们都会阅读，并尽快修复。

这款免费的 SVG 编辑器让你在浏览器中绘制矢量图形，并下载为干净的 SVG 或 PNG，无需账号，也不上传任何内容。选择一个图形工具，在画布上拖动，设置填充和描边，加一个箭头和一个标签，文件就准备好了。它专为三十秒就能搞定的活儿而设计：幻灯片里的示意图、简单的图标、占位 Logo、文档中带标注的方框。

它刻意不做 Illustrator 的翻版。这里没有图层面板、布尔运算或贝塞尔节点编辑，正是这些功能让完整的矢量软件需要花一下午去学。取而代之的是快速绘图所需的每一个工具、全部工具的键盘快捷键、符合预期的撤销功能，以及只包含你所画图形的导出文件：没有编辑器元数据，没有内嵌字体，在别处打开时也不会有意外。

使用方法

从预设（图标、方形帖子、全高清）中选择画布尺寸，或自行输入，并选择透明或彩色背景。
选择工具：矩形（R）、椭圆（E）、三角形、星形、直线（L）、箭头（A）、手绘笔（P）或文字（T）。在画布上拖动即可绘制；按住 Shift 可画出正方形、正圆或 45° 直线。
用选择工具（V）点击图形即可移动，拖动控制点可调整大小，并在面板中编辑其填充、描边、不透明度或圆角。方向键每次微调 1 px，按住 Shift 为 10 px。
用 Ctrl/⌘ D 复制，用 Del 删除，用“置于顶层 / 置于底层”按钮调整层级，用 Ctrl/⌘ Z 撤销任何操作。
点击“下载 SVG”获取可缩放文件，“下载 PNG”（1× 至 3×）获取位图，或点击“复制代码”把 SVG 直接粘贴到 HTML 中。你的绘图会自动保存在此浏览器中，方便以后继续。

常见问题

这款 SVG 编辑器真的免费、无需注册吗？

是的。无需账号，没有水印，没有导出次数限制，也没有付费推销。编辑器完全在你的浏览器中运行；页面加载后即使断网也能继续使用。我们制作这些工具，是因为它们能把人们带到本站，其中一些人后来会需要我们为客户提供的设计、网站或软件开发服务。

可以用它画什么？

矩形（可带圆角）、椭圆和圆形、三角形、五角星、直线、箭头、手绘笔画，以及三种字体系列的文字。每个图形都有各自的填充、描边、描边宽度和不透明度，可以移动、调整大小、复制和调整层级，需要时还能吸附到 10 px 网格。这足以应付示意图、简单图标、标注和占位 Logo。它不支持贝塞尔节点编辑、渐变、图层或布尔运算；这些需要用 Inkscape 或 Figma。

可以打开并编辑现有的 SVG 文件吗？

部分可以，而且编辑器会明确告诉你能做到哪一部分。“打开 SVG”会导入矩形、圆形、椭圆、直线、折线、多边形、路径和文字，并保留它们的颜色和位置。凡是无法如实表示的内容都会被跳过而不是被弄乱，并会有消息报告跳过了什么：带 transform 属性的元素、带变换的分组、<use> 和 <image> 引用、渐变填充以及 CSS 样式表。简单的图标和示意图能干净地打开；从 Illustrator 导出的复杂插画通常不行，我们宁愿实话实说，也不愿假装可以。

应该下载 SVG 还是 PNG？

如果图形需要缩放、以后还要编辑，或者用于网站，就选 SVG：它在任何尺寸下都保持清晰，通常比 PNG 小得多，还能用 CSS 设置样式。如果需要固定的位图，就选 PNG：粘贴到对 SVG 支持不佳的文档或幻灯片中、上传到不接受 SVG 的平台，或者发给只想要一张图片的人。2× 和 3× 选项可为高 DPI 屏幕生成清晰的 PNG。拿不准时，两个都下载吧，反正免费。

我的绘图会被上传到任何地方吗？

不会。绘制、编辑和导出都通过标准的 SVG 和 Canvas API 在你的浏览器中完成，不会向我们的服务器发送任何内容。绘图会自动保存到浏览器的本地存储中，刷新页面或不小心关闭标签页都不会丢失；这份副本只保存在你的设备上，点击“新建”时会被清除。

SVG 文件可以商用吗？

可以。你画的东西归你所有，不附带任何许可证，也无需署名，个人或商业用途均可。导出的文件只包含你的图形和标准 SVG 标记，其中没有任何属于我们、需要授权的内容。

为什么导出的文件看起来与画布略有不同？

编辑器用的就是你的浏览器将要渲染的 SVG，所以图形完全一致。可能不同的有两点：网格只在编辑器中显示，从不导出；文字使用通用字体系列（Arial、Georgia、Courier New），这样文件无需内嵌字体，在任何电脑上都能同样渲染。如果查看器缺少其中某种字体，就会用相近的字体替代，文字宽度可能会偏差几个像素。

SVG 还是 PNG：两者区别的实际含义

SVG 是描述图形的文本文件：在这个坐标有一个矩形，这么宽，这种颜色。PNG 是由像素组成的网格。这一个区别解释了所有的实际影响。SVG 可以缩放到任意尺寸而不模糊，一张简单的示意图往往只有几百字节，之后还能编辑，在网页上还能用 CSS 改颜色。PNG 固定为导出时的尺寸，图像越大文件越大，除了按像素修改之外无法编辑。

Logo、图标、示意图以及网站上的一切，默认都该用 SVG。当目标位置不支持 SVG（许多邮件客户端、部分文档工具、大多数社交平台），或者接收者只想要一张可以随处放的图片时，PNG 才是正确选择。编辑器可以从同一张绘图导出两种格式，所以这个选择没有任何成本。

这款编辑器擅长什么、不擅长什么

• 快速示意图：用于幻灯片、README 或支持工单的方框、箭头和标签。网格和吸附让元素无需费力就能对齐。

• 简单图标和网站图标：在 256 × 256 或 512 × 512 的透明背景上绘制，下载 SVG，再用 Favicon 生成器生成网站所需的各种尺寸。

• 占位 Logo 和标志：一个图形、一个字母、一种颜色。足以让原型或路演幻灯片摆脱空白阶段。

• 标注：打开一张简单的 SVG 图表或示意图，在你要讨论的部分周围加一个圆圈和一个箭头，然后导出。

它不适合画插画、做以排版为主的设计，或任何需要逐点调整曲线的工作。手绘笔画会自动平滑，但之后无法编辑。这类工作可以使用免费又出色的 Inkscape，Figma 的免费版用来做界面图形也不错。知道何时该换更强的工具，也是用好小工具的一部分。

制作干净 SVG 文件的技巧

按实际需要的尺寸绘制。在 1920 × 1080 画布上画的图标会带着这个 viewBox 导出，所有使用者都得再缩放它。先把画布设成目标尺寸；预设已涵盖常用尺寸。

线条图优先用描边而不是填充，并保持描边宽度一致；宽度混杂是让示意图显得业余的最快方式。两三种颜色几乎总是够用，面板中的色板就是为了彼此协调而挑选的。

文字保持为文字。本编辑器导出真正的 <text> 元素，而不是把文字转成路径，这样文件很小、可被搜索，以后也能修改措辞。如果下游工具坚持要轮廓化，就在那里、在最后一步再转换。

除非确实需要颜色，否则保持背景透明。透明的 SVG 可以放进任何页面或幻灯片；而 Logo 后面的白色矩形则不行。