SVG 在线编辑器

使用说明：在输入框中编写或粘贴 SVG 代码，右侧实时渲染预览。支持基本 SVG 元素（circle, rect, path, text 等）。

适用场景：图标设计、SVG 动画调试、图形代码编写与快速原型。

注意：出于安全考虑，脚本和事件处理属性已自动过滤。不支持外部资源加载。

📖 描述：在线 SVG 图形编辑工具，支持绘制、修改和导出 SVG 矢量图形

📂 分类：开发工具

🔒 隐私：所有数据仅在浏览器本地处理，不上传到任何服务器。

使用场景

前端开发做页面的时候，经常需要微调一个 SVG 图标的颜色或尺寸。比如设计给了个 SVG 格式的 logo，但颜色需要从 #333 改成 #666，或者尺寸需要缩小一半。开 Sketch 或 Figma 太小题大做了，用这个在线编辑器打开 SVG 源码，拖拽调整或者直接改代码，几秒钟搞定。

做 PPT 或文档排版的人也需要。SVG 是矢量图，放大多少倍都不会模糊，而且文件特别小。你可以用这个工具画简单的流程图、箭头、几何图形，导出后插到文档里，比截图清晰多了。支持导出 PNG 和 SVG 两种格式，按需选择。

设计师做图标库或 UI 素材的时候，经常需要批量调整 SVG 的属性。比如统一修改一批图标的外部边框宽度、圆角大小、或者整体缩放。用编辑器可以直接操作 SVG 节点，改一处应用到全部，比一个个在 Photoshop 里改省事得多。

问：这个编辑器跟 Figma/Sketch 比差在哪里？ 答：这是一个轻量级的在线 SVG 编辑器，适合快速调整现有 SVG 文件或绘制简单图形。Figma 和 Sketch 是专业设计工具，功能更全面但学习成本更高。本工具主打轻量快速，打开即用，适合非专业设计师。

问：支持导入现有的 SVG 文件编辑吗？ 答：支持。你可以直接上传 .svg 文件，或者粘贴 SVG 代码到编辑器中，所有元素都会被解析出来供你修改。

问：编辑后的图片可以导出哪些格式？ 答：支持导出为 SVG（矢量）和 PNG（位图）两种格式。SVG 保留矢量信息可继续编辑，PNG 适合直接用在无法渲染 SVG 的场景。

加载中...