SVG的了解

1.了解SVG概念

                SVG英文全称为Scalable vector Graphics，意思为可缩放的矢量图。 HTML5支内联SVG.

                ​ HTMIL <svg元素是SVG图形的容器。 ​

                SVG有多种绘制路径、框、园、文本和图形图像的方法。

2.什么是SVG

                SVG指可仲缩矢量图形(Scalable vector Graphics)

                SVG用于定义用于网络的基于矢量的图形

                SVG使用XML格式定义图形

                SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

                SVG是万维网联盟的标准

3.SVG优势

        与其他图像格式相比（比如JPEG和GIF），使用SVG的优势在于:

                （1）SVG图像可通过文本编辑器来创建和修改

                （2）SVG图像可被搜索、索引、脚本化或压缩

                （3）SVG是可伸缩的

                （4）SVG图像可在任何的分辨率下被高质量地打印

                （5）SVG可在图像质量不下降的情况下被放大

4.Canvas与SVG的比较

Canvas	SVG
依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以.png或-jpg格式保存结果图像 最适合囵像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度（任何过度使用 DOM的应用都不快) 不适合游戏应用

5.SVG绘制

        5.1 SVG绘制矩形

                使用rect标签，主要属性;

                        xly：绘图位置;

                        width/height：矩形长宽;

                        fill：填充颜色、默认黑色

                        stroke：描边的额色

                        stroke-width：描边的宽度

                        rx/sry:圆角：以10为半径画圆

        示例代码：矩形

<svg width="500" height="500">
        <!-- x:水平坐标轴
            y：垂直坐标轴
            rx：矩形圆角是以r为半径画圆
			fill="nono"：无填充颜色-->
        <rect x="30" y="30" width="200" height="200" fill="