Tools 4 All
首页
图像工具

在线 SVG 编辑器

浏览器中快速、专业的矢量编辑器：用钢笔绘制、编辑节点、合并形状、用渐变设置样式、制作动画，然后导出优化的 SVG 或 PNG。不会上传任何内容。

免费无需注册本地运行——文件永远不会离开您的设备

快速入门和快捷键

在左侧选择一个工具（或按其快捷键），在画布上拖动进行绘制，并使用右侧的“设计”面板为所选对象设置样式。随时按 ? 查看完整的快捷键列表。

  • 导航：滚动以平移，Ctrl/⌘ + 滚动或双指捏合以缩放，按住 Space 并拖动以平移。Shift+1 缩放到适合窗口。
  • 选择：点击、Shift+点击或拖出选框。双击编组可进入编组，双击路径可编辑其节点，双击文本可输入文字。
  • 变换：拖动控制柄进行缩放（Shift 保持比例，Alt 从中心缩放），拖动圆形旋钮进行旋转，Ctrl/⌘+拖动边控制柄进行倾斜。
  • 钢笔：点击创建尖角，拖动创建曲线，点击第一个节点闭合路径，按 Enter 完成。
  • 文件：将 SVG 或图片拖放到编辑器的任意位置，粘贴 SVG 代码或截图，自动保存会保留您的作品。
Untitled
Guide, features and FAQ

如何使用 SVG 编辑器

  1. 打开或开始绘制

    将 SVG、PNG 或 JPEG 拖放到画布上、打开文件，或从空白页面开始。不会上传任何内容：编辑器完全在您的浏览器中运行。

  2. 绘制和编辑

    使用钢笔、铅笔和形状工具，然后逐节点细化路径，用布尔运算合并形状，并为填充、描边和渐变设置样式。

  3. 整理

    在图层面板中编组、重新排序和锁定对象，对齐和分布它们，将作品重用为符号，并直接编辑 SVG 代码。

  4. 导出

    以任意比例下载优化的 SVG、PNG、JPEG 或 WebP，或将结果复制为 SVG 代码、数据 URI、React 组件，或从 CSS 获取颜色的 Tailwind 就绪 SVG。

完全在您的浏览器中运行的专业 SVG 编辑器

Tools 4 All 的 SVG 编辑器是一款完整的矢量图形应用，即开即用，无需下载、账号或上传。您可以用它绘制标志、图标、插画、图表和 UI 素材，或清理和微调已有的 SVG 文件。它围绕 SVG 格式本身构建，因此您导出的文件就是您编辑的那个文档：没有专有格式，没有隐藏的转换。

您可以做什么

  • 精确绘制：支持贝塞尔曲线的钢笔工具、带平滑功能的手绘铅笔、可分别设置圆角、倒角或内凹角的矩形、椭圆、直线、斑点画笔、橡皮擦、刻刀和剪刀，以及可编辑的形状：多边形、星形、三角形、十字、框、圆环、扇形、月牙、箭头、对话气泡、齿轮、心形、云朵、花朵和螺旋，还有文本。
  • 逐节点编辑路径：移动节点和控制柄，在尖角、平滑和对称节点之间转换，添加和删除节点，连接和断开路径，直接弯曲线段，并将控制柄吸附到切线。
  • 合并形状：联集、减去、交集、排除和分割，以及轮廓化描边、偏移路径、简化和反转，全部由我们自己的保留曲线几何引擎在后台 worker 中计算。
  • 为一切设置样式：纯色、带画布控制柄的线性和径向渐变、图案、单独的填充和描边不透明度、虚线、端点、连接、箭头标记、混合模式、模糊和投影效果、剪切路径和蒙版。
  • 保持条理：图层面板支持拖动重新排序、重命名和嵌套、锁定和隐藏、编组和取消编组，可对齐和分布到所选对象、画板或关键对象，还有文档色板和可重用的符号。
  • 像专业人士一样工作：带距离标签和等间距提示的智能参考线，吸附到网格、像素、标尺参考线、节点和路径，数字 X/Y/W/H/旋转字段，无限撤销，以及 Figma 和 Illustrator 风格的快捷键。
  • 代码与导出：双向 SVG 代码视图、带大小显示的优化 SVG 导出、任意比例的 PNG/JPEG/WebP，以及复制为 SVG、数据 URI、React（JSX 或 TSX）、Tailwind SVG 或 CSS 背景。
  • 为网页制作而生：文档颜色可一键替换并转换为 currentColor，文本转轮廓、轮廓化描边、拼合变换并取消编组、使画布适合内容，以及简化杂乱的路径。
  • 真正的工作区：多个绘图以标签页打开，每个都有自己的撤销历史；简短的菜单带子菜单；可折叠的侧面板（Ctrl/⌘+B）；在手机和电脑上都可全屏编辑。

