在我们阅读这篇文章之前，我们需要思考下，我们为什要去了解SVG，阅读了这篇文章是否可以给我们带来帮助。

1. 如果你想要一张 css或者JavaScript可以控制的图片，那么你可以考虑SVG。

2. 如果你期望图片的质量不会因为放大或缩小而降低，那么你可以考虑SVG。

3. 如果你期望网页对残障人士和视力受损的用户有更好的体验，那么你可以考虑SVG。

4. 如果你期望图片在高清设备还是低分辨率设备上，都能保持清晰和细腻的图像质量，那么你可以考虑SVG。

1. 矢量图

我们在学习SVG之前，需要先了解一下位图和矢量图。

简单来说：

• 位图：由像素点组成的图像，放大图像会失真，canvas就是位图效果。
• 矢量图：由数学公式(通常是XML)来描述图像，放大图像不会失真。

详细来说：

• 位图：也称为像素图，是由一个个像素点组成的图像。每个像素点都有特定的颜色和位置，这些信息被编码并存储在文件中。位图的显示效果取决于像素的数量和密度，即分辨率。一般来说，位图主要用于表示细节丰富，颜色和亮度变化多的图像，如照片，自然风景等。
• 矢量图：使用数学公式(通常是XML)来描述图像，而不是像位图那样使用像素矩阵。这些数据公式决定了图像的形状，线条和填充样式。由于矢量图的每个元素都是由数学公式定义的，因此它们可以在不同尺寸和分辨率下保持清晰度。这种类型的图像在缩放，旋转或以其他方式变换时不会失去细节或者质量。

2. SVG

SVG究竟什么？

是Scalable Vector Graphics的缩写，意思是可缩放矢量图形。

这是一种基于XML的二维矢量图形标准，由W3C开发的。

对于初学者来说，可以将SVG理解为一套新的HTML标签。

所以我们可以使用css和JavaScript来对标签进行操作。

很多小伙伴可能已经忘记了XML，我们回顾一下：
XML(可扩展标记语言)是一种用于描述数据的标记语言，它使用一系列简单的标记来描述数据，这些标记可以用来表示不同类型的数据元素，如标题，作者，价格等。

3. 优势

SVG的优势：

1. 可扩展性和响应能力：SVG是使用形状，数字和坐标在浏览器中渲染图形，这使得它具有分辨率无关性和无限可伸缩性。不管我们画了什么图形，不论用户将页面放的多大，图形都不会失真，只是比例变化了而已。
2. 可编程性和交互性：SVG是完全可编辑和脚本可编写的，我们可以通过css和JavaScript将各种动画和交互添加到绘图中。
3. 无障碍：SVG文件是基于文本的，可以进行搜索和索引，这使得他们可以通过屏幕阅读器，搜索引擎和其他设备阅读。
4. 性能：与GIF，JPG和PNG相比，SVG通常是较小的文件。

4. 劣势

SVG的劣势：

设计复杂性：SVG需要具备一定的设计和制作技巧，与位图相比，SVG的设计难度较大，需要更高的技术水平。

浏览器兼容性：在一些旧版浏览器中，可能存在对SVG的兼容性问题。

渲染速度：SVG复杂度过高会降低页面渲染速度。

5. 使用方式

对于前端开发的我们，要如何去使用SVG呢？

SVG归根结底来说和JPG，PNG一样，也是一种图像格式，所以我们可以在HTML中，将SVG的路径设置为的src属性。

我们也可以将SVG的代码放在HTML中，我们完全可以把SVG的代码看做成我们的HTML标签。

例如：

我们也可以通过css的background-image或者伪元素，将SVG图片作为背景图像。

6. 使用场景

1. 图标和徽标：由于SVG可以无损缩放，所以非常适合用来做网站的图标和徽标，无论是在大屏幕还是小屏幕上，SVG都能保证清晰度。
2. 插画：任何钢笔或铅笔制作的传统绘图，都可以完美转化为SVG格式。
3. 动态图形：SVG的脚本特性使它可以用来创建动态的，交互式图形。
4. 之前我做过空调的SVG图片，然后由JavaScript控制空调上的开关，温度，模式。
5. 地图和图表：SVG可以绘制地图和图表，然后和JavaScript进行数据交互。
6. 游戏：虽然SVG不是专门用来做游戏的，但是一些游戏开发者会用SVG来制作游戏中的图形。

