爱妃给朕躺下
爱妃给朕躺下

SVG 基础属性与应用

SVG：Scalable Vector Graphics，可伸缩矢量图形

前言

为了在网络设备上传播各种声音、图像等媒体文件，有了各种针对不同需求的文件格式——图片、视频、音频等都有各种格式，应对高效传输、低空间占用、各类媒体中传输使用等场景。

图片，就有许多格式，例如普通用户最为熟悉的 JPEG、PNG、GIF。尽管这些格式与大家经常见面，但普通用户根本不知道这些图片格式的区别与作用。这里简单说一下，JPEG 是有损压缩，对原图实行大幅度的压缩，以减少图片的空间占用，但同时也会对画质产生较大的影响。PNG 格式的图片可以理解为类似剪纸，没有图像的区域是透明的，可以与背景有效融合。有时你会在某些地方看到透明头像，使用的就是 PNG 格式的图片。至于 GIF ，相信大家都熟悉，就是一个短暂的高压缩的动图，大家在某些软件的搞笑区或者社交软件的斗图区看得很多。

除上述格式，还有 PSD 类似的图片格式，有特殊用途，PSD 主要用于 PS 软件，保存高保真的图片，一般是商业化使用，其他软件基本不支持。

但今天的主题并不是以上这些格式。为了数字媒体的网络化传播，许多图像公司参与了 SVG 格式的标准制定。除此之外，人们发现，上面的图片格式在网络中传播时，要么是会因为放大模糊，要么是本身压缩得太厉害，或者是本身就很大，在一些场景下不是特别适用，比如放大画质不损失，且要求空间占用小的时候。

这种放大图像不模糊的形式类似于 PDF 文档。

为了满足上述需求，2003 年，W3C 与苹果、柯达、IBM、Adobe 等公司一起制定了 SVG 矢量图形标准。SVG 使用 XML （可扩展标记语言）定义图像，通过一系列参数在设备显示屏上规定图像的坐标，坐标矢量便会连接绘制出图像，放大缩小不影响画质。

因为使用 XML，SVG 图像很容易在 HTML 网页中使用。

一、HTML 中使用 SVG

需要强调的是，HTML 中使用的 SVG 的代码一般是专业的绘图软件自动生成的，在使用时只需要引入就好，SVG 的标签与属性非常繁杂，没有必要进行记忆，只需记忆一些常用属性，在实际开发中可以修改属性改变样式即可。

1. embed 标签

语法：

优势：所有主要浏览器都支持，并允许使用脚本

缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

该方法不常用。

2. object 标签

语法：

优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准

缺点：不允许使用脚本。

该方法不常用。

3. iframe 标签

语法：

优势：所有主要浏览器都支持，并允许使用脚本

缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

该方法不常用。

4. SVG 代码

语法：

该方法是最常用的方法，使用 SVG 标签如同普通的 HTML 标签，并且可以对 SVG 图像进行更改，只需要更改相关参数即可。但该方法需要对相关标签与属性熟练掌握。

二、SVG 相关标签与属性

SVG 使用 标签定义图形的绘制区域，要绘制的图形就写在 标签中。其可以设置宽高等属性，viewBox 属性用于设置 SVG 盒子，其有四个参数，例如：

其中前两个参数是 SVG 盒子的起始坐标，后两个代表盒子的宽高。

1. 矩形

语法：

xmlns 是 XML 的语法，规定一个命名空间，用于防止同名原素带来的歧义。

矩形使用标签 定义，其中 x、y 表示开始绘制的横纵坐标，width 与 height 表示图形的宽高。

2. 圆形

语法：

圆形使用 标签定义，cx、cy 表示圆心坐标，r 表示圆的半径。stroke 表示图形的边框，所有图形都可以使用该属性。与 CSS 中的 border 类似，后面会介绍它的相关属性。

3. 椭圆

语法：

椭圆使用 标签定义，属性与圆类似，不同的地方在于半径 r 的属性设置不同。椭圆使用 rx、ry 进行设置。fill 属性意为 “填充”，指图形的填充模式，类似于背景色。

4. 直线

语法：

直线使用 标签定义。两点确定一条直线，其中 x1、y1 是第一个点的坐标，x2、y2 是第二个点的坐标。这里的 stroke-width 定义线段的宽度。

5. 多边形

语法：

折线使用 标签进行定义，points 属性用于设置每个顶点的坐标。

6. 折线

语法：

折线使用 标签进行定义，points 属性用于设置每个折点的坐标。fill 设置折线的填充，一般设为 none，不设置的话会是黑色，填充为多个多边形。

7. 路径

语法：

路径使用 定义，用于绘制复杂的图形。id 表示路径的唯一身份，d 表示路径的绘制方式。有以下属性：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

8. 文本

语法：


  I love SVG

以上就是一些常用的绘制 SVG 图形的标签，当然，还有很多标签，例如 标签建立一个连接， 建立一个容器，类似