为什么原生 SVG 编辑器很重要

许多设计工具把 SVG 当作一种导出格式：您在它们自己的模型中绘制，最后才生成 SVG。这对简单的图标没问题。但当您需要编辑现有文件、保留 CSS 或 JavaScript 依赖的 id，或弄清楚为什么一个文件比应有的大十倍时，这种方式就行不通了。这款编辑器直接处理 SVG 文档。编组依然是编组，渐变依然是渐变，一个被使用五次的 <symbol> 依然是一个符号。当您重命名图层时，您设置的就是该元素的 id。

处理大文件也很快

从第一行代码起，速度就是设计目标之一。绘图由浏览器在一个隔离的图层中原生渲染。选择控制柄、悬停轮廓和参考线绘制在单独的叠加层上，因此移动鼠标绝不会触及您的文档。空间索引（R 树）能在微秒内找到指针下方的对象，即使有成千上万个形状也一样。在大型文档中，平移和缩放交给 GPU 合成器处理，停止操作后矢量会重新清晰渲染。布尔运算、路径偏移和 SVG 优化等耗时的工作在 Web Worker 中运行，因此界面始终保持响应。

用于矢量工作的精确工具

使用钢笔工具点击创建尖角、拖动创建平滑曲线。按住 Shift 保持 45° 角，按住 Alt 断开控制柄。使用节点工具，您可以拖动线段使其弯曲、双击添加节点，或选择多个节点并对齐。当对象与相邻对象的边缘或中心对齐、或对象之间间距相等时，智能参考线会显示出来。您也可以从标尺中拖出参考线。如需精确数值，可在“设计”面板中输入 X、Y、宽度、高度和旋转。字段支持 120+16 或 200/3 之类的算式。

干净、小巧的导出

编辑器保存的文件中常常留有元数据、未使用的定义、多余的编组和过于精确的数字。导出对话框会在后台运行 SVGO 式优化器。它将数字舍入到您选择的精度，将路径数据转换为最短形式，删除编辑器元数据和未使用的定义，缩短 id 和颜色，并合并无用的编组。每项优化都可以关闭，对话框会显示优化前后的文件大小。对于栅格输出，可选择 1×、2×、4× 或精确像素尺寸的 PNG、JPEG 或 WebP，带或不带透明背景。

为网页制作而生

用于网站和应用的 SVG 与印刷作品的需求不同。“文档颜色”列表显示文件使用的每种颜色：更改其中一种，所有使用该颜色的对象都会随之改变；或将其转换为 currentColor，让 React 或 Tailwind 图标从 CSS 获取颜色。导入的文件常常带有嵌套编组和变换，使路径难以编辑：“拼合变换并取消编组”一步就能将它们烘焙到坐标中，“适合内容”会将 viewBox 裁剪到作品（包括描边）。“文本转轮廓”和“轮廓化描边”将文字和线条粗细变成在任何地方看起来都一样的普通路径，“简化”则会去掉描摹或手绘形状中成百上千个多余的点。

您的文件保留在您的设备上

编辑器背后没有服务器。打开文件时会从您的磁盘读入页面，导出时会在您的设备上生成文件。自动保存写入浏览器私有的 IndexedDB 存储，其中也保存了您的最近文件列表。如果您不小心关闭了标签页，下次访问时会恢复您的上一个文档。

探索更多图像工具

常见问题

