canvas和svg

本文为学习总结

SVG

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式，像JPEG和PNG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。

canvas

canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 canvas 的实现示例，在这个教程后面我们将看到.
本篇教程从一些基础开始，描述了如何使用canvas元素来绘制2D图形。教程中提供的例子，会让你明白可以用canvas做什么，也会提供一些代码片段来帮助你开始构建自己的内容。
canvas最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

二者主要区别

Canvas与SVG的主要区别

• 从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。
• 从渲染模式上来说，Canvas属于 即时模式，而SVG则是 保留模式
• 从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。
• 从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript
• API对整个画布进行操作的，而SVG则是基于XML元素的。 从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。
• 关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。
• canvas画的图形都是一体的没法独立操作，而svg的每个图形都可以独立操作
• canvas画10000条线，页面上还是只有一个canvas元素；svg画10000条线，那页面中就可能会加入10000个标签
• canvas操作单独图形的方法是清除掉再重绘，svg则直接操作那个图形所在的标签即可。
• canvas画出的图形可以称之为位图，而svg画出的是矢量图
• 重要：canvas的图形对搜索引擎是一片黑，而svg的图形由于可以夹带文本，seo毫无压力

二者相同的地方

• 都是新的html支持点，很可能都会加入w3c正式标准
• 都可以和html良好结合，无需插件
• 都可以用css和JS进行操作
• 浏览器对他们的支持都还不完备，各有各的私有属性
• ie系列对canvas和svg都基本抓瞎

SVG 是一种保留模式 (retained mode)的图形模型，是一种在内存中进行持久处理的模型。类似于 HTML，SVG 构建了包含图元、属性和样式的对象模型。在 HTML5 文档中出现 svg元素时，它的作用类似于一个内联块，并且是 HTML 文档树的一部分。
Canvas 是一种位图，采用直接模式 (immediate mode)的图形应用程序编程接口 (API) 在其上进行绘图。 Canvas 是一种“发后不理”(Fire and Forget) 模型，在这种模式下，将直接向位图呈现其图形，之后对绘制的形状并不知晓；最后只呈现生成的位图。
可以认为 Canvas 类似于 Windows GDI API，您通过编程方式向窗口中绘制图形；而 SVG 类似于 HTML 标记，具有元素、样式、事件和基于 DOM 的编程能力。Canvas 是过程性的，而 SVG 是声明性的。