参考链接：

　　菜鸟教程 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. DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  2. redis的配置详解

    redis 127.0.0.1:6379> CONFIG GET loglevel 1) "loglevel" 2) "notice" Redis 的配置 ...

  3. LoadRunner相关架构图

    LoadRunner概览图: Lr架构图:

  4. POJ3254(入门状态压缩dp)

    Corn Fields Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13203   Accepted: 6921 Desc ...

  5. 关于OI本地简易评测姬3.0发布的通知

    本辣鸡蒟蒻的OI本地评测姬3.0出炉辣.[由wjc大蒟蒻编写,rxb神犇秒秒钟搞出编译器命令行,解决了评测姬编译一大难关并便携化,也为评测姬设计提出了宝贵的建议],目前支持pas和cpp(本辣鸡错了, ...

  6. C#中let字句

    应用场景: 在查询表达式中,存储子表达式的结果有时很有用,这样可以在随后的子句中使用. 可以使用 let 关键字完成这一工作,该关键字可以创建一个新的范围变量,并且用您提供的表达式的结果初始化该变量. ...

  7. RAS 加密 解密

    蚂蚁金服电话面试时,问到了RAS加密解密,感觉回答的有点模糊,遂写个例子加深一下印象 package cheng.test.cipher;import java.io.FileInputStream; ...

  8. win10更新时遇到错误0x80070002的正确处理方法

    win10更新Flash Player.或者在  “启用或关闭windows功能” 经常出现提示错误0x80070002,这要怎么解决呢?这里介绍下正确的错误代码0x80070002解决办法. 严肃提 ...

  9. JAVA中的char类型

    1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a';  //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=1 ...

  10. 763A - Timofey and a tree

    A. Timofey and a tree time limit per test 2 seconds memory limit per test 256 megabytes input standa ...