了解SVG

标签: svg | 发表时间:2013-01-06 21:12 | 作者:luqin1988
出处:http://blog.csdn.net
 


教程细节

·      语言: 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上看到 这个示例

  1. <svg> 
  2. <g> 
  3.    <g> 
  4.       <path fill="#8BAC54" d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407 
  5.          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 
  6.          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 
  7.          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 
  8.          C282.657,200.806,278.797,11.28,278.797,11.28z"/> 
  9.    </g> 
  10.    <g> 
  11.       <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 
  12.          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 
  13. 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
  14.          z"/> 
  15.    </g> 
  16. </g> 
  17. </svg> 
<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。

  1. var circleCenter = [200, 300], radius = 50; 
  2. $(window).on("mousemove", function(e){ 
  3.    var mx = e.pageX, my = e.pageY; 
  4.    if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius){ 
  5.       // now we are hovering 
  6.    } 
  7.   
  8. }); 
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可以更简单的完成相同任务。

  1. $("svg path#circle").on("hover", function(event){ 
  2.    // That's all. 
  3. }); 
$("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)。

        D3.js除SVG处理外还提供其他更多功能。(请确保你查看了 D3.js官网上的示例和这个 讨论

示例一:脉冲圈

        在第一个例子里,我们使用Math.sin和setInterval构造的迭代器简单的创建一个脉冲圈。

示例二:更新线状图

        在这个例子里,我们将用一些随机值更新绘制的线状图。


什么时候不用SVG?

        SVG可以处理很多浏览器里的图像渲染需求。虽然我们有很多使用SVG的理由,但是就像任何伟大的事物一样,也有一些地方它表现不是很好。

  • 如果你需要渲染上千个节点,更高性能的办法是在Canvas上进行。
  • 如果你的应用需要IE8的支持,记得你需要提供另外一个备用的向量(例如更复杂的 VML),或者依靠响应式的图像来完全替代向量。


有用链接

        这里有一些有用的连接,可以帮助你更好的了解SVG。

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

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

作者:luqin1988 发表于2013-1-6 21:12:06 原文链接
阅读:0 评论:0 查看评论

相关 [svg] 推荐:

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画:. 如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时,使用js创建一个元素:. // 更高效的计时器,类似于setTimeout,不会发生丢. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果,你可能就觉的头都打啦. 不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性:. 在上面的代码中,我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么?SVG有什么用途?

- - HTML5研究小组
随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图,但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的,所以支持大部分主流的浏览器,应用也相当广泛.

未来必热:SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术. 图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.

五项Web技术:WebGL和SVG名列其中

- - 脚本爱好者
  Bruce Lowson 是 Opera 开放 web 标准的撰写人员之一,一些没有包含在 HTML5 之内的浏览器技术十分奇妙,包括 WebGL 和 SVG,作者希望通过本文与共同爱好者们分享.   别担心,咱们不去管那些啦,因为有些还远远没有完成呢,在浏览器中见到它们还要等一阵子. 然而,其它已经在浏览器中,或者距离您很近,或者马上就要出现.