了解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>
<g>
   <g>
      <path fill="#8BAC54" d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
         c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
         c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
         C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
         C282.657,200.806,278.797,11.28,278.797,11.28z"/>
   </g>
   <g>
      <path fill="#B1C982" d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
         c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
         C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
         z"/>
   </g>
</g>
</svg>

        SVG基于DOM节点的API比起client側的CanvasAPI来说，无疑具有更高的可訪问性。你能够由此做到：

• 在server端创建基于SVG文档的图像
• 像其它HTML元素一样检查SVG元素
• 通过你熟悉的技术（JS和CSS）编程来处理形状、样式和位置
• 为SVG节点绑定事件函数

        DOM API为使用SVG提供了很多其它一系列明显的优势。

无须不必要的HTTP请求

        当你在HTML中使用<img>标签来引入图像时，就是定义了一个用户浏览器须要请求的文件。这个请求会占用带宽，须要很多其它宝贵的时间来下载。假设你的图像用一组DOM节点来取代，能够降低额外的HTTP请求，使你的站点速度更快，对用户更加友好。

简单交互脚本

        尽管如今浏览器大战，跨浏览器的DOMAPI在脚本的交互性方面提供了广泛的灵活性，能够延伸到SVG元素上。能够通过CSS为SVG加入样式；SVG元素支持浏览器事件API使得的通过脚本进行交互不在话下；还能够轻松的将一个事件函数绑定到SVG元素的节点上。

        这不是真正在画布上绘制的元素。由于画布是一个简单的像素渲染引擎，绘制的元素不能在内存中保存为对象。脚本将保持这些元素的收集工作，并监管全部相关的位置和大小信息来在事件循环中寻找和触发事件。除此之外，Z-index也由脚本处理。

        让我们来看看一个样例。请注意：为了保持简洁，我们将使用jQuery。

var circleCenter = [200, 300], radius = 50;
$(window).on("mousemove", function(e){
   var mx = e.pageX, my = e.pageY;
   if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius){
      // now we are hovering
   }
 
});

        相比之下，我们能够看到使用SVG能够更简单的完毕相同任务。

$("svg path#circle").on("hover", function(event){
   // That's all.
});

        显然开发人员编写简单交互的脚本来说效率更高。

实际应用

        有大量的Canvas相关的JS库（比如KineticJS，能够让你实现一些酷炫的功能）。但假设你像我一样，就不会在你的Web应用里使用全然的物理引擎。作为替代，我最经常须要可扩展的图标、交互图以及具体的、美观的方式来把信息呈现给用户。大多数我须要的图形就是简单易用的公式。这些图形元素非常easy的使用SVG来创建，很多简单的物理方程能够处理你的这些需求。所以让我们来看看SVG的一些实际应用。

图形
        由于SVG最大的优势是主要的矢量形状，自然非常适用于图形和信息图表。它不仅非常适合用来从给定的数值创建静态的图表，还适用于“实时的”图形：通过AJAX请求、用户输入或者随机生成的数据生成。

路线图
        路线图由坚硬的线条和精确的形状组成。这些形状能够用向量图形非常好的展示。

复杂的UI元素

        比如如今你须要一个UI元素，看上去像圆圈金字塔。你怎样用HTML和CSS来实现？好吧，你要先为每个洞创建一堆的div，为它们每个赋予确定的圆角边框和边框样式。然后你要使用一个div容器来定位它们。如今你假设想要一个总体的渐变该怎样实现？你可能必须要使用Mask，或者一些其它技术。我们宁可不使用图像，由于它们不可扩展，而且不能用可编程的方式来又一次渲染或者改变。相反，为什么不在Illustrator中绘制元素，而且将它保存为一个SVG文件？这将会让你有一个单独的、可扩展的元素，而且不用操心多个div的管理。

Logos
        多数标志都是基于矢量的。你能够为你的Logo定义一个SVG文档，而且把它放到不论什么地方，随时缩放为不论什么尺寸，而全然不须要牺牲质量或者占用过多的带宽。

简单游戏
        Canvas适合游戏渲染，这并非秘密。另外的原因是游戏往往不依赖于矢量图形，相反它们使用基于像素的艺术字和动画。然而，SVG对于须要更少字符动画和很多其它信息展示的游戏来说是一个非常棒的选择（比如数独游戏）。

---

为什么你可能不使用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.js
• Processing.js, 基于强大的Processing –一个Java图像工具
• jQuerySVG
• Sitepoint article: 怎样选择Canvas和SVG
• Canvasand SVG的性能
• Nettuts+ article about Raphael

        你还发现了SVG的其它用途吗？请在评论中告诉我们，还要感谢你的阅读。

        译自：http://net.tutsplus.com/tutorials/why-arent-you-using-svg/

        转载请注明：来自蒋宇捷的博客