了解SVG
教程细节
语言: JavaScript,HTML, SVG
难度: 中等
预计阅读时间: 30 分钟
SVG-可缩放矢量图形 ，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案？
今天，我们将全面介绍SVG，并且解释为什么“我应该使用哪一个”这个问题通常的答案是 “我要用它们来做什么”。要得到SVG的完整信息，请查看Mozilla关于此主题的文档。你还可以看看SVG DOM API。
概述
我们将首先概述SVG的一些独特的优势。 然后，用不着通读SVG所有长达80页的节点类型，我们将说明如何通过Illustrator快速的把SVG文档加入到网页中。我们还会讲讲D3.js，一个强大的、SVG控制的JavaScript库。
“SVG并不只用于像素处理。”
SVG的主要优点
除了用于某些应用上跨图像或者基于Canvas的渲染之外，SVG还有相当多的优点。 SVG并不只用于进行像素处理，但是它能够很好地处理矢量图形和可编程性的矢量。
分辨率无关你可能不知道，分辨率无关和浏览器不可知论是近来前端开发中热议的话题（想想“响应式设计”）。大多数用来解决分辨率问题（例如视网膜屏幕上）的方案既导致了大量不必要的数据下载（高清图像替换）又为一个或者其他浏览器进行了妥协。这使得无线网络中更高分辨率图像的传输往往受限于数据下载速度的瓶颈。这并不理想。
SVG提供了一种方法来提供全分辨率的图形元素：不管什么大小的屏幕，缩放比例或着分辨率。 直到SVG出现之前，我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里不需要使用div和:after元素来创建简单的形状和其他效果。相反你可以创建各种矢量形状。
“SVG提供了一种方法来提供全分辨率的图形元素：不管什么大小的屏幕，缩放比例或着分辨率”
基于DOM节点的API你写HTML吗？ JavaScript和CSS呢？ 是的。 现在你已经知道了很多关于编写SVG的信息。 SVG实际上使用和XML兼容的格式来定义其呈现的形状。除此之外，你可以用CSS为形状添加样式，使它们与JavaScript进行交互。有多个像D3.js和Raphael的JS库可以协助你。下面是一组SVG元素的例子（Envato叶子）。你也可以在JSFiddle上看到这个示例 。
为什么你可能不使用SVG
现在我们已经看过了许多SVG的优点，让我们来看看许多开发者为什么仍然选择不使用SVG。最主要有两个原因：
1、他们从来没有听说过SVG或者从没想过需要它，所以都忽略了（这不再是借口！）
2、 SVG XML文档看起来相对古老和复杂，好像使用图像更加简单。
当然没有任何人想手动编辑SVG XML里的一个个点。幸运的是，没有人需要这么做。这是人们常常没有意识到的部分，这里有许多工具来编辑SVG，所以你永远不需要手动来做这件事。
SVG工具Illustrator,Inkscape
这个矢量编辑器最有可能把你的文件保存为SVG。立即来试试吧！打开Illustrator，画一两个圆，并且把文件保存为SVG。然后在Sublime或者其他文本编辑器中打开，你能够立即看到，除了一些额外的元数据，SVGXML可以马上应用到HTML中。你最有可能看到<g>标签（group），<path>标签（path）以及<svg>元素。
D3.js虽然你完全可以把SVG XML直接拖放到一个HTML文件中，但是当你想要动态创建SVG时怎么办？D3.js是一个基于数据操作文档的JS库。换句话说，它的伟大之处在于可以基于一系列的数据生成例如条形图和线状图的SVG元素。我们选择展示D3是因为它符合浏览器里SVG实际实现的词汇，请注意另外还有一些很棒的非标准SVG库（值得注意的是Raphael.js）。
D3.js除SVG处理外还提供其他更多功能。（请确保你查看了D3.js官网上的示例和这个讨论）
示例一：脉冲圈 在第一个例子里，我们使用Math.sin和setInterval构造的迭代器简单的创建一个脉冲圈。
脉冲圈
在这个例子里，我们将用一些随机值更新绘制的线状图。
线状图
什么时候不用SVG？
SVG可以处理很多浏览器里的图像渲染需求。虽然我们有很多使用SVG的理由，但是就像任何伟大的事物一样，也有一些地方它表现不是很好。
如果你需要渲染上千个节点，更高性能的办法是在Canvas上进行。如果你的应用需要IE8的支持，记得你需要提供另外一个备用的向量（例如更复杂的 VML），或者依靠响应式的图像来完全替代向量。
有用链接
这里有一些有用的连接，可以帮助你更好的了解SVG。
Raphael.jsProcessing.js, 基于强大的Processing 一个Java图像工具jQuerySVGSitepoint article: 如何选择Canvas和SVGCanvasand SVG的性能Nettuts+ article about Raphael
你还发现了SVG的其他用途吗？请在评论中告诉我们，还要感谢你的阅读。
译自：http://net.tutsplus.com/tutorials/why-arent-you-using-svg/
转载请注明：来自蒋宇捷的博客