这款 SVG 编辑器真的免费且私密吗？
是的。它免费，无需账号，100% 在您的浏览器中运行。您的绘图永远不会被上传：文件在本地读取，自动保存写入浏览器自身的存储（IndexedDB），导出也在您的设备上生成。
它能打开来自 Illustrator、Inkscape、Figma 或图标库的 SVG 文件吗？
可以。编辑器直接处理 SVG 文档，因此真实文件会保留其结构、id、样式、渐变、符号、剪切路径和蒙版。杂乱或无效的文件会在打开时修复，编辑时脚本会被禁用，.svgz 文件会自动解压。
它有像 Illustrator 那样的钢笔工具和布尔运算吗？
有。钢笔工具绘制带尖角、平滑和对称节点的贝塞尔路径，节点工具让您添加、删除、转换、连接、断开和对齐节点。联集、减去、交集、排除和分割都作用于曲线并保持其为曲线，您还可以轮廓化描边、偏移和简化路径。
我可以为 SVG 制作动画吗？
可以。打开“动画”工作区，移动播放头并更改对象的位置、旋转、缩放、不透明度或颜色：每次更改都会成为带缓动曲线的关键帧，已有动画的属性会自动获得新的关键帧。动画以标准 SVG（SMIL）保存，因此无需任何脚本即可在所有浏览器中播放。
我可以直接编辑 SVG 代码吗？
可以。“代码”面板以语法高亮显示实时 SVG 源代码。编辑代码会更新绘图，编辑绘图也会更新代码。来自任何一方的每次更改都可以撤销。
支持哪些导出格式？
由内置的 SVGO 式优化器生成并显示前后大小的优化 SVG，以及 1×、2×、4× 或自定义尺寸的 PNG、JPEG 和 WebP，可选透明背景。您还可以将所选对象复制为 SVG 代码、数据 URI 或用于 React 的 JSX。
如果浏览器关闭，我的作品会丢失吗？
不会。每次更改后片刻，您的文档就会自动保存到浏览器的本地存储中。下次打开编辑器时，它会恢复您上次的会话，较早的文档可在“文件 → 最近的文件”中找到。
我可以让图标为 React 或 Tailwind 使用 currentColor 吗？
可以。“文档颜色”部分列出绘图中的每种颜色（同一颜色的每种写法只算一次）。点击色板可选中所有使用该颜色的对象并一次性全部更改，或选择“转换为 currentColor”：图标随后会从 CSS（例如 Tailwind 的 text-… 类）获取颜色，同时在编辑器中保持原有外观。可从“编辑”菜单或上下文菜单将其复制为 React 组件或 Tailwind SVG。
如何将文本转换为路径，或将描边转换为填充形状？
选择文本并选择“文本转轮廓”（Ctrl/⌘+Shift+O）：每个字形都会在浏览器绘制它的确切位置变成路径，包括路径文字和带样式的文字片段。对于描边，“轮廓化描边”会将描边转换为与其宽度、端点、连接和虚线相匹配的填充形状，让标志在任何尺寸下都保持粗细。
它能清理带有变换和嵌套编组的导入 SVG 吗？
可以。“拼合变换并取消编组”会将每个变换写入路径坐标，并在一个撤销步骤中解散编组，只保留那些否则会改变外观的编组（被剪切、被蒙版或被引用的编组）。“适合内容”会将画布（viewBox、宽度和高度）裁剪到作品（包括描边），可选留白；“简化”可减少杂乱路径上的点数。
我可以同时处理多个绘图吗？
可以。每个绘图都在画布上方各自的标签页中打开，拥有各自的撤销历史、选区和缩放。您可以自由切换；关闭标签页后，文件仍保留在“文件 → 最近的文件”中，下次访问时您打开的标签页也会恢复。
所有命令都在哪里？菜单很短。
相关命令位于子菜单中（排列、变换、路径、剪切与蒙版、复制为、对齐与分布…）。悬停或点按它们，或使用方向键。每个命令也都有快捷键：按 ? 查看完整列表。在电脑上，您可以用 Ctrl/⌘+B 折叠侧面板，为画布腾出更多空间。
它能在手机和平板上使用吗？
可以。在小屏幕上，工具会移到底部工具栏，面板以表单形式打开。双指捏合缩放，双指拖动平移，长按打开上下文菜单。
我的绘图可以有多大？
此编辑器专为大型文件打造。它使用空间索引进行命中测试和选择，使用单独的叠加层显示控制柄和参考线，在大型文档上只由合成器完成平移和缩放，并使用 Web Worker 处理几何运算和优化。包含数万个元素的文档也能保持响应。
所有图像工具 →
图片压缩器 减小图片文件大小，同时保持视觉质量。 图片转换器 在 PNG、JPEG、WebP、GIF、BMP、ICO、TIFF 等格式之间转换图片。 图片尺寸调整器 将图片调整为精确尺寸——非常适合护照照片。 图片转 PDF 将一张或多张图片合并为一个 PDF 文档。