转载自：https://www.yuque.com/gmyoon/dfy2l5/eukwg8#ZzYs0

什么是SVG

SVG诞生于1999年，是一种 XML 语言，即可扩展标记语言，类似XHTML，即SVG，可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变、合成、或者通过滤镜完全改变外观。

为什么学SVG？它有什么优势？

比起其他的图像格式（例如jpg，gif），SVG的本身优点是：

1. 可以使用任何文本编辑器来创建绘画SVG。
2. 可以搜索、索引、脚本化、压缩SVG图像。
3. SVG图像可以扩展，可以在任何分辨率上高质量显示。
4. SVG图像支持缩放，且不会失去任何质量。
5. SVG是开放标准，是纯XML文件。

绘画一个简单的SVG

<svg width="300" height="200" version="1.1" xmlns="<http://www.w3.org/2000/svg>">
  <rect width="100%" height="100%" fill="blue" />
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

• 以上绘制一个SVG基本流程
  • 绘制一个svg根标签
  • 绘制一个rect标签，它是一个绘制矩形的标签，宽高设置100%也就是把父级元素占满，fill属性为设置背景颜色
  • 绘制一个circle标签，它是一个绘制圆形的标签，cx和cy是偏移的属性（默认是0，即圆心在坐标0，0中绘画），r是半径大小

SVG渲染规则

svg里的元素渲染顺序、规则是后来居上，越后面渲染的元素越前。

同一个位置创建了 50 * 50 的两个矩形，由于越后面的元素越可见，因此我们只能看到粉色色的矩形，蓝色的矩形被它遮住了。

SVG文件类型

• svg文件分为两种形式
  • 普通SVG文件：包含SVG标准的文本文件，后缀名通常为.svg。
  • 压缩版SVG文件：某种场景下的SVG文件可能很大，SVG标准是允许gzip压缩的，后缀名通常为.svgz（注意的是在FireFox不能再本地上加载svgz文件，除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG）。