什么是SVG编辑器？

在可视化画布上绘制形状、路径和文字，调整描边与填充颜色，导出SVG代码。无需安装桌面软件。

工具包括矩形、椭圆、直线、自由路径、文字,以及形状库(三角形、六边形、星形、箭头)。文字直接在画布上编辑 —— 选中文字工具就能输入,双击已有文字也可以重新修改。每个元素都有独立的填充、描边颜色、描边宽度和不透明度,在属性面板里可以输入精确的 X、Y、宽和高数值。一键导入现有 SVG,在 10 像素网格上自动对齐,最多可撤销/重做五十步。完成的图形可以导出为纯 SVG 源码供 HTML 和 React JSX 使用,也可以导出为光栅 PNG 供不接受 SVG 的场合使用。

使用方法

1. 选择绘图工具（矩形、椭圆、直线、路径或文字），在画布上绘制图形。
2. 选中元素后可进行移动、缩放、旋转，或修改填充色、描边和透明度。
3. 将完成的图形导出为SVG文件，或直接复制SVG源代码。

何时使用

• 为落地页快速画一个一次性的 logo、分割线或装饰图形。
• 不想打开笨重桌面软件时,手动微调一份现有的 SVG。
• 教学 SVG 基础时,边画边看代码同步变化。

结果

一位前端开发者需要一个简单的Logo标志——两个带渐变填充的重叠圆形。在画布上画出形状、应用颜色后，直接复制SVG代码粘贴到HTML中。

常见问题

复制出来的 SVG 直接粘贴到 React JSX 里安全吗?

基本可以,但要注意:stroke-width、stop-color 这类属性在 JSX 里要写成 strokeWidth、stopColor。本工具复制的是 kebab-case 原始 SVG,适合直接放进 HTML,转成 JSX 时用一次查找替换即可。

能导入已有的 SVG 继续编辑吗?

可以 —— 点击「导入 SVG」就能从设备读取任意 .svg 文件。矩形、椭圆、圆形、直线、路径和文字会变成画布上可编辑的元素。渐变、滤镜和嵌套组会被跳过,因为编辑器把每个形状当作单一基本图形保存。

为什么在 Illustrator 或 Figma 里打开,SVG 显示不太一样?

不同渲染器对描边对齐、渐变和滤镜的处理略有差异。本工具的输出与所有现代浏览器一致,符合规范定义;差异通常是其他软件的渲染解释。

路径工具支持贝塞尔曲线控制点吗?

自由路径工具会记录你绘制的点,以折线形式输出。如需真正的三次贝塞尔曲线,导出后手动编辑 d 属性,或者把代码粘贴到能显示控制柄的矢量工具里继续调整。

画布上可以添加多少元素而不卡顿?

几百个图形在任何现代设备上都没问题。元素数量上千(例如复杂地图或图标矩阵)就会有明显卡顿,因为每次拖动都触发全画布重绘。建议合并成更少的复合路径。

相关工具