1.1.1 什么是SVG？
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG是一种使用xml技术描述图形的语言，使用 XML 格式定义图像。
SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG是一种基于xml语法的图像格式
SVG图像在放大的情况下图形不会失真
SVG的优点
SVG与canvas的区别：
SVG
不依赖分辨率
支持事件处理器（可绑定事件）
最适合大型渲染区域的应用程序（如：百度地图）
canvas
依赖分辨率
不支持事件处理器
最适合图像密集型的应用程序（游戏）
SVG是可伸缩的，高保真图形、无限放大且不会失真
SVG可通过文本编辑器创建和修改
SVG可被搜索、索引、脚本化和压缩
SVG可在任何的分辨率下被高质量地打印
SVG文件体积较小
SVG可在图像质量不下降的情况下被放大
1.1.2 vscode编辑器中的插件
vscode 写svg标签以及svg对应的基本图标标签，我们使用插件---SVG
vscode 预览，我们使用插件---SVG Snippets
方法：
输入 svg-对应的标签名
例如：
svg-svg ，会生成svg标签
svg-circle，会生成circle标签
svg-img，会生成image标签
等等
vscode 查看svg图形---SVGViewer(查看svg图)
Svg Preview：效果预览，需要选中.svg` 后缀的文件，右上角才会有按钮进入预览。
1.1.3 SVG在html中
在html中，使用svg，首先必须使用<svg>标签
使用<svg width="" height="" style="" xmlns="/2000/svg" version="1.1"><svg>元素
使用<svg>元素绘制图像时，这些元素必须定义<svg>元素中
写svg标签的时候，在html页面中直接 输入 svg-svg+回车。
直接在html嵌入SVG代码
<svg width="600" height="600" style="border:1px solid blue;"viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><circle cx="100" cy="100" r="40" fill="red" stroke="green" style=""/><circle cx="300" cy="300" r="60" fill="red" stroke="green" style=""/><circle cx="500" cy="500" r="30" fill="red" stroke="green" stroke-width="2" style=""/><!-- <image xlink:href="" x="" y="" height="" width=""/> --></svg>
预览：
Scalable Vector Graphics (SVG) 2 指定的标准
我们可以给svg标签，添加边框线，style="border: 1px solid blue;"让我们看到整体的svg的宽和高。
我们可以给svg标签，指定宽度和高度，width="600"height="600"。如果我们不指定宽度和高度。当前这个svg就是默认宽度椒300，高度是150, 和canvas画布的默认宽度和高度是一样的。
注意：在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。
链接到SVG文件
首先创建circle1.svg文件，里面代码如下：
<svg width="400" height="400" style="border:1px solid blue;margin:0 auto;"viewBox="" version="1.1"<!-- xmlns="/2000/svg"xmlns:xlink="/1999/xlink"> --><circle cx="150" cy="150" r="100" fill="orange" stroke="pink" stroke-width="5" style=""/></svg>
预览：
然后在html文件中，写a超链接标签，用 <a> 标签链接到一个 SVG 文件：链接到 SVG 文件，代码如下所示：
<a href="circle1.svg">查看 SVG 文件</a>
预览：
注意：
如果你的svg标签上，没有 以下属性设置，访问svg文件时，会报bug。
<svg viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink" />
报的错误如下所示：
svg代码也可以写在一个独立的文件中，然后在html文件中，用<img>、<object>、<embed>、<iframe>等标签插入网页
<embed src="circle1.svg" type="image/svg+xml" />
注意：<embed>
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<object data="circle1.svg" type="image/svg+xml"></object>
注意：<object>
优势：所有主要浏览器都支持，但是有些浏览器需要安装插件才支持，并支持HTML4，XHTML和HTML5标准
缺点：不允许使用脚本。
如果你用object标签去插入svg文件，我们首先用ie9去预览查看效果。
<iframe src="circle1.svg"></iframe>
注意：<iframe>
优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
其中embed和object设置边框线的现象
<a href="./cr1.svg">查看svg文件</a> <br><br><br><iframe src="./cr1.svg" width="400" height="400" frameborder="0"></iframe><br><br><br><embed src="./cr1.svg" type="image/svg+xml" style="border:10px dashed red"><br><br><br><object data="./cr1.svg" type="image/svg+xml"></object>
预览：
SVG常见属性
svg中的x、y、width和height属性定义这段SVG代码所表达的数据在绘制时所占用的空间大小（可视区大小）；svg中viewBox (0 0 200 200) :0 0 表示x轴和y有的起始位置，即可视区View中哪个位置开始显示（可见），后面200, 200 表示长和宽但是只是一个数量
用法要设置4个值：*viewbox="x, y, width, height"*，例子：
这里定义的画布尺寸是100x100px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，200宽200高的区域。这个200x200的区域，会放到100x100的画布上显示。于是就形成了缩小两倍的效果。
viewbox 里定义的，也就是可视区可见的；坐标 (0, 0) 说明在左上角开始截，100 x 100 就是这个框框的宽x高
<svg width="400" height="400" style="border:1px solid blue"viewBox="0 0 200 200" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><circle cx="150" cy="150" r="100" fill="orange" stroke="pink" stroke-width="5" style=""/></svg>
注意：
你绘制的图像的大小，不能比 我们指定的可视区域的viewBox="0 0 200 200"大小要大。 绘制的图像和 svg的宽度和高度没关系。
1.1.4 SVG有一些预定义的形状元素
SVG有一些预定义的形状元素，可被开发者使用和操作：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
矩形元素
<rect> 标签可用来创建矩形，以及矩形的变种
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
我们可以用属性，去设置这个矩形的边框线和填充色：
<svg width="" height=""viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><rect x="" y="" width="" height="" style=""/></svg>
我们可以用style行内样式，去设置这个矩形的边框线和填充色：
<svg width="500" height="500"viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><rect x="100" y="200" width="300" height="100" fill="blue" stroke="pink" stroke-width="2" style=""/><rect x="100" y="0" width="300" height="100" stroke="pink" stroke-width="2" style="fill:green; stroke:orange;stroke-width:10px;"/></svg>
预览：
