无需登录 数据私有 本地保存

在线SVG基础编辑器 - 矢量图形可视化绘制

图像工具 开发工具 SVG 矢量 编辑器
43
0
0
0

SVG 基础编辑器

在线编辑、预览和导出 SVG 矢量图形，支持实时渲染与代码高亮

SVG 代码 0 行
实时预览
100%
SVG

常见问题与 SVG 知识

SVG（Scalable Vector Graphics，可缩放矢量图形） 是一种基于 XML 的二维矢量图形格式，由 W3C 制定为开放标准。它与 JPEG、PNG 等位图格式不同，SVG 使用数学公式描述图形，因此无限缩放不失真。主要优势包括：文件体积小、支持 CSS 动画和 JavaScript 交互、可被搜索引擎索引、文本内容可被屏幕阅读器识别、适合响应式设计。广泛应用于图标系统、数据可视化、品牌 Logo 和网页插画等场景。

SVG 是矢量图形，基于 DOM 树结构，每个元素都是可交互的独立对象，适合图标、UI 元素、图表等需要交互和缩放的场景。Canvas 是像素级位图渲染，通过 JavaScript 绘制，适合游戏、图像处理、大量粒子动画等高性能场景。关键区别：SVG 图形可以被 CSS 样式化和 DOM 事件绑定；Canvas 绘制后是「一帧画面」，无法单独操作已绘制的元素。对于数据可视化和静态插图，SVG 通常是更好的选择。

viewBox 是 SVG 中最重要的属性之一，格式为 viewBox="min-x min-y width height"。它定义了 SVG 画布的可视坐标系，允许图形在不同尺寸的容器中按比例缩放。例如 viewBox="0 0 200 200" 表示坐标系从 (0,0) 开始，宽高均为 200 个单位。当 SVG 的 width 和 height 与 viewBox 比例一致时，图形会完美适配；若比例不同，可通过 preserveAspectRatio 属性控制缩放行为（如居中裁剪或拉伸）。

优化 SVG 的常用方法：① 精简路径数据——使用工具（如 SVGO、SVGOMG）去除多余小数点、合并路径；② 移除不必要的属性——删除编辑器生成的冗余元数据、注释和命名空间；③ 使用相对坐标——路径命令中优先使用小写字母表示的相对坐标；④ 符号复用——通过 <defs> 和 <use> 复用重复图形；⑤ 简化渐变和滤镜——复杂的滤镜效果会显著增加体积；⑥ GZIP 压缩——SVG 是文本格式，在服务器端开启 GZIP 可压缩 50%-80%。

SVG 在所有现代浏览器中均获得广泛支持，包括 Chrome、Firefox、Safari、Edge 以及移动端的 iOS Safari 和 Android Chrome，覆盖率达到 97% 以上。IE9 及以上版本也支持基础 SVG 功能（IE8 及以下需要 polyfill）。对于内联 SVG（直接嵌入 HTML），所有现代浏览器都能完美渲染并支持 CSS 动画和 DOM 操作。移动端对 SVG 的支持同样出色，使其成为响应式图标和插画的首选格式。

有四种主要方式：① 内联嵌入——直接将 <svg>...</svg> 放入 HTML，支持 CSS 样式和 JS 交互，是最推荐的方式；② <img> 标签——<img src="image.svg">，简单但无法交互；③ CSS 背景图——background-image: url('image.svg')，适合装饰性图形；④ <object>/<embed>——支持脚本但略显过时。对于需要动画和交互的 SVG，优先使用内联方式。

d 属性是路径的核心，包含一系列命令字母和坐标：M（移动到）、L（直线到）、H（水平线）、V（垂直线）、C（三次贝塞尔曲线）、S（平滑三次贝塞尔）、Q（二次贝塞尔）、T（平滑二次贝塞尔）、A（弧线）、Z（闭合路径）。大写表示绝对坐标，小写表示相对坐标。例如 d="M50,50 L150,50 L100,130 Z" 绘制一个三角形。

三种主流方式：① CSS 动画——使用 @keyframes 和 animation 属性，支持 transform、opacity、stroke-dasharray 等属性的过渡，最简单常用；② SVG SMIL 动画——通过 <animate>、<animateTransform> 等元素直接在 SVG 内部定义动画，无需 CSS；③ JavaScript——使用 GSAP、anime.js 等库或原生 JS 操控 SVG DOM，实现复杂交互。推荐优先使用 CSS 动画，兼容性好且性能优秀。

本工具提供完整的 SVG 在线编辑体验：支持直接编写 SVG 代码并实时预览渲染结果；内置圆形、矩形、椭圆、线条、多边形、路径、文本等快捷插入按钮；提供心形、五角星、房子、花朵等丰富模板；支持缩放预览（25%-300%）；可一键下载为 .svg 文件或复制代码到剪贴板；棋盘格背景帮助感知透明区域；移动端响应式适配，随时随地编辑矢量图形。

fill-rule 决定复杂路径（自相交或包含子路径）的填充区域判定规则。有两个值：nonzero（默认）——从某点向任意方向发出一条射线，根据穿越路径的方向计数，结果非零则填充；evenodd——统计穿越次数，奇数次则填充。最直观的例子是绘制一个同心圆环：使用两条方向相反的圆形路径配合 fill-rule="evenodd" 即可实现镂空效果，无需使用复杂的路径减法。

提示：编辑器中输入完整的 <svg> 标签可获得最佳预览效果。若不包含 <svg> 标签，工具会自动包装默认的 viewBox。按 Ctrl+S（Mac: ⌘S）可快速下载 SVG 文件。

🔧 相关工具