1、SVG是什么
SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形，例如下面展示的图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。
SVG 诞生于 1999 年，之前有几个相互竞争的格式规范被提交到W3C，但是都没有获得批准。主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方扩展 (extensions，原文有误，应该是插件 plugins，类似 flash)。当然，是否使用 SVG 还要取决于你要实现什么
2、SVG 的历史和优势
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 JavaScript 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
3、基础使用
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
-
创建 svg 标签：SVG 2 之前
version属性和baseProfile属性用来供其他类型的验证识别 SVG 的版本。SVG 2 已弃用version和baseProfile这两个属性。xmlns 是一个命名空间，定义该 svg 标签是属于哪个版本语言规定的标签，详情查看 Namespaces Crash Course
-
绘制一个完全覆盖图像区域的矩形
rect，把背景颜色设为红色。 -
一个半径 80px 的绿色圆圈
circle绘制在红色矩形的正中央（向右偏移 150px，向下偏移 100px）。 -
绘制文字“SVG”。文字被填充为白色，通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。
viewBox属性：viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素，会保持特定的宽高比，设置后会自动继承父元素宽高。包含 4 个参数的列表 min-x、min-y、 width 、 height。不允许宽度和高度为负值，0 则禁用元素的呈现。
有
<marker>,<pattern>,<svg>,<symbol>, 和<view>等五个 svg 元素可以有这个属性当设置了特定的 width 和 height 时，就不会自动继承父元素宽高，而是按设置的来，但是宽高比仍然存在
viewBox 的 width、height 并不是SVG的实际宽高，而是SVG内的“分辨率”。width、height越大，SVG内的元素越小，反之，元素则越大（不影响SVG的背景图）。
<svg viewBox="0 0 300 533" xmlns="http://www.w3.org/2000/svg" style="margin: 0 auto;">
</svg>
4、渲染展示
-
元素的渲染顺序：SVG 文件全局有效的规则是“后来居上”，越后面的元素越可见。
-
展示方法：
-
直接嵌入到 HTML 文件中
-
如果 HTML 是 XHTML 并且声明类型为
application/xhtml+xml，可以直接把 SVG 嵌入到 XML 源码中。 -
可以使用
img元素 -
可以通过
object元素引用 SVG 文件
<object>标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。- 类似的也可以使用
iframe元素引用 SVG 文件
-
共四章，有需要可催更，网上制作 svg 动画的资源比较少，本章参考：官方文档入门
