了解SVG

最新推荐文章于 2024-08-07 21:37:33 发布

蒋宇捷

最新推荐文章于 2024-08-07 21:37:33 发布

阅读量2.1w

点赞数 2

分类专栏：前端 Web前端-关注HTML5与CSS3 文章标签： d3.js 浏览器图形 javascript html 脚本

前端同时被 2 个专栏收录

92 篇文章 2 订阅

订阅专栏

Web前端-关注HTML5与CSS3

84 篇文章 448 订阅

订阅专栏

教程细节

· 语言: 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 比起客户端侧的 CanvasAPI 来说，无疑具有更高的可访问性。你可以由此做到：

在服务器端创建基于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应用里使用完全的物理引擎。作为替代，我最经常需要可扩展的图标、交互图以及详细的、美观的方式来把信息呈现给用户。大多数我需要的图形就是简单易用的公式。这些图形元素很容易的使用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）。