初识 SVG
svg-banner.png
什么是 SVG
SVG，即 Scalable Vector Graphics（ 可缩放矢量图形 ）的缩写，是 W3C XML 的分支语言之一，用于标记 可缩放 的 矢量图形。
目前 SVG 在 Firefox、Opera、Webkit 浏览器、IE 等浏览器中已经部分实现。
SVG 是 XML 语言的一种形式，有点类似 XHTML，它可以用来 绘制矢量图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合成，还可以通过滤镜完全改变外观。
SVG 推出于1999年，之前有几个相互竞争的格式规范被提交到 W3C，但是都没有完全通过。当下的浏览器支持程度请参考 Can I use。
即便浏览器实现了一些规范，但实现速度完全不能和它的竞争技术相比，它的竞争技术比如说 HTML Canvas 和 Adobe Flash，都已经实现了成熟的应用接口。
但是 SVG 也有自身的优点，比如它 实现了 DOM 接口（ 比 Canvas 方便 ），不需要安装第三方插件 就可以在浏览器中使用（ 比 Flash 方便 ）。
当然，是否使用 SVG 还要取决于你要实现什么。
SVG 的基本要素
HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义 圆形、矩形、简单或复杂的 曲线，以及其他形状。
一个简单的 SVG 文档由 <svg> 根元素 和 基本的形状元素 构成。
另外还有一个 g 元素，它用来把若干个基本形状编成一个 组。
从这些开始，SVG 可以成为任何复杂的组合图形。
SVG 支持 渐变、旋转、滤镜效果、JavaScript 接口 等等功能，但是所有这些额外的语言特性，都需要在一个 定义好的图形区域内 实现。
关于 SVG 的注意事项
- SVG 的元素和属性必须按标准格式书写，因为 XML 是 区分大小写 的（ 这一点和 html 不同 ）
- SVG 里的属性值必须 用引号引起来，就算是数值也必须这样做。
SVG 的发展
自从2003年成为 W3C 推荐标准以来，最接近的“完整版” SVG 版本是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容。
SVG1.1 的第二个版本在2011年成为推荐标准，完整的 SVG1.2 本来是下一个标准版本，但它又被 SVG2.0 取代。SVG2.0 正在制定当中，它采用了类似 CSS3 的制定方法，通过若干松散耦合的组件形成一套标准。
除了完整的 SVG 推荐标准，W3C 工作组还在2003年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要瞄准 移动设备。首先 SVG Tiny 主要是为性能低的小设备生成图元，而 SVG Basic 实现了完整版 SVG 里的很多功能，只是舍弃了难以实现的大型渲染（ 比如动画 ）。2008年，SVG Tiny1.2 成为 W3C 推荐标准。
另外还有一些关于 SVG 打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。
一个简单的示例
直接嵌入到 HTML 中
<body>
<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>
</body>
效果展示
svg.png
保存为 svg 文件
sample.svg
<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>
img 标签 引入 svg 文件
<body>
<img src="sample.svg" alt="" />
</body>
CSS 背景图片引入
.sample {
background: url(sample.svg);
}
object 元素引入 svg 文件
<object data="sample.svg" type="image/svg+xml" />
iframe 元素引入 svg 文件
不建议使用
<iframe src="sample.svg"></iframe>
SVG 的绘制流程
绘制流程包括以下几步：
-
从 svg 根元素 开始：
-
应 舍弃 来自 ( X ) HTML 的 doctype 声明，因为基于 SVG 的 DTD 验证导致的问题比它能解决的问题更多。
-
属性 version 和属性 baseProfile 属性是必不可少的，供其它类型的验证方式确定 SVG 版本。
-
作为 XML 的一种方言，SVG 必须正确的绑定命名空间 （ 在 xmlns 属性中绑定 ）。 请阅读 命名空间速成 页面获取更多信息。
-
-
绘制一个完全覆盖图像区域的 矩形 <rect/>，把背景颜色设为红色。
-
一个半径 80px 的绿色 圆圈 <circle/> 绘制在红色矩形的正中央（ 向右偏移 150px，向下偏移 100px ）。
-
绘制文字 “SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。
SVG 的优势
便于读取和修改
-
SVG 可被非常多的工具读取和修改（比如记事本）
-
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
小
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
可伸缩
-
SVG 图像可在任何的分辨率下被高质量地打印
-
SVG 可在图像质量不下降地情况下被放大
开放标准
-
SVG 文件是纯粹的 XML
-
SVG 可以与 Java 技术一起运行
-
SVG 与其他标准（ 比如 XSL 和 DOM ）相兼容
