HTML5 SVG
初识 SVG
定义及优势：
可缩放矢量图形SVG 用于定义用于网络的基于数学描述的图形SVG使用 XML 格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有损失，适合用于响应式设计SVG图像可通过文本编辑器来创建和修改SVG图像可被搜索、索引、脚本化或压缩 SVG与 Canvas 的区别
SVG基于 XML，而 Cnavas 基于 JavaScript。
SVG基于 XML 就意味着这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 与 Canvas 比较
CanvasSVG依赖分辨率器不依赖分辨率不支持事件处理支持事件处理器弱的文本渲染能力最适合带有大型渲染区域的应用程序（比如谷歌地图）能够以 .png 或 .jpg 格式保存结果图像复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）最适合图像密集型的游戏，其中的许多对象会被频繁重绘不适合游戏应用 SVG 的应用场景
网页图标数据可视化复杂的动画效果
SVG 的使用
语法规范
使用：HTML5 支持内联 SVG。
svg 元素默认的宽高为 300px * 150pxSVG 绘制图形时，属性如 stroke、stroke-width、fill 等既可以直接作为 HTML 属性使用，也可以通过 style 属性以 CSS 样式的形式应用。
SVG 的绘制
实质上就是大同小异，就是一些坐标和图形自身必要的参数，这里就不过多赘述。详情参考SVG 实例 | 菜鸟教程 (runoob.com)
基本形状
线形
直线段折线 图形
圆形椭圆矩形三角形多边形星星 路径文本
路径文本多行文本 滤镜
详情见：SVG 实例 | 菜鸟教程 (runoob.com)
渐变
线性渐变（此处为水平）
放射性渐变
动画
以下是实现一个矩形颜色淡出的效果
Note: This example only works in Firefox and Google Chrome.
大小和颜色的渐变
Note: This example only works in Firefox and Google Chrome.
沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形&
Note: This example only works in Firefox and Google Chrome.
It's SVG!
SVG 特殊的标签
标签含义 （group），它用于将多个SVG元素组合在一起，作为一个单元进行操作。对 操作，那么内部每个元素都被操作用于定义可重用的图形元素
参考手册
SVG 规范中定义了更多的元素和属性。
常见 SVG 属性：
id: 元素的唯一标识符。class: 元素的类名，用于CSS样式。style: 元素的内联样式。transform: 应用到元素上的变换。x, y: 元素的位置。width, height: 元素的尺寸。fill: 填充颜色。stroke: 描边颜色。stroke-width: 描边宽度。opacity: 透明度。visibility: 元素的可见性。
SVG 元素列表如下：
元素说明属性
