什么是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