参考链接：

　　菜鸟教程 HTML5 内联SVG

　　经典面试题（讨论canvas与svg的区别）



Canvas | SVG

---|---

通过 JavaScript 来绘制 2D 图形|是一种使用 XML 描述 2D 图形的语言

是HTML5提供的新元素<canvas>|历史久远，并不是HTML5转悠的标签

位图（标量图），放大或改变尺寸会失真；逐像素进行渲染，依赖分辨率|矢量图，放大或改变尺寸不会失真；不依赖分辨率

弱的文本渲染能力（因为放大会失真）|最适合带有大型渲染区域的应用程序，比如谷歌地图（因为放大不会失真）

能够以 .png 或 .jpg 格式保存结果图像；能够引入 .png 或 .jpg格式的图片|不能以 .png 或 .jpg 格式保存结果图像；不能引入 .png 或 .jpg格式的图片

不支持事件处理器（一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。）| 支持事件处理器（SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。）

不能被引擎抓取|可以被引擎抓取

--- |复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

最适合图像密集型的游戏，其中的许多对象会被频繁重绘 |不适合游戏应用

列表总结Canvas和SVG的区别的更多相关文章

  1. canvas和svg的区别

    讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...

  2. 总结Canvas和SVG的区别

    参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas SVG 通过 JavaScript 来绘制 2D 图形 是一种使用 XML 描述 2D 图形的 ...

  3. canvas、svg、canvas与svg的区别

    一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...

  4. 前端绘图方式Canvas和SVG的区别

    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...

  5. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  6. Canvas 与 SVG 的区别

    这个说实话,我只用过canvas画过一些简单的图形,复杂的不懂,之所以列出来,是因为之前在面试中有被问到,在这里mark一下,后期深化. 以下的内容全部来自于w3school http://www.w ...

  7. canvas与svg的区别

    1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...

  8. html5 Canvas和SVG的区别是什么（总结）

    html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...

  9. canvas与svg区别

    canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...

随机推荐

  1. NodeJS Stream 四：Writable

    什么是可写流 可写流是对数据流向设备的抽象,用来消费上游流过来的数据,通过可写流程序可以把数据写入设备,常见的是本地磁盘文件或者 TCP.HTTP 等网络响应. 看一个之前用过的例子 process. ...

  2. MIPS 跳转指令BAL vs JAL

    今天调试程序,发现在windows和Linux下,diab编译的结果不一样,一个能跑一个不能跑.最后定位到了函数跳转上. 程序代码里的函数跳转写的是BAL,在windows下编译结果正常,在Linux ...

  3. HDU5875

    Function Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  4. Yii2 独立操作

    看到最近有些人在问 yii2 独立操作相关的东西,在这做简单的说明吧, 平时核心业务逻辑一般用的还是比较少的.因为  独立操作 出现的原因 是 对重复被使用的操作进行简化,或 分配一个 额外处理逻辑的 ...

  5. nRF51800 蓝牙学习 进程记录 2：关于二维数组 执念执战

    前天在玩OLED时想完成一直想弄得一个东西,就是简单的单片机游戏.因为STM32和nRF51822的内存足够,所以就用缓存数组的方法来显示图像(我也不知道术语是啥,反正就是在内存中建立一个128X64 ...

  6. GIS制图课程目录

    由于更新次序跳跃式更新,因此很有必要整理一下全书目录,并将会按照实际学习的顺序进行更新. [前言] GIS制图课程前言 [理论篇] 理论篇-地图学与GIS制图的基础理论(一) 理论篇-地图学与GIS制 ...

  7. Unsupported major.minor version 52.0错误解决 Ubuntu JDK8 安装配置

    Unsupported major.minor version 52.0错误一般是因为应用程序需要JDK8而ubuntu默认的是jdk7,所以需要切换到jdk8才能解决这个问题. 本文使用PPA方式安 ...

  8. IOS之TableViewCell重用机制解决上下刷新重复显示

    首先我是一个经验浅薄的iOS开发人员,这个问题想必许多初学者经常遇到这些问题,在面试中也会经常问到.现在我们一一解决. 首先我们要知道TableViewCell重用机制的原理是什么,我们抽象的理解为古 ...

  9. jQuery是什么

    在使用jQuery之前,我们需要了解jQuery是个什么东东. 顾名思义,j是JavaScript而query的意思是查询. jQuery就是用javascript更加方便的查询和控制页面控件  ,即 ...

  10. Jenkins权限配置失误后导致登录失败的解决办法

    为了便于管理,Jenkins一般需要设置用户,而且这些用户是需要配置相应的权限的,如果一不小心配置的时候出了问题,那么,你就斯巴达了. 这里,用我的切身经历,为大家说一下Jenkins因为权限配置失误 ...