基本概念
svg(Scalable Vector Graphics)是一种基于XML语法的图像格式，全称是可缩放矢量图，其它图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真.SVG是面向图形，HTML时面向文本。
嵌入到HTML
SVG可以写在一个独立的文件中，然后用img, object, embed, iframe等标签插入网页
<img src="circle.svg"> <object id="object" data="circle.svg" type="image/svg+xml"></object> <embed id="embed" src="icon.svg" type="image/svg+xml"> <iframe id="iframe" src="icon.svg"></iframe>
SVG文件可以转为base64编码，然后作为Data URI写入网页
<img src="data:image/svg+xml;base64,[data]" />
SVG书写的注意点
- SVG的元素和属性必须按照标准格式来写，因为XML是确认大小写的
- SVG里的属性值必须用引号引起来，就算是数值也必须这么做
- SVG图像的默认大小是300像素（宽）x 150像素（高）
- 后面的元素会渲染在前面元素之上
SVG的所有元素
SVG的所有元素
SVG的所有属性
SVG的所有属性
常用的形状元素
其实上图只是对一些常用svg标签的初步认识，因为svg所提供的标签不止这些，而且比如path标签是在svg中最为通用的形状标签，因为它可以通过设置路径画出其它图形，比如矩形，圆，椭圆，多边形，多线段，甚至是复杂的贝塞尔曲线等等
path
第一次看到svg的标签的时候，打开控制台，也是一脸懵逼，首先这里面的d属性是个啥，M是啥，L是啥，Z是啥，H是啥，V是啥，C是啥，S是啥，Q是啥，T是啥，A是啥，我... 打扰了，打扰了