参考链接：
　　菜鸟教程 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的区别

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

  2. canvas和svg的区别

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

  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. hadoop生态搭建（3节点）-08.kafka配置

    如果之前没有安装jdk和zookeeper,安装了的请直接跳过 # https://www.oracle.com/technetwork/java/javase/downloads/java-arch ...

  2. 从oracle往greenplum迁移，查询性能不满足要求的定位以及调优过程

    一.前言 在一次对比oracle和greenplum查询性能过程中,由于greenplum查询性能不理想,因此进行定位分析,提升greenplum的查询性能 二.环境信息 初始情况下,搭建一个小的集群 ...

  3. 20190118-利用Python实现Pig Latin游戏

    1.利用Python实现Pig Latin字母游戏 “Pig Latin”是一个英语儿童文字改写游戏,整个游戏遵从下述规则:a. 元音字母是‘a’.‘e’.‘i’.‘o’.‘u’.字母‘y’在不是第一 ...

  4. wordpress网站程序漏洞修复办法

    近日wordpress被爆出高危的网站漏洞,该漏洞可以伪造代码进行远程代码执行,获取管理员的session以及获取cookies值,漏洞的产生是在于wordpress默认开启的文章评论功能,该功能在对 ...

  5. UART学习之路（二）基本时序介绍

    这次我们来介绍一下UART的基本时序,了解一下底层信号怎么传送的.方便以后使用Verilog HDL实现收发逻辑. 9600bit/s 的意思是每秒发送9600bit,因此可以理解为将1s分解为960 ...

  6. 查看 dll 是32位还是64位 的 bat

    ******* @echo offset work_path=./cd %work_path% for /R %%s in (*.dll) do ( echo %%~nxs call dumpbin ...

  7. Shell--cut用法

    cut是以每一行为一个处理对象的,这种机制和sed一样. cut接受三个定位方法: 1)byte: -b 2)characters: -c 3)fields: -d eg:提取第3,4,5,9的字节: ...

  8. 北京Uber优步司机奖励政策（2月26日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. 南京Uber优步司机奖励政策（12月14日到12月20日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. AIX7.1删除大批量文件(百万级、千万级）

    假设/data/test目录下含有数百万上千万的文件需要删除,可以选择的方式如下: 1.如果文件名不包含空白符.引号等特殊字符,则可以使用如下命令: find /data/test -type f | ...