参考链接：
　　菜鸟教程 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. nginx的docker化部署

    nginx的docker化有一个隐藏的坑,就是其默认的配置目录(/etc/nginx)需要先从容器中拷贝出来. 拉取镜像 docker pull nginx 启动容器 docker run -d -- ...

  2. 【Hadoop故障处理】在高可用（HA）配置下，8088端口无法访问，resourcemanager进程无法启动问题

    [故障背景] 8088网页打不开,因8088是yarn平台的端口,所以我从yarn开始排查,首先到各个机器上使用jps命令查看yarn的各个节点是否启动,发现虽然有nodemanager进程,但是主节 ...

  3. chrome调试微信

    打开微信,设法打开网址 http://debugx5.qq.com (推荐直接把这个网址发给文件传输助手,然后就可以直接打开链接了) 在打开的网页中选择 [信息]->[TBS settings] ...

  4. hadoop生态搭建（3节点）-14.redis配置

    # ==================================================================规划node1 redis:7000 7001 192.168. ...

  5. 第8章 ZooKeeper操作

    目录 8.1 集群环境搭建 1.上传ZooKeeper安装文件 2.编写配置文件 3.拷贝ZooKeeper安装信息到其它节点 4.修改其它节点配置 5.启动ZooKeeper 6.查看启动状态 7. ...

  6. seleniun 爬取淘宝网

    import re from selenium import webdriver from selenium.common.exceptions import TimeoutException fro ...

  7. 反射vs简单工厂模式

    interface Computer { void printpc(); } class lenovo implements Computer { @Override public void prin ...

  8. fedora19之后的版本安装mysql

    正准备学习linux平台的mysql,却发现在fedora21平台下安装mysql总是失败,查了些资料,总结如下: 错误示范: 按照安装软件的经验,习惯性输入以下的命令: $sudo dnf inst ...

  9. FPGA学习之路——PLL的使用

    锁相环(PLL)主要用于频率综合,使用一个 PLL 可以从一个输入时钟信号生成多个时钟信号. PLL 内部的功能框图如下图所示: 在ISE中新建一个PLL的IP核,设置四个输出时钟,分别为25MHz. ...

  10. BZOJ1588_营业额统计_KEY

    题目传送门 分析题意可得,希望求与每个数最相近的数. 二叉搜索树的简单题,因为可能被卡成O(N),考虑平衡树. 因为Treap较简单,此处用Treap编写代码. code: #include < ...