千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

SVG（可缩放矢量图）

SVG是一种基于XML语法的图像格式。一般我们看到的jpg、png等格式的图片是基于像素对图像进行描述的，这种图片存在着放大失真问题。

而SVG是对图片的形状描述，本质上是文本文件，体积较小，放大不会失真。

SVG图片制作

在VSCODE编辑器中，我们可以发现一个SVG图片是由代码绘制出来的，也就是通过SVG标签来绘制SVG图形。

常用的形状如下：

矩形：rect

圆形：circle

椭圆：eclipse

线条：line

多线条：polyline

多边形：polygon

路径：path

绘制圆角矩形（单标签）

<rect />

属性：rx :定义圆角x轴方向的半径长度

属性：ry ：定义圆角y轴方向的半径长度

以下是大部分SVG标签存在的通用属性

width：定义矩形宽度（多用于矩形），如100px

height：定义矩形高度（多用于矩形），如100px

fill：定义矩形的填充颜色（支持颜色英文单词，rgb颜色，和十六进制表示的颜色）

stroke-width：定义矩形的边框宽度

stroke：定义矩形边框的颜色

绘制圆形

<circle />

属性：cx:定义圆形中心的x坐标。

cy：定义圆形中心的y坐标

默认(cx,cy)为（0,0）

r：定义圆形的半径。

同样有边框颜色，边框宽度和背景色等通用属性。

绘制椭圆形

<ellipse />

属性：cx:定义团员中心的x坐标

cy：定义椭圆中心的y坐标

rx:定义水平半径

ry:定义垂直半径

绘制线条

<line />

属性：

x1

y1

x2

y2

由（x1,y1）为起点，以(x2,y2)为终点。

这里注意和数学中的坐标系是不同的，这里是以左上角的坐标为（0,0），一直往右下进行绘制的。

绘制多边形

<polygon />

属性：

points：定义多个坐标，至少要有三个坐标。毕竟一个坐标为点，两个坐标为线，三个坐标才能绘制一个平面多边形。

例如points="220,100 231,102 30,45"

绘制多线条

<polyline />

这里和多边形类似，也是有points属性，不同的地方为多边形的图形默认会闭合的，而多线条除非自己写相同坐标才会闭合。