总的来说，任何需要保持清晰度，动态交互和无损缩放的图形场景，都可以考虑使用SVG。

7. Canvas与SVG

Canvas和SVG都是用于在网页上绘制图形的工具，但它们在许多方面都存在显著的差异。以下是对Canvas和SVG的对比：

1. 基本概念：
2. Canvas：是HTML5提供的 标签，使用JavaScript在网页上绘制图形。它主要通过像素进行渲染，不支持事件处理器。
3. SVG：全称为可伸缩矢量图形（Scalable Vector Graphics），是基于XML的二维图形语言。它由许多节点构成，每个被绘制的图形都被视为一个对象，如果SVG对象的属性发生变化，浏览器能够自动重现图形。
4. 特点：
5. Canvas： 依赖分辨率。 不支持事件处理器。 弱的文本渲染能力。 能够以 .png 或 .jpg 格式保存结果图像。 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
6. SVG： 基于矢量，能够很好地处理图形大小的改变。 不支持事件处理器。 弱的文本渲染能力。 能够以 .png 或 .jpg 格式保存结果图像。
7. 性能：
8. Canvas的历史没有SVG悠久，它是H5新增的标签，而SVG已经存在十几年。
9. SVG图形节点足够多时，渲染会比较慢，而Canvas性能好一些。
10. 其他差异：
11. Canvas适合带有大型渲染区域的应用程序（如谷歌地图）。
12. SVG的复杂度高可能会减慢渲染速度（任何过度使用DOM的应用都不快）。

总结：Canvas和SVG各有其优势和适用场景。Canvas更适合图像密集型的游戏和需要高效渲染的应用，而SVG更适合处理矢量图形和大型渲染区域。

8. 实战一

说了这么多，我们来开始实战，我们要在HTML中，画出一个SVG图像。

Feng SVG

 

运行后：

代码解读：

1. 是表示SVG代码，相当于开始标签和结束标签，这是根元素。
2. width 和 height 属性可设置此 SVG 的宽度和高度。
3. version 属性可定义所使用的 SVG 版本。
4. xmlns 属性可定义 SVG 命名空间。
5. baseProfile 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。
6. SVG 的 用来创建一个矩形，通过 fill 把背景颜色设为黄色。
7. SVG 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r 属性定义圆的半径。 一个半径 80px 的绿色圆圈 绘制在红色矩形的正中央 （向右偏移 150px，向下偏移115px）。
8. stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽，红色边框。
9. fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

9. 实战二

我们还可以在线设计SVG图片，我们可以直接使用该图片或者拷贝其代码复制到我们的代码中。

SVG在线编辑： c.runoob.com/more/svgedi…

10. SVG的基本形状

10.1 矩形

示例一：

正常的矩形

效果：

代码解析:

• ：这是一个矩形元素，用于在SVG图像中绘制矩形。
• width="300" 和 height="100"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是300像素，高度是100像素。
• style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)"：这设置了矩形的样式。 fill:rgb(122,122,0)：设置填充颜色为RGB值(122,122,0)的颜色，这是一种黄色调的颜色。 stroke-width:2：设置线条宽度为2像素。 stroke:rgb(0,0,0)：设置线条颜色为RGB值(0,0,0)的颜色，这是一种黑色。

综上，这段代码会在SVG图像中绘制一个宽度为300像素、高度为100像素、填充颜色为黄色调、线条宽度为2像素、线条颜色为黑色的矩形。

示例二：

填充和边框的透明度

效果：

代码解析:

• ：这是一个矩形元素，用于在SVG图像中绘制矩形。
• x="50" 和 y="20"：这两个属性定义了矩形左上角的坐标（x, y）。在这个例子中，坐标是(50, 20)。
• width="150" 和 height="150"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是150像素，高度是150像素。
• style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5"：这设置了矩形的样式。 fill:blue：设置填充颜色为蓝色。 stroke:red：设置线条颜色为红色。 stroke-width:5：设置线条宽度为5像素。 fill-opacity:0.5：设置填充透明度为0.5，这意味着矩形将是半透明的。 stroke-opacity:0.5：设置线条透明度为0.5，这意味着线条将是半透明的。

综上，这段代码会在一个SVG图像中绘制一个左上角坐标为(50, 20)、宽度为150像素、高度为150像素、填充颜色为蓝色、线条颜色为红色、线条宽度为5像素、填充透明度和线条透明度都为0.5的矩形。

示例三：

