一：什么是SVG？
对于SVG的定义如下：
①：SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics)。
②：SVG 用于定义用于网络的基于矢量的图形。
③：SVG 使用 XML 格式定义图形。
④：SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
⑤：SVG 是万维网联盟的标准。
二：SVG的优势是什么？
SVG的优势有如下定义：
①：SVG 图像可通过文本编辑器来创建和修改。
②：SVG 图像可被搜索、索引、脚本化或压缩。
③：SVG 是可伸缩的。
④：SVG 图像可在任何的分辨率下被高质量地打印。
⑤：SVG 可在图像质量不下降的情况下被放大。
三：SVG与Canvas的区别在于什么地方？
①：SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。
②：SVG 基于 XML，这意味着 SVG可以给每一个图形绑定事件，但是Canvas是基于JavaScript，这就意味着Canvas无法给每一个图形绑定事件。（只能给canvas整个画布绑定事件，还有一种解决方案是使用第三方库）。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
③：Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
④：兼容性不同。 SVG的兼容性更好。
SV与Canvas之间的比较：
Canvas
-------依赖分辨率
-------不支持事件处理器
-------弱的文本渲染能力
-------能够以 .png 或 .jpg 格式保存结果图像
-------最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
-------不依赖分辨率
-------支持事件处理器
-------最适合带有大型渲染区域的应用程序（比如谷歌地图）
-------复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
-------不适合游戏应用
四：SVG在html中是怎样使用的？
首先SVG引入到html中的方法如下：
SVG 文件可通过以下标签嵌入到HTML 文档：<embed>、<object>、<iframe>。
使用<embed>标签引入 ------ <embed src="xxx.svg" type="image/svg+xml" />
①：优势：所有主要浏览器都支持，并允许使用脚本。
②：缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）。
使用<object>标签引入 ------- <object data="xxx.svg" type="image/svg+xml"></object>
①：优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准。
②：缺点：不允许使用脚本。
使用<iframe>标签引入 ------- <iframe src="xxx.svg"></iframe>
①：优势：所有主要浏览器都支持，并允许使用脚本。
②：缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）。
Tip:值得注意的地方是在使用单标签的时候<embed src="" />一定要有 / 闭合不然会报错！！！
SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件。
直接在HTML嵌入SVG代码
在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
</svg>
链接到SVG文件
<a href="circle1.svg">View SVG file</a>
五：SVG标签的元素属性有那几个？
在SVG标签中其自身所拥有的属性就和Canvas的一样就只有两个属性：width="";和height="";
六：对SVG默认形状的一个认识？
SVG和Canvas一样都是行内块级元素，默认的宽高大小都是300px X 150px;
七：对SVG的图形的认知？(SVG Shapes)
SVG有一些预定义的形状元素，可被开发者使用和操作：
-------矩形 <rect>
-------圆形 <circle>
-------椭圆 <ellipse>
-------线 <line>
-------折线 <polyline>
-------多边形 <polygon>
-------路径 <path>
SVG 矩形 ---- <rect>
实例1---------- <rect> 标签可用来创建矩形，以及矩形的变种 如下代码显示：
<svg width="600" hegiht="600" id="mySvg">
<rect x="X轴起始坐标" y="Y轴起始坐标" rx="产生圆角的大小" ry="产生圆角的大小" width="矩形的宽度" height="矩形的高度" stroke="描边的颜色" stroke-width="描边的宽度" fill="填充的颜色" />
</svg>
SVG 圆形 ---- <circle>
实例2----------<circle>标签可用来创建一个圆 如下代码显示：
<svg width="600" height="600">
<circle cx="X轴起始坐标" cy="Y轴起始坐标" r="圆的半径" stroke="描边的颜色" stroke-width="描边的宽度" fill="填充的颜色" />
</svg>
SVG 椭圆 ---- <ellipse>
实例3----------<ellipse>标签可用来创建一个椭圆
Tip：椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。 如下代码显示：
<svg width="600" height="600" id="mySvg">
<ellipse cx="X轴起始坐标" cy="Y轴起始坐标" rx="X轴的半径" ry="Y轴的半径" stroke="描边的颜色" stroke-width="描边的宽度" fill="填充的颜色" />
</svg>
代码解析：
-------CX属性定义的椭圆中心的x坐标
-------CY属性定义的椭圆中心的y坐标
-------RX属性定义的水平半径
-------RY属性定义的垂直半径
SVG 直线 ----- <line>
实例4 ---------- <line> 标签可用来创建直线 下面是SVG代码：
<svg width="600" height="600" id="mySvg">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
代码解析：
-------x1 属性在 x 轴定义线条的开始
-------y1 属性在 y 轴定义线条的开始
-------x2 属性在 x 轴定义线条的结束
-------y2 属性在 y 轴定义线条的结束
SVG 多边形 --------- <polygon>
实例5 ------- <polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。如下代码显示：
<svg width="600" height="600" id="mySvg">
<polygon points="200,10,250,190,160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
利用多边形创建一个五角星
<svg width="600" height="600">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;">
</svg>
改变 fill-rule 属性为 "evenodd"可有另外一种效果。
代码解析：
-------- points 属性定义多边形每个角的 x 和 y 坐标。
SVG 曲线 ----- <polyline>
实例6 ------- <polyline> 标签元素是用于创建任何只有直线的形状 如下代码显示：
<svg width="600" height="600">
<polyline points="20,20 40,25 60,40 80,120 120.140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
SVG 路径 ------- <path>
实例7 -------- <path> 标签元素用于定义一个路径。
下面的命令可用于路径数据：
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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<svg width="600" height="600">
<path d="M150 0 L75 200 L225 200 Z " />
</svg>
代码解析：
上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。
SVG 文本 --------- <text>
实例8 --------- <text> 标签元素用于定义文本。 如下代码显示：
<svg width="600" height="600">
<text x="70" y="15" fill="red" transform="rotate(30 20,40)">I Love You</text>
</svg>
以上就是对SVG的大概了解的概况。
