canvas与svg都是用于在网页上绘制图形（位图）。
canvas是HTML5新出来的一个标签，用来定义一块画图的区域（canvas本身没有绘制能力），用JavaScript来画图，可以绘制路径、矩形、文本、图片以及圆形。
使用方式：
先在HTML里添加一个<canvas></canvas>标签，用行内样式设置宽高，然后在JavaScript里进行绘制。
SVG是可缩放矢量图形（scalable vector graphics）。
svg是用于绘制矢量图形，使用XML格式定义图形。使用起来方便，压缩性更好，可在任何分辨率下高质量打印，放大缩小不容易失真。
使用方式：
以前是用XML格式写好，保存成svg格式。然后HTML可以通过<embed></embed>（不推荐）<object></object>（不推荐）<inframe></inframe>这三个标签嵌入。
在HTML5中新增了<svg></svg>标签，在svg标签中添加<rect></rect>等各种形状标签就可以绘图；
对于canvas与svg：
1、canvas是逐个像素渲染绘制的，而且不能直接选到图形，所以要改动就只能全部都改，或直接选到相应坐标叠上去。而且每个图形不能直接添加事件，只能通过canvas的相应坐标来添加事件。也就是说，canvas是不能单独操作某个图形。
svg里面的图形都是一个标签，可以被获取、添加事件，修改之后浏览器也能重新绘图，修改方便；
2、canvas 文本渲染能力差，也比较依赖分辨率
svg不依赖分辨率，适合大型渲染，矢量图不易失真，适用于地图等图形的绘制
3、canvas 适用于图像密集重复的游戏绘制。
svg由于渲染问题，不方便做复杂 的图像，所以基本告别游戏。
在实际情况下，根据不同的情况自己判断吧。