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