svg(声明式绘图系统)

优点:

  1. 矢量图,不依赖于像素,无限放大后不会失真;
  2. 以dom的形式表示,事件绑定由浏览器直接分发到节点上

    缺点:

  3. dom形式,涉及到动画时候需要更新dom,性能较低;

  4. 一个 SVG 元素只表示一种基本图形,结构复杂时,会有大量 dom 结构。

canvas(指令式绘图系统)

优点:

  1. 定制型更强,可以绘制绘制自己想要的东西;
  2. 非dom结构形式,用JavaScript进行绘制,涉及到动画性能较高。

    缺点:

  3. 交互性差;

  4. 依赖于像素,无法高效保真,画布较大时候性能较低。