全面认识 SVG - 创建/编辑/修改 SVG - 详细教程

🎉 本文将通俗易懂的介绍 SVG 是什么，怎么创建，编辑和修改已有的 SVG 文件，并分析对比 SVG 与 PNG、JPG 等图片格式的区别，介绍在实际开发中如何使用 SVG？以及常见的一些对于 SVG 的误区和解惑。

一、什么是 SVG？

SVG，全称是 Scalable Vector Graphics（可缩放矢量图形），是一种基于 XML 的图像格式。与常见的 JPG、PNG 这类“位图”不同，SVG 是用数学公式和标签描述图形的，所以它可以无限缩放而不失真。

简单理解：

PNG / JPG = 由像素组成（放大会糊）
SVG = 由路径、线条、形状组成（放大依然清晰）

比如一个圆，在 SVG 里不是一堆像素，而是类似：

<circle cx="50" cy="50" r="40" />

浏览器根据这些参数实时渲染出图形。

二、SVG 的核心原理（通俗讲）

本质：SVG 就是一段“描述图形的代码”

SVG 文件本质是一个文本文件（.svg），里面写的是 XML 标签，而不是二进制图片数据。

例如：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>

浏览器读取这段代码后，会解析：

画布大小：100×100
在坐标(10,10)画一个矩形
宽高 80
填充红色

然后实时渲染成图像。

这也是为什么：

SVG 体积可以很小
可以直接用文本编辑
可以用 CSS / JS 控制动画和样式

三、SVG 的基本结构

一个标准 SVG 文件结构如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  图形元素
</svg>

常见组成部分：

1. svg 根标签

定义画布和坐标系统：

<svg width="200" height="200" viewBox="0 0 200 200">

关键属性：

width / height：显示尺寸
viewBox：内部坐标系统（非常重要）

2. 常见图形标签

矩形

<rect x="10" y="10" width="100" height="50" fill="blue"/>

圆形

<circle cx="50" cy="50" r="40" fill="green"/>

直线

<line x1="0" y1="0" x2="100" y2="100" stroke="black"/>

路径（最强大）

<path d="M10 10 L90 90 Z" fill="none" stroke="black"/>

path 是 SVG 的核心，几乎所有复杂图形最终都会转成 path。

四、怎么创建一个 SVG 文件（从零开始）

方法一：用文本编辑器创建（最直接）

步骤：

新建一个文件：test.svg
写入：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="orange"/>
</svg>

用浏览器打开即可显示图形

优点：

最轻量
可控性最强
适合开发者

方法二：用设计软件导出（最常见）

常见支持 SVG 的工具：

Adobe Illustrator
Figma
Inkscape

操作流程（通用）：

画图形
导出 → 选择 SVG 格式
得到标准 SVG 文件

方法三：用 HTML 直接写内联 SVG（前端常用）

<svg width="100" height="100">
  <rect width="100" height="100" fill="red"></rect>
</svg>

优点：

可以用 CSS 控制颜色
可以用 JS 操作动画
SEO 友好

五、怎么编辑 SVG 文件（已有的 SVG）

方法一：直接用代码编辑（最推荐）

因为 SVG 是文本文件，你可以用：

VS Code
Notepad++
任何文本编辑器

例如原文件：

<circle cx="50" cy="50" r="40" fill="blue"/>

修改颜色：

fill="red"

刷新浏览器即可看到变化。

方法二：用矢量软件可视化编辑

适合复杂图标：

打开 SVG
修改路径、节点、颜色
再导出 SVG

这种方式不会破坏结构，适合设计稿修改。

方法三：在线编辑 SVG（快速修改）

可以用在线工具：

SVG Viewer
SVG Editor
CodePen（直接改代码实时预览）

适合：

改颜色
改尺寸
简单路径调整

六、修改已有 SVG 的常见场景（实战）

1. 修改颜色（最常见）

找到：

fill="#000000"

改为：

fill="#ff0000"

或直接删除 fill，用 CSS 控制：

svg path { fill: red; }

2. 修改大小（不失真关键）

错误方式：

width="100" height="100"

更推荐：
只改显示尺寸，保留 viewBox：

<svg viewBox="0 0 100 100" width="300">

这样放大不会变形。

3. 精简体积（优化 SVG）

设计软件导出的 SVG 通常很臃肿：

多余 metadata
无用 group
多余空格

可以用优化工具：

SVGO（自动压缩）
在线 SVG Optimizer

优化后体积可能减少 50%+。

七、SVG 的高级原理：为什么可以无限缩放？

因为 SVG 使用的是“矢量坐标系统”。

举例：

viewBox="0 0 100 100"

意思是：

内部坐标从 0 到 100
不管显示 100px 还是 1000px
图形都会按比例计算重绘

而 PNG 是固定像素点，一旦放大只能拉伸像素。

八、SVG 与 PNG/JPG 的本质区别

对比项	SVG	PNG/JPG
是否失真	永不失真	会失真
文件本质	文本代码	像素数据
可编辑性	极强（可改代码）	几乎不能
动画支持	原生支持	不支持
体积	简单图形极小	通常较大

九、在实际开发中如何使用 SVG？

1. 作为图片使用

<img src="icon.svg">

2. 作为背景图

background-image: url(icon.svg);

3. 内联使用（最强控制）

<svg>
  <path d="..."></path>
</svg>

优点：

可动画
可交互
可动态改颜色

十、常见误区（新手一定会踩）

误区一：SVG 不是图片？

错。
它既是图片，也是代码。

误区二：SVG 一定很小？

不一定。
复杂路径（比如复杂插画）可能比 PNG 还大。

误区三：修改 SVG 会很难？

其实最简单：

改颜色：改 fill
改线条：改 stroke
改大小：改 viewBox / width

十一、总结

SVG 的本质不是“图片文件”，而是一段描述图形的 XML 代码。浏览器根据这些代码实时渲染出图像，因此它具备：

无限缩放不失真
可代码编辑
可动画与交互
体积可优化

创建 SVG 可以用代码手写、设计软件导出或 HTML 内联；编辑 SVG 可以直接改文本、用矢量软件修改路径，或在线工具实时调整。掌握 viewBox、path、fill、stroke 这几个核心概念后，你就能轻松创建、修改和优化任何 SVG 文件。

一、 什么是 SVG？