D3系列06-canvas和SVG的比较

Posted 2023-05-07

参考技术A SVG，指可缩放矢量图形（scalable vector graphics)，他是由万维网联盟制定的开放标准，用于绘制二维矢量图形。除了IE8以前的浏览器，绝大部分浏览器都支持它，它使用XML的格式来定义图形，可以直接将SVG文本直接放入html中进行显示。它有如下特点：

1.绘制的是矢量图，图像放大不会失真。

2.基于xml，可以为每个元素添加js事件。

3.每个图形都是对象，更改对象属性，图形会发生变化。

4.不合适游戏应用。

canvas，是H5中新增标签，利用js来绘制2D图形。它有如下特点：

1.绘制的图形是位图，放大会失真。

2.不支持事件处理器。

3. 能够以png，jpg格式保存图像。

4.适合游戏应用。

highcharts echarts比较

1，highcharts底层是svg echarts底层是canvas

2，svg和canvas的区别

　　canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

　　svg

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用