整个元素的透明度

效果：

代码解析:

• ：这是一个矩形元素，用于在SVG图像中绘制矩形。
• x="50" 和 y="20"：这两个属性定义了矩形左上角的坐标（x, y）。在这个例子中，坐标是(50, 20)。
• width="150" 和 height="150"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是150像素，高度是150像素。
• style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4"：这设置了矩形的样式。 fill:blue：设置填充颜色为蓝色。 stroke:pink：设置线条颜色为粉红色。 stroke-width:5：设置线条宽度为5像素。 opacity:0.4：设置透明度为0.4，这意味着矩形将是半透明的。

综上，这段代码会在一个500x500像素的SVG图像中绘制一个左上角坐标为(50, 20)、宽度为150像素、高度为150像素、填充颜色为蓝色、线条颜色为粉红色、线条宽度为5像素、透明度为0.4的矩形。

示例四：

圆角矩形

效果：

代码解析:

• ：这是一个矩形元素，用于在SVG图像中绘制矩形。
• x="50" 和 y="20"：这两个属性定义了矩形左上角的坐标（x, y）。在这个例子中，坐标是(50, 20)。
• rx="20" 和 ry="20"：这两个属性定义了矩形的圆角半径。在这个例子中，矩形的圆角半径是20像素。
• width="150" 和 height="160"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是150像素，高度是160像素。
• style="fill:red;stroke:black;stroke-width:1;opacity:0.5"：这设置了矩形的样式。 fill:red：设置填充颜色为红色。 stroke:black：设置线条颜色为黑色。 stroke-width:1：设置线条宽度为1像素。 opacity:0.5：设置透明度为0.5，这意味着矩形将是半透明的。

综上，这段代码会在一个500x500像素的SVG图像中绘制一个左上角坐标为(50, 20)、宽度为150像素、高度为160像素、填充颜色为红色、线条颜色为黑色、线条宽度为1像素、透明度为0.5的圆角矩形。

10.2 圆形

示例：

效果：

代码解析:

• ：这是一个圆形元素，用于在SVG图像中绘制圆形。
• cx="100" 和 cy="50"：这两个属性定义了圆心的坐标（x, y）。在这个例子中，圆心的坐标是(100, 50)。
• r="40"：这个属性定义了圆的半径，单位是像素。在这个例子中，圆的半径是40像素。
• stroke="red"：这个属性定义了圆的边框颜色。在这个例子中，圆的边框颜色是红色。
• stroke-width="2"：这个属性定义了圆的边框宽度。在这个例子中，圆的边框宽度是2像素。
• fill="blue"：这个属性定义了圆的填充颜色。在这个例子中，圆的填充颜色是蓝色。

综上，这段代码会在一个SVG图像中绘制一个圆心坐标为(100, 50)、半径为40像素、边框颜色为红色、边框宽度为2像素、填充颜色为蓝色的圆形。

10.3 椭圆

示例：

效果：

代码解析:

• ：这是一个椭圆元素，用于在SVG图像中绘制椭圆。
• cx="300" 和 cy="80"：这两个属性定义了椭圆的中心点坐标（x, y）。在这个例子中，中心点坐标是(300, 80)。
• rx="100" 和 ry="50"：这两个属性定义了椭圆的长轴和短轴半径。在这个例子中，长轴半径是100像素，短轴半径是50像素。
• style="fill:red;stroke:purple;stroke-width:2"：这设置了椭圆的样式。 fill:red：设置填充颜色为红色。 stroke:purple：设置线条颜色为紫色。 stroke-width:2：设置线条宽度为2像素。

综上，这段代码会在一个500x500像素的SVG图像中绘制一个中心点坐标为(300, 80)、长轴半径为100像素、短轴半径为50像素的红色椭圆，线条颜色为紫色，线条宽度为2像素。

10.4 线

示例：

效果：

代码解析:

• ：这是一个线段元素，用于在SVG图像中绘制线段。
• x1="0" 和 y1="0"：这两个属性定义了线段的起始点坐标（x, y）。在这个例子中，起始点坐标是(0, 0)。
• x2="200" 和 y2="200"：这两个属性定义了线段的终点坐标（x, y）。在这个例子中，终点坐标是(200, 200)。
• style="stroke:black;stroke-width:5"：这设置了线段的样式。 stroke:black：设置线条颜色为黑色。 stroke-width:5：设置线条宽度为5像素。

