canvas 和 svg

对于开发人员而言，最直观的区别在于：
1.对于画在Canvas上的部件，你需要处理重绘。而SVG则不用，你修改svg dom则系统会自动帮你重绘
2.Hittest，即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上；而svg可以。
3.Canvas效率高得多

Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言，成为W3C标准已经有十多年(2003.1至今)，总的来说，Canvas技术较新，从很小众发展到广泛接受，注重栅格图像处理，SVG则历史悠久，很早就成为国际标准，复杂，发展缓慢（Adobe SVG Viewer近十年没有大的更新）

<img src="https://pic4.zhimg.com/b00e22b6281710f76bb784fe13ff9243_b.jpg" data-rawwidth="652" data-rawheight="233" class="origin_image zh-lightbox-thumb" width="652" data-original="https://pic4.zhimg.com/b00e22b6281710f76bb784fe13ff9243_r.jpg">

Canvas vs SVG

<canvas>和<svg>都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition)，两者的主要特点见下面的表格：

&amp;lt;img src="https://pic1.zhimg.com/7cc17f3b9ce5f0d879fdfa2be9a54ca0_b.jpg" data-rawwidth="658" data-rawheight="279" class="origin_image zh-lightbox-thumb" width="658" data-original="https://pic1.zhimg.com/7cc17f3b9ce5f0d879fdfa2be9a54ca0_r.jpg"&amp;gt;

SVG与Canvas主要特点

根据两者的不同特点，Canvas和SVG有各自的适用范围

Canvas适用场景

Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制

SVG适用场景

SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

&amp;lt;img src="https://pic3.zhimg.com/9b0e2025971c2ee23154f7331ac59426_b.jpg" data-rawwidth="657" data-rawheight="342" class="origin_image zh-lightbox-thumb" width="657" data-original="https://pic3.zhimg.com/9b0e2025971c2ee23154f7331ac59426_r.jpg"&amp;gt;