"不畏惧，不将就，未来的日子好好努力"——大家好！我是小芝麻😄
# 一、SVG简介
# 1、什么是SVG
SVG全称Scalable Vector Graphics(可缩放矢量图形)。它是一种用来描述二维矢量图形的XML标记语言。
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
# 2、特点及优势
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
# 3、浏览器兼容
支持 chrome、Safari、foxfire1.5、Opera9、ie9 及以上浏览器，但是SVG SMIL动画 IE浏览器(包括IE11)整体不支持（对于移动端来说，基本支持）
# 二、SVG的使用方式
对于直接支持SVG的浏览器，SVG主要采用两面两种呈现的方式。
# 1、内联到HTML
SVG是标准的HTML元素，直接写到HTML中就可以了，像下面这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="black"/>
<text x="50%" y="50%" fill="yellow" style='dominant-baseline:middle;text-anchor:middle;font-size:36px'>Hello world</text>
</svg>
</body>
</html>
# 2、独立SVG文件
独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。如下格式：
- 1、在浏览器直接打开
- 2、在HTML中使用 <img> 标签引入
<img src="./1.svg">
- 3、作为 CSS 背景使用
.box{
width: 300px;
height: 200px;
background-image: url('./1.svg');
}
- 4、使用 <embed> <object> <iframe> 引入
<embed src="1.svg" width="300" height="100" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
- embed 优势：所有主要浏览器都支持，并允许使用脚本
- embed 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<object data="1.svg" width="300" height="200" type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
- object 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
- object 缺点：不允许使用脚本。
<iframe src="1.svg" width="300" height="200"></iframe>
- iframe 优势：所有主要浏览器都支持，并允许使用脚本
- iframe 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
# 三、SVG的渲染
# 1、渲染顺序
SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。
在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后续元素被绘制在先前绘制的元素之上。=> “后来居上”
<svg style="outline: 2px solid red;" width="200" height="200">
<rect x="0" y="0" width="150" height="150" fill="yellow"/>
<rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
# 2、渲染步骤
渲染单个图形元素时: (组的渲染同理)
- 1、创建一个透明黑色的临时画布
- 2、将元素绘制到该临时画布上
- 3、应用相应的滤镜效果
- 4、设置相应的剪裁、遮罩、不透明度效果
- 5、将修改后的临时画布组合到背景中
# 3、支持渲染的三种图像类型
SVG 支持三种基本的图像元素：矢量图形、文字、点阵图像。
- 矢量图形：指直线曲线色块的组合；
- 文字：指文本方式的字符
- 点阵图像：指一个矩形区域像素点颜色值的描述块，表现为一个二维数组。
下一篇《SVG坐标系简介》我们再见