综上，这段代码会在一个SVG图像中绘制一条从(0, 0)到(200, 200)的黑色线段，线条宽度为5像素。

11.5 折线

示例一：

效果：

代码解析:

• ：这是一个多边形线条元素，它使用points属性定义多边形的顶点。
• points="20,20 40,25 60,40 80,10 120,140 200,180"：这定义了多边形的顶点。每个顶点由两个坐标值（x和y）组成，它们之间用空格分隔，并且每个顶点之间用空格分隔。例如，20,20定义了一个顶点在(20,20)的位置。
• style="fill:none;stroke:black;stroke-width:3"：这设置了多边形的样式。 fill:none：设置填充颜色为透明（不填充）。 stroke:black：设置线条颜色为黑色。 stroke-width:3：设置线条宽度为3像素。

综上，这段代码会在一个SVG图像中绘制一个黑色的折线。这个折线有6个点，形状大致为一个不规则的六边折线。注意：因为设置了fill:none，所以该多边形线段不会进行填充，只显示其黑色边框。

示例二：

画一个五角星

效果：

代码解析:

• ：这是一个多边形线条元素，它使用points属性定义多边形的顶点。
• points="100 10,40 180,190 60,10 60,160 180"：这定义了多边形的顶点。每个顶点由两个坐标值（x和y）组成，它们之间用空格分隔，并且每个顶点之间用逗号分隔。例如，100 10定义了一个顶点在(100,10)的位置。
• style="fill:blue;stroke:blue;stroke-width:1"：这设置了多边形的样式。 fill:blue：设置填充颜色为蓝色。 stroke:blue：设置线条颜色为蓝色。 stroke-width:1：设置线条宽度为1像素。

综上，这段代码会在一个300x300像素的区域内绘制一个蓝色的多边形。这个多边形有5个顶点，形状大致为一个不规则的五边形。

10.6 多边形

示例一：

效果：

代码解析:

• ：这是一个多边形元素，用于在SVG图像中绘制多边形。
• points="200,10 250,190 160,210"：这个属性定义了多边形的顶点坐标。在这个例子中，多边形有三个顶点：(200,10), (250,190) 和 (160,210)。
• style="fill:red;stroke:purple;stroke-width:1"：这设置了多边形的样式。 fill:red：设置填充颜色为红色。 stroke:purple：设置线条颜色为紫色。 stroke-width:1：设置线条宽度为1像素。

综上，这段代码会在一个500x210像素的SVG图像中绘制一个由三个顶点定义的多边形，填充颜色为红色，线条颜色为紫色，线条宽度为1像素。

示例二：

画一个五角星

效果：

代码解析:

• ：这是一个多边形元素，用于在SVG图像中绘制多边形。
• points="100 10,40 180,190 60,10 60,160 180"：这个属性定义了多边形的顶点坐标。在这个例子中，多边形有七个顶点：(100,10), (40,180), (190,60), (10,60), (160,180)。
• style="fill:none;stroke:black;stroke-width:5"：这设置了多边形的样式。 fill:none：设置填充颜色为无色。 stroke:black：设置线条颜色为黑色。 stroke-width:5：设置线条宽度为5像素。

综上，这段代码会在一个300x300像素的SVG图像中绘制一个由七个顶点定义的多边形，没有填充颜色，线条颜色为黑色，线条宽度为5像素。

10.7 路径

路径数据：

1. M (moveto): 该命令开始一个新的路径，并设置当前点。其后的命令将从这个点开始绘制线条或曲线。
2. L (lineto): 该命令从当前点绘制一条直线到指定点。
3. H (horizontal lineto): 该命令从当前点绘制一条水平线到指定x坐标。y坐标保持不变。
4. V (vertical lineto): 该命令从当前点绘制一条垂直线到指定y坐标。x坐标保持不变。
5. C (curveto): 该命令绘制一个贝塞尔曲线，需要提供三个点：控制点和结束点。
6. S (smooth curveto): 该命令绘制一个平滑的贝塞尔曲线，它使用前一个点和当前点作为控制点，并连接到下一个点。
7. Q (quadratic Bézier curve): 该命令绘制一个二次贝塞尔曲线，需要提供两个点：控制点和结束点。
8. T (smooth quadratic Bézier curveto): 该命令绘制一个平滑的二次贝塞尔曲线，它使用前一个点和当前点作为控制点，并连接到下一个点。
9. A (elliptical Arc): 该命令绘制一个椭圆弧，需要提供起始角度、结束角度、半径和旋转角度等参数。
10. Z (closepath): 该命令关闭路径，将当前点连接到起始点，形成一个封闭图形。

