参考链接：
　　菜鸟教程 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. Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  2. SASS实现代码的重用：混合器Mixin、继承

    1. 继承: @extend sass允许一个选择器,继承另一个选择器,通过@extend实现 .class1{ border: 1px solid #333; } .class2{ @extend ...

  3. python中的__all__

    在定义一个模块的时候,在开头处加上 “ __all__ = ["xxx1", "xxx2"] ”(xxx可以是方法.类.变量等希望让外界访问的值),那么在外部通 ...

  4. 转载：隐藏bat窗口在后台运行（找了好久）

    https://mp.weixin.qq.com/s?__biz=MzU4MjY1ODA3Nw==&mid=2247484277&idx=1&sn=8b5d98aab3827b ...

  5. js polyfill , to developing the cross browser js

    https://github.com/paulmillr/console-polyfill https://github.com/Modernizr/Modernizr/wiki/HTML5-Cros ...

  6. 从PRISM开始学WPF（七）MVVM（三）事件聚合器EventAggregator-更新至Prism7.1

    原文:从PRISM开始学WPF(七)MVVM(三)事件聚合器EventAggregator-更新至Prism7.1 事件聚合器EventAggregator [7.1updated]除了app部分,没 ...

  7. Python：pickle模块学习

    1. pickle模块的作用 将字典.列表.字符串等对象进行持久化,存储到磁盘上,方便以后使用 2. pickle对象串行化 pickle模块将任意一个python对象转换成一系统字节的这个操作过程叫 ...

  8. 腾讯WeTest开启“测试扶持计划”赠送重磅福利（含MTSC/TiD门票）

    WeTest导语 伴随着互联网行业的发展,与各行各业的连接更加紧密,竞争也变得越发激烈,用户对于产品的体验开始变得更加“挑剔”.然而目前互联网产品却始终受到各类质量问题的困扰.以兼容问题为例,应用平台 ...

  9. 「日常训练」湫湫系列故事——设计风景线（HDU-4514）

    题意与分析 中文题目,木得题意的讲解谢谢. 然后还是分解成两个任务:a)判环,b)找最长边. 对于这样一个无向图,强行转换成负权然后bellman-ford算法求最短是难以实现的,所以感谢没有环--我 ...

  10. 「赛后补题」Meeting（HDU-5521）

    题意 A,B两个人分别在1和n区.每个区有若干点(区之间的点可以重复,各个区内点间的距离一致),给出区之间有联系的图以及到达所需时间.求两个人见面最短时间以及在哪个区碰面(可有多个) 分析 隐式图搜索 ...