本篇教程探讨了HTML5+CSS3从入门到精通之CANVAS画布与SVG的区别，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

CANVAS是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。
CANVAS
    　　Canvas 是通过 JavaScript 来绘制 2D 图形。
    　　Canvas 是逐像素进行渲染的。
           在Canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。
SVG
           Svg 是使用 XML 描述的 2D 图形。
           Svg 是基于 XML 的，这也就是说 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。
           在 SVG 中，每个被绘制过的图形均视为对象，如果 SVG 对象的属性发生变化，那么浏览器可以自行重现图形。
     比较
Canvas
    依赖分辨率
    不支持事件处理器
    文本渲染力弱
    能够以 .png 或 .jpg 的格式保存结果图形
    最合适图像密集型的游戏，其中许多的对象会被频繁的重绘
SVG
    不依赖分辨率
    支持事件处理器
    最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
    不适合游戏的应用
    复杂度高会减慢渲染的速度
    以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签
 从功能上来说
CANVAS可以看做是一个画布。，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，所以就很适合来做地图。
从操作上来说
我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function(){}。而svg支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。    

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！