在线 SVG 编辑器

在线编辑、预览并导出 SVG 代码

使用轻量 SVG 代码编辑器快速修正、视觉检查，并准备可交付的 SVG 资源。

打开 SVG 编辑器左侧编辑源码，右侧预览或导出。

修正 SVG 标记中的颜色、尺寸、路径和 viewBox。

发布前对照原始代码和渲染结果。

为 Web、React、React Native、PNG 或 Data URI 准备同一个 SVG。

SVG Code

XML

SVG Code

XML

预览会移除脚本和内联事件属性，并在沙盒中渲染 SVG。

将 SVG 代码粘贴到语法高亮编辑器。

修改内容并观察预览实时更新。

SVG 准备好后复制、下载或切换导出面板。

代码优先的 SVG 编辑

它不是绘图工具，而是用于检查和修改 SVG 标记的代码工作区。

同一份源码可以生成 React、React Native、PNG 和 Data URI 输出。

当前 SVG 会保存在浏览器本地存储中，意外刷新也不容易丢失。

不是。它是面向代码的 SVG 编辑器，用来检查和修改标记，并查看实时渲染。

可以。它尤其适合小型 SVG 图标、Logo、代码片段和简单矢量插画。

不会。草稿自动保存使用浏览器本地存储，不会上传到服务器。