示例：

画一个三角形

效果：

代码解析:

• ：这是一个路径元素，用于绘制线条和曲线。
• d="M150 0 L75 200 L205 270 Z"：这是路径的指令。这些指令定义了图形的形状和位置。 M150 0：移动到(150, 0)点。 L75 200：从当前点绘制一条直线到(75, 200)点。 L205 270：从当前点绘制一条直线到(205, 270)点。 Z：关闭路径，将当前点连接到起始点，形成一个封闭图形。

综上，这段代码将在SVG图像中绘制一个由三个直线段组成的封闭图形，其顶点坐标分别为(150, 0)，(75, 200)和(205, 270)。

11. 设置样式

11.1 属性样式

直接在元素属性上设置样式，比如将矩形填充色改成粉红

11.2 内联样式

把所有样式写在 style 属性里

11.3 内部样式

将样式写在

11.4 外部样式

将样式写在 .css 文件里，然后在页面中引入该 CSS 文件。

12. SVG动画

SVG动画可以通过多种方式实现，包括使用SMIL、CSS和JavaScript。

12.1 SMIL

能让SVG不靠JavaScript与CSS就能动起来是因为使用了SMIL（Synchronized Multimedia Integration Language），是W3C的标准之一，旨在以XML格式提供多媒体的交互表现（白话点其实就是动画），是Web上动画的开路先锋，启发了Web animation与CSS animation。SVG与SMIL的开发团队合作，让SVG能利用SMIL达到如下效果：

1. 动画化元素的数值属性
2. 动画化元素的transform属性（平移、旋转）
3. 动画化元素颜色
4. 轨迹路线移动动画，类似于CSS中的offset-path

光是这些特性就够我们组合出很多种的动画了， 使用方法也不难，只要在SVG元素内置入以下四种元素即可操作动画：

例如：

代码解析：

这段代码用于描述一个圆形，并在特定时间改变其中心点的y坐标。

2. : 这是一个SVG元素，用于绘制一个圆形。
3. cx="56.7573" 和 cy="92.8179": 定义了圆心的x和y坐标。这里，圆心的初始位置是(56.7573, 92.8179)。
4. r="2": 定义了圆的半径为2单位。
5. fill="black": 定义了圆的填充颜色为黑色。
6. stroke="black": 定义了圆的边框颜色为黑色。
7. stroke-width="1": 定义了圆的边框宽度为1单位。
9. : 这是一个SVG动画元素，用于改变元素的属性。
10. attributeName="cy": 指定要改变的属性是cy，即中心点的y坐标。
11. to="105.7318": 指定新的属性值，即圆心的y坐标将变为105.7318。
12. begin="2s": 指定动画开始的时间，这里表示动画将在2秒后开始。

综上，这段代码绘制了一个半径为2单位、填充和边框颜色均为黑色的圆形，并设置了一个动画，使圆心的y坐标在2秒后从92.8179变为105.7318。

12.2 基于 CSS 的 SVG 动画

通过设置一组 CSS 样式和关键帧，可以实现基于时间或基于事件的 SVG 动画。这种方式实现的 SVG 动画相对简单，具有易于实现、可读性好、易于维护、性能良好等优点。

下面是一个基于 CSS 的 SVG 动画示例，实现了一个圆形的旋转动画：

12.3 基于 JavaScript 的 SVG 动画

通过 JavaScript，可以对 SVG 图形进行更加自由和复杂的动画操作。JavaScript 可以对 SVG 元素的各种属性，如位置、大小、颜色、透明度、路径等进行操作，配合定时器和事件监听等方法，实现丰富多彩的 SVG动画。

下面是一个基于 JavaScript 的 SVG 动画示例，实现了一个小球自由落体，碰撞弹跳的效果：

13. API一览表

14. 总结

总的来说，SVG是一种强大的图形描述语言，具有可缩放性、交互性、可访问性、灵活性和跨平台兼容性等特点和优势。它可以用于创建各种复杂的二维矢量图形和富交互的Web应用，为Web设计和开发提供了更多的可能性。

随着Web技术的不断发展，相信SVG的应用范围还将不断扩大。

原文链接：
https://juejin.cn/post/7322344486159106100