到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。
首先分析一下两种技术的显著特点，看下面的表格：

Canvas SVG
基于像素（动态 .png） 基于形状
单个 HTML 元素 多个图形元素，这些元素成为 DOM 的一部分
仅通过脚本修改 通过脚本和 CSS 修改
事件模型/用户交互颗粒化 (x,y) 事件模型/用户交互抽象化 (rect, path)
图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳 对象数量较小 (<10k)、图面更大（或同时满足这二者）时性能更佳

从上面的对比中可以看出：Canvas在像素操作方面有着强大的优势；而SVG的最大优势在于便捷的交互性和可操作性。使用Canvas受画布的尺寸(其实就是像素数目)影响很大，使用SVG受对象的数目(元素的数目)影响比较大。Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后，不能使用脚本和 CSS 对它进行修改。而 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
      实际上Canvas 是基于像素的即时模式图形系统，绘制完对象后不保存对象到内存中，当再次需要这个对象时想，需要重新绘制；SVG 是基于形状的保留模式图形系统，绘制完对象后会将其保存在内存中，当需要修改这个对象信息时，直接修改就可以了。这种根本的区别导致了很多应用场景的不同。

在下面的几个常见应用中，我们也可以体会到这一点。
高保真的文档
      这个方面很好理解，为了浏览文档时，缩放时不失真，或需要打印高质量的文档，通常会优先选择SVG，例如地图服务。
静态的图片资源
      SVG常常用于简单图像，无论是应用程序还是网页中的图像，大图像还是小图像。由于SVG要加载到DOM中，或者创建图像前至少要进行解析，所以性能会稍微有所下降，但相比于呈现网页的成本（大约几毫秒），这种效率损失是极其微小。
      在文件大小方面（为了评估网络流量的目的），SVG图片与png图片大小相差也不大。但是因为SVG作为图像格式是可缩放的，所以如果开发人员想要以更大的比例使用该图像，或者用户使用高 DPI的屏幕，则使用SVG是相当不错的选择。

像素操作
      使用Canvas时可以获得快速的绘图速度，且不需要保留元素的相应信息。特别是当需要处理像素操作时，性能较好。这种类型的应用基本都选择Canvas技术。
实时数据
      Canvas非常适合非交互的实时数据可视化。比如实时天气数据。
图表和图形
      使用SVG或者Canvas均可以绘制相关图形和图表，但是如果要强调可操作性，则SVG无疑是最好选择，如果不需要交互性，强调性能，则Canvas比较适合。
二维游戏
      因为游戏大多数是使用低级的API开发，所以Canvas比较容易让人接受。但是实际上，绘制游戏的场景的时候，Canvas需要重复绘制和定位形状，而SVG是维护在内存中，修改相关的属性非常容易，所以SVG也是一种不错的选择。
      在小游戏板上使用几个对象创建游戏时，Canvas 和 SVG 之间在性能上几乎没有差异。但是，随着创建更多的对象，Canvas 代码将会增大许多。由于每次进行游戏循环时都必须重新绘制 Canvas 对象，因此 Canvas 游戏的速度会减慢。
用户界面设计
      由于良好的交互性，无疑SVG更胜一筹。利用 SVG 的保留模式图形显示，你可以在正文的类似 HTML 的标记中创建所有用户界面详细信息。因为每个 SVG 元素和子元素都可以响应单独的事件，所以你可以非常轻松地创建复杂的用户界面。而 Canvas 需要你按照更复杂的代码顺序来指定如何创建用户界面的每个部分。你需要遵照的顺序是： 
      •获取上下文。
      •开始绘制。
      •指定每根线条和每个填充的颜色。
      •定义形状。
      •完成绘制。
      此外，Canvas 只能处理整个画布的事件。如果有更复杂的用户界面，则必须确定在画布上单击的位置的坐标。SVG 可以单独处理每个子元素的事件。

下面两个例子分别说明了canvas与svg各自的技术优势：

canvas的典型应用如绿屏：http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

效果图如下：

打开页面以后可以查看页面源代码。

这个应用是从两个视频中读写像素到另一个视频中，代码使用两个视频、两个画布和一个最终画布。一次捕捉视频上的一帧，然后绘制到两个单独的画布上，这样允许读回数据：

ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);

ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

因此，下一步是检索每个绘制图像的数据，以便可以检查每个单独的像素：

currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);

currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

获取后，代码将浏览绿屏的像素数组，搜索绿色像素，如果找到，代码将用背景场景中的像素替换所有绿色像素。：


for (var i = 0; i < n; i++) 

