参考链接：

　　菜鸟教程 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. js制作ppt阅读文档类型

    前几天开发中,客户要求在页面中展示一个类似ppt文档的一个东西,用轮播展示,但是有缩略图,和展示的大图,本想找些插件来做,后来想想,自己试下吧.. 有些简陋,但是能用,毕竟一行一行写的,留下来当笔记用 ...

  2. POJ1200(hash)

    Crazy Search Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27536   Accepted: 7692 Des ...

  3. Ajax+存储过程真分页实例解析(10W数据毫秒级+项目解析)

    周末闲来无事,突然想写个分页的东西玩玩,说走就走 在文章最后我会把整个项目+数据库附上,下载下来直接运行就可以看效果了.整个项目采用的是简单三层模式,开发平开是VS2010+SQL2012 一.我要做 ...

  4. ios NSString拼接方法总结

    NSString* string; // 结果字符串 02 NSString* string1, string2; //已存在的字符串,需要将string1和string2连接起来 03   04 / ...

  5. arm交叉编译器科普

    交叉编译工具链的命名规则为:arch [-vendor] [-os] [-(gnu)eabi] arch - 体系架构,如ARM,MIPS vendor - 工具链提供商 os - 目标操作系统 ea ...

  6. 《JAVASCRIPT高级程序设计》Ajax与Comet

    Ajax,是Asynchronous JavaScript + XML的简写,这一技术能向服务器请求额外的技术而无需卸载页面,会带给用户更好的体验.Ajax的核心是XMLHttpRequest对象.为 ...

  7. Madifest文件详解

    介绍 Madifest是个XML的描述文件,对于每个DLL有DLL的Manifest文件,对于每个应用程序Application也有自己的Manifest.对于应用程序而言,Manifest可以是一个 ...

  8. java中函数是值传递还是引用传递？

    相信有些同学跟我一样,曾经对这个问题很疑惑.在网上也看了一些别人说的观点,评论不一.有说有值传递和引用传递两种,也有说只有值传递的,这里只说下个人见解 先看一个例子 public class Test ...

  9. executssql 函数的每一句代码的意思

    Public Function Executesql(ByVal sql As String, Msgstring As String) As ADODB.Recordset Dim cnn As A ...

  10. 利用nodejs监控文件变化并使用sftp上传到服务器

    很久没写博客了,因为最近在用react+express做一个自己的工具型网站(其实就是夺宝岛抢拍器) 然后因为经常要改动,而且又要放到服务器上进行测试.总是要webpack,然后手动把文件上传上去,不 ...