canvas和svg的区别是什么

canvas和svg的区别是：1、绘制的图片格式不同；2、Canvas不支持事件处理器，SVG支持事件处理器；3、适用范围不同。Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图。

一、绘制的图片格式不同

Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图

SVG 可以在H5中直接绘制，但绘制的是矢量图

由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。

二、Canvas不支持事件处理器，SVG支持事件处理器

Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。

三、适用范围不同

由于Canvas 和 SVG 的工作机制不同，

Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。

SVG适合带有大型渲染区域的应用程序，比如地图。

而Canvas适合有许多对象要被频繁重绘的图形密集型游戏。

来源：https://blog.csdn.net/qq_40850839/article/details/108926290

延伸阅读

图片格式的区别

不同的图片格式有着不同的特点和用途。以下是一些常见的图片格式以及它们之间的主要区别：

1. JPEG (Joint Photographic Experts Group)：这种格式通常用于存储复杂的图片，如照片。JPEG是一种有损压缩格式，这意味着一些图像数据会在压缩过程中丢失，但反过来，它可以生成体积较小的文件。这种格式不支持透明度。
2. PNG (Portable Network Graphics)：PNG是一种无损压缩格式，这意味着图片在压缩和解压缩的过程中不会丢失任何数据。PNG文件的图片质量往往比JPEG高，支持透明度，但文件大小也更大。这种格式常用于网站图形和图标。
3. GIF (Graphics Interchange Format)：GIF是一种早期的位图图像格式，它只支持最多256种颜色，因此最适合简单的图形和图像。GIF的主要优点是支持动画。
4. BMP (Bitmap)：BMP是一种无损的位图图像格式，主要用于Windows系统。这种格式不提供任何形式的压缩，因此生成的文件通常很大，不适合在网上使用。
5. SVG (Scalable Vector Graphics)：与上述所有格式都是基于像素的位图图像格式不同，SVG是一种矢量图像格式。这意味着它的图像是由数学公式描述的，可以无损地放大或缩小。SVG通常用于图标和其他需要在多种大小下显示的图形。

每种图片格式都有其优点和缺点，你选择哪种格式主要取决于你的需求，如文件大小、图片质量、是否需要支持透明度或动画等。