一：什么是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的大概了解的概况。
