svg与canvas画布的区别

什么是SVG？

• SVG可缩放矢量图形是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。
• SVG 是 W3C（即 国际互联网标准组织）制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
• SVG 严格遵从 XML 语法，这也就是说 SVG DOM 中的每个元素都是可用的，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
• 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

特点：

(1)任意放缩： 用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

(2)文本独立： SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

(3)较小文件： 总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。

(4)超强显示效果： SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。

(5)超级颜色控制： SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。

• 不依赖分辨率
• 支持事件处理器
• 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
• 不适合游戏的应用
• 复杂度高会减慢渲染的速度
• 以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签

---

什么是Canvas？

• Canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术, 利用JavaScript在网页绘制图像,
• Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作
• Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。其位置发生改变，会重新进行绘制。

<canvas id="canvas1" width="300" height="100" >

</canvas>
<!--在标签中给上宽高： 不用加单位，如果在css中给宽高，会对图像造成拉伸 （默认宽高300px*150px） -->

特点：

• 依赖分辨率
• 不支持事件处理器
• 文本渲染力弱
• 能够以 .png 或 .jpg 的格式保存结果图形
• 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘： canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

---

svg存在的历史要比canvas久远

另外Canvas渲染出来的图叫位图,SVG渲染出来的图叫矢量图

图片来源于网络😁😁😁 https://www.cnblogs.com/liutianzeng/p/11322009.html