了解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。

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

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

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

时间： 2024-10-06 04:08:05

了解SVG的相关文章

SVG入门

一． 什么是SVG?SVG(Scalable Vector Graphics)可伸缩矢量图形,它是用XML格式来定义用于网络的基于矢量的图形,而它的特点就是 图像在放大或改变尺寸的情况下其图形质量不会有所损失,同时他和DOM一样都是W3C的一个标准.这里解释下位图和矢量图:位图,也就是我们经常能看到的图片,他是一个平面上密集排布的店的集合,也就是说它是由一个个点构成的.而如果对他进行放大那么相对应的点就会进行放大,这样就会让图片显得十分不清晰粗糙.矢量图,也称为面向对象的图像或绘图图像,在数学上

SVG 文本

该部分为四个主要部分: 1.  <text>和<tspan>标签详解 2.  文本水平垂直居中问题 3.  <textpath>让文本在指定路径上排列  4.  <a>插入超链接 <text>和<tspan>标签 <text>和<tspan>标签是定义文本的基本标签. <text> 参数 描述 默认值 x 文本绘制x轴位置 0 y 文本绘制y轴位置 0 dx 每个字符相对前一个字符的偏移距

svg 路径path

<path> 标签用来定义路径. 下面的命令可用于路径数据: M = moveto(M X,Y) :将画笔移动到指定的坐标位置L = lineto(L X,Y) :画直线到指定的坐标位置H = horizontal lineto(H X):画水平线到指定的X坐标位置V = vertical lineto(V Y):画垂直线到指定的Y坐标位置C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线S = smooth curveto(S X2,Y2,ENDX,END

SVG矢量图像：微笑

效果图 SVG图片:Happy.svg <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> <svg viewBox="0 0 400

Java Batik操作SVG，实现svg读取，生成，动态操作

SVG在现在的应用场景中还是很常见的,例如绘制复杂的矢量图形.说到SVG,就不得提下Canvas.在这里我就不详细列举它们之间的不同之处,以及为什么要选择SVG或Canvas了. 首先,我的项目是一个Maven项目,所以只需要导入batik的maven依赖就可以了,如果是普通的Java项目,就需要自己找jar包导入项目中了.maven依赖有: <!-- svg 生成png格式图片 --> <dependency> <groupId>batik</groupId&g

SVG渐变

前面的话 给SVG元素应用填充和描边,除了使用纯色外,还可以使用渐变.本文将详细介绍SVG渐变 线性渐变 有两种类型的渐变:线性渐变和径向渐变.必须给渐变内容指定一个id属性,否则文档内的其他元素不能引用它.为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面 线性渐变沿着直线改变颜色,要插入一个线性渐变,需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点 <svg height="70" v

SVG圆形&lt;circle&gt; 标签

1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4 5 <svg width="100%" height="100%" v

svg图转canvas，完全阔以的

遇到的问题:页面中存在svg画的图,也存在canvas图,在用 html2canvas 截取页面的图就导致有图画缺失,至少我需要的缺失了. 一.如果页面单纯的存在一个svg画的图,转为canvas就很好考虑,就是将svg的图画代码转为字符串,去空格,然后用canvg.js的方法, canvg("canvasId","svgHTML")转化,其中canvasId这个对象是你页面的canvas容器(你也可以动态生成它),svgHTML是你拿到的svg 图画的字符串.示例

eclipse禁用svg文件Validation

1.打开window>preferences>validation找到xml validator 2.点击xml validator最右侧的按钮打开xml校验规则窗口,选中exclude group点击右侧的add rule..按钮 3.打开添加规则窗口后,选中第一个file extension点击下一步next,输入框中输入svg,点击完成finish按钮:

SVG.js 图案使用和use引用

一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.pattern(20, 20, function (add) { add.rect(20, 20).fill('#f06'); add.rect(10, 10); add.rect(10, 10).move(10, 10); }); //获取url的标识对象,returns 'url(#SvgjsPatte