将 SVG 文件拖放到此处
在你的浏览器中处理。文件永远不会上传。
该工具可以直接在浏览器中编辑 SVG 代码。没有上传任何内容。 打开 VectorCraft
如何编辑 SVG 文件
- 1
打开 SVG 文件，粘贴代码或尝试示例。
- 2
编辑代码；预览会随着你的输入而更新。设置宽度和高度或格式化代码。
- 3
下载编辑后的 SVG。
示例
设计系统中的图标为 24 像素，但你需要 48 像素且具有不同的笔画宽度。打开它，将大小设置为48×48，在代码中更改笔画宽度并下载。
尺寸与 viewBox 的区别
width 和 height 决定显示尺寸，viewBox 定义路径与形状使用的内部坐标。一个 viewBox 为 0 0 24 24 的图标，将宽度改为 48 时，不必把所有路径坐标也翻倍。缩放时保留 viewBox，并检查宽高比例；只改一个维度可能改变显示效果。
建议每次只修改一个属性，再检查预览。线条图标可先调整 stroke-width，实心图标则检查 fill 和样式规则。内嵌样式表可能覆盖元素属性，因此修改属性后画面不一定立即变化。
选择代码编辑器还是完整工作区
已有 SVG 代码、知道要改哪个属性时，这个工具适合快速调整尺寸、描边、颜色与代码结构。格式化按钮按需加载引擎，让代码更易读；格式化和压缩是不同操作。保留原始副本，便于比较修改前后。
绘制新图形、选择对象或可视化编辑节点时，请打开完整 VectorCraft 工作区。这里的代码工具不替代画布操作。下载后还应在实际使用的软件中打开检查：字体、外部资源和渲染方式可能不同，本站预览正常不代表所有软件中的显示都完全一致。
从修改图标到下载检查的完整例子
编辑复杂插画之前，可以先试一个简单的描边图标。在这个免费 SVG 编辑器中打开示例，或粘贴自己的 SVG 代码，找到根 svg 元素。保留 viewBox，将 width 和 height 改为所需的显示尺寸。先只修改一处描边颜色，再对照预览。如果没有变化，检查同一元素是否受 style 属性或内嵌 CSS 规则控制。尝试另一种方法前，先撤销这一次修改。
预览空白时，先检查源代码，不必马上放弃文件。确认文档有 svg 根元素，标签和引号完整闭合，可见图形位于 viewBox 范围内。白色图形也可能在白色背景上看不见。格式化可以帮助阅读嵌套分组，但无法修复所有格式错误，也不能恢复缺失的图片。
在线 SVG 编辑器显示预期结果后，下载新副本并单独打开。在网站或文档的实际使用尺寸下，检查宽高、描边粗细和透明区域。保留原文件和修改后的副本。下一步需要批量替换调色板时用改色工具，需要精简交付代码时用优化器，需要固定像素图片时用 SVG 转 PNG。
功能说明与当前限制
- 最适合快速更改现有 SVG 文件：属性、大小、颜色和结构。
- 绘图和视觉路径编辑发生在完整的 VectorCraft 工作区中。
- SVG 中的脚本和外部资源不会在预览中运行。
SVG 编辑器常见问题
我可以直观地编辑路径吗？
使用完整的 VectorCraft 工作区，通过笔和直接选择工具进行可视路径编辑。
我的文件上传了吗？
不会。编辑和预览发生在你的浏览器中。