1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；
2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
SVG绘图，能够绘制一些简单的、有一定规则的图形、并且给这些图形、文本一些滤镜特效。
关于SVG 和 Canvas 的区别。
1、SVG 不能绘制图片，而 canvas 可以。SVG是通过 XML 绘制，而Canvas通过 js 绘制
2、Canvas绘制的方式，是通过 js 逐像素渲染的。也就是说，它绘制一个复杂的图形和一个简单的图形的性能是差不多的。
SVG 是通过 XML 的方式渲染。它的本质是DOM，而复杂的图形，就会降低其渲染性能。
3、Canvas 是依赖分辨率，是一种标量图。所以在放缩的时候，存在失真的问题。
SVG 绘制的时候，不依赖分辨率，是一种矢量图。所以当SVG放缩的时候，不会使得图像失真。
4、SVG 适合带有大型渲染区域的应用程序：比如谷歌地图、百度地图。
Canvas 适合对象密集型的游戏应用场景。
https://www.cnblogs.com/yanghuiting/p/10902001.html