对于开发人员而言,最直观的区别在于:
1.对于画在Canvas上的部件,你需要处理重绘。而SVG则不用,你修改svg dom则系统会自动帮你重绘
2.Hittest,即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上;而svg可以。
3.Canvas效率高得多

Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)

<img src="https://pic4.zhimg.com/b00e22b6281710f76bb784fe13ff9243_b.jpg" data-rawwidth="652" data-rawheight="233" class="origin_image zh-lightbox-thumb" width="652" data-original="https://pic4.zhimg.com/b00e22b6281710f76bb784fe13ff9243_r.jpg">

Canvas vs SVG

<canvas>和<svg>都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition),两者的主要特点见下面的表格:

&amp;lt;img src="https://pic1.zhimg.com/7cc17f3b9ce5f0d879fdfa2be9a54ca0_b.jpg" data-rawwidth="658" data-rawheight="279" class="origin_image zh-lightbox-thumb" width="658" data-original="https://pic1.zhimg.com/7cc17f3b9ce5f0d879fdfa2be9a54ca0_r.jpg"&amp;gt;

SVG与Canvas主要特点

根据两者的不同特点,Canvas和SVG有各自的适用范围

Canvas适用场景

Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制

SVG适用场景

SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景

&amp;lt;img src="https://pic3.zhimg.com/9b0e2025971c2ee23154f7331ac59426_b.jpg" data-rawwidth="657" data-rawheight="342" class="origin_image zh-lightbox-thumb" width="657" data-original="https://pic3.zhimg.com/9b0e2025971c2ee23154f7331ac59426_r.jpg"&amp;gt;

canvas 和 svg的更多相关文章

  1. HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  2. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  3. Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的

    SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SV ...

  4. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  5. 列表总结Canvas和SVG的区别

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

  6. H5 Canvas vs. SVG

    HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...

  7. canvas与svg区别

    canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...

  8. canvas与svg

    canvas与svg都是用于在网页上绘制图形(位图). canvas是HTML5新出来的一个标签,用来定义一块画图的区域(canvas本身没有绘制能力),用JavaScript来画图,可以绘制路径.矩 ...

  9. Canvas 和 SVG 的不同

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  10. HTML 5 Canvas vs. SVG

    pick up from http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 与 SVG 的比较 下表列出了 canvas ...

随机推荐

  1. MVCHelper 请求检验

    public class MVCHelper { //有 两 个ModelStateDictionary类,别弄混乱了要使用 System.Web.Mvc 下的 //如果添加引用中找不到System. ...

  2. 新手入门学习angular.js的心得体会

    看了一天的angular.js,只要记住这是关于双向数据绑定 和单向数据绑定就可以,看看开发文档,短时间内还是可以直接入手的,看个人理解能力(我是小白). 这几天开始着手学习angularjs的有关知 ...

  3. protel99se 问题汇总(不定期更新)

    1.在PROTEL99SE中,怎样改变敷铜的线宽? 规则---manufacturing----polygon connect style 里面设置:或Power polygon connect st ...

  4. 洛谷 2387 NOI2014魔法森林 LCT

    [题解] 我们先把边按照$a$值从小到大排序,并按照这个顺序加边. 如果当前要加入的边连接的两点$u$与$v$已经是连通的,那么直接加入这条边就会出现环.这时我们需要删除这个环中$b$值最大的边.因此 ...

  5. NEMA-0183(GPRMC GPGGA)详细解释

    NEMA-0183(GPRMC GPGGA)详细解释 nmea数据如下:  $GPGGA,121252.000,3937.3032,N,11611.6046,E,1,05,2.0,45.9,M,-5. ...

  6. [bzoj1468][poj1741]Tree_点分治

    Tree bzoj-1468 poj-1741 题目大意:给你一颗n个点的树,求树上所有路径边权和不大于m的路径条数. 注释:$1\le n\le 4\cdot 10^4$,$1\le m \le 1 ...

  7. oracle 学习笔记之触发器

    说明 数据库触发器是一个与表相关联的.存储的PL/SQL程序. 每当一个特定的数据操作语句(Insert,update,delete)在指定的表上发出时,Oracle自己主动地运行触发器中定义的语句序 ...

  8. Java UDP通信简单实现

    1.Java实现方式 1)server端 /** * UDPserver端 * */ public class UdpServer { // 定义一些常量 private final intMAX_L ...

  9. hdu1595find the longest of the shortest 最短路

    //给一个无向图,问删除一条边,使得从1到n的最短路最长 //问这个最长路 //这个删除的边必定在最短路上,假设不在.那么走这条最短路肯定比其它短 //枚举删除这条最短路的边,找其最长的即为答案 #i ...

  10. poj 3468 A Simple Problem with Integers(线段树+区间更新+区间求和)

    题目链接:id=3468http://">http://poj.org/problem? id=3468 A Simple Problem with Integers Time Lim ...