{

  // Grab the RBG for each pixel:

  r = currentFrameSource1.data[i * 4 + 0];

  g = currentFrameSource1.data[i * 4 + 1];

  b = currentFrameSource1.data[i * 4 + 2];

  

  // If this seems like a green pixel replace it:

  if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.

  {

    pixelIndex = i * 4;

    currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];

    currentFrameSource1.data[pixelIndex + 1] = currentFrameSource2.data[pixelIndex + 1];

    currentFrameSource1.data[pixelIndex + 2] = currentFrameSource2.data[pixelIndex + 2];

    currentFrameSource1.data[pixelIndex + 3] = currentFrameSource2.data[pixelIndex + 3];

  }

}

最后，像素数组将写入到目标画布中：

ctxDest.putImageData(currentFrameSource1, 0, 0);

svg典型的应用如用户界面：


<!DOCTYPE html>

<html>

  

  <head>

    <script type="text/javascript">

      // This function is called when the circle is clicked.

      function clickMe() {

        // Display the alert.

        alert("You clicked the SVG UI element.");

      }

    </script>

  </head>

  <body>

    <h1>

      SVG User Interface

    </h1>

    <!-- Create the SVG pane. -->

    <svg height="200" width="200">

      <!-- Create the circle. -->

      <circle cx="100" cy="100" r="50" fill="gold" id="uIElement" onclick="clickMe();"

      />

    </svg>

    <p>

      Click on the gold circular user interface element.

    </p>

  </body>

</html>

这个例子虽然简单，但是具备了用户界面的一切特性，从这个例子中我们再次领略了svg便捷的交互性。

最后用一幅图来总结一下每种应用适合的技术，图中每个方块代表一类应用，越靠近某一端，说明采用该技术越具有的优势：

SVG 2D入门13 - svg对决canvas的更多相关文章

  1. 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  2. SVG 2D入门1 - SVG综述

    位图与矢量图 以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...

  3. SVG 2D入门12 - SVG DOM

    使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...

  4. SVG Sprite 入门（SVG图标解决方案）

    关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...

  5. SVG 2D入门7 - 重用与引用

    前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素      g元素是一种容器,它组合一组 ...

  6. SVG 2D入门11 - 动画

    交互性      SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomA ...

  7. SVG 2D入门8 - 文档结构

    前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...

  8. SVG 2D入门3 - 文本与图像

    SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件.任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行.尽管SVG的文本 ...

  9. SVG 2D入门10 - 滤镜

    滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好.   ...

随机推荐

  1. CI框架多个表前缀，如何使用框架语句querybuilder

    最近用CI框架遇到一个问题.2个前提条件: 1.数据库设计不规范,有的有表前缀(如:ck_table1),有的没有(如:table2)或者表前缀不一样: 2.数据库操作又想使用数据库操作语句query ...

  2. Linux设置ssh无密码登陆

    最近在折腾Hadoop,要用到主机间无密码登陆,设置的时候遇到了一些问题,这里记录一下. 假设A需要无密码登陆B. 那么首先需要在A上使用ssh-keygen生成id_rsa.pub的公钥,生成时,一 ...

  3. 备用帖子1Shell（Shell R语言）

    shell========================== echo 1 > /proc/sys/vm/drop_caches 清理内存 free -m du -h --max-depth= ...

  4. linux命令：mkdir命令

    命令参数: -m, --mode=模式,设定权限<模式> (类似 chmod),而不是 rwxrwxrwx 减 umask -p, --parents  可以是一个路径名称.此时若路径中的 ...

  5. [Oracle] SQL*Loader 详细使用教程（4）- 字段列表

    在上一篇中我们介绍了SQL*Loader中最重要的文件——控制文件,而本篇要介绍控制文件中最重要的部分——字段列表,字段列表的作用是把数据文件中的记录和数据库中表的列对应起来,下面是字段列表的一个例子 ...

  6. STM32学习笔记(七) ADC模数转换测电平(普通和DMA模式)

    嵌入式系统在微控制领域(温度,湿度,压力检测,四轴飞行器)中占据着重要地位,这些功能的实现是由微处理器cpu(如stm32)和传感器以及控制器共同完成的,而连接他们,使它们能够互相正常交流的正是本小节 ...

  7. fsimage 和 edits log

    standby NN每隔一段时间(由参数dfs.ha.tail-edits.period决定,默认是60s)去检查Journal node上新的Edits log文件. standby NN每隔一段时 ...

  8. python窗体——pyqt初体验

    连续两周留作业要写ftp的作业,从第一周就想实现一个窗体版本的,但是时间实在太短,qt零基础选手表示压力很大,幸好又延长了一周时间,所以也就有了今天这篇文章...只是为了介绍一些速成的方法,还有初学者 ...

  9. float浮动深入理解

    [CSS深入理解之float浮动]听课总结 (http://www.imooc.com/learn/121)   1.float的原本作用:为了实现文字环绕 2.float的包裹性和破坏性: 包裹性: ...

  10. Search Insert Position [LeetCode]

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...