关键词：
Canvas和SVG是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具。
Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。我们很容易联想到另一个同样很优秀的web前端可视化库D3，D3是也最流行的可视化库之一，它被很多其他的表格插件所使用。D3底层基于SVG技术，与Canvas完全不一样，SVG的本质是一个XML 文档。
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准。
Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点。
Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
这两种技术之间的主要区别是：
Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
现在对两种技术做对比归纳如下：
Canvas
1)依赖分辨率
2)不支持事件处理器
3)弱的文本渲染能力
4)能够以 .png 或 .jpg 格式保存结果图像
5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1)不依赖分辨率
2)支持事件处理器
3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5)不适合游戏应用
以上对Echarts底层技术（Canvas）结合同类技术（SVG）做了简单的对比介绍，尽管从应用层的开发来说，我们可以不去关注原理，但我一直相信，了解技术的本质，更加有利于我们开发出强大且优秀的应用。
canvas和svg的区别
摘要:结合Echarts和D3，介绍Canvas和SVG各自的特点和区别Canvas和SVG是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具。Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图API。我们很容易联想... 查看详情
canvas和svg的区别
什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。什么是SVG？SVG是一种使用XML描述2D图形的语言。SVG基... 查看详情
SVG 和 HTML5 Canvas 有啥区别？
】SVG和HTML5Canvas有啥区别？【英文标题】：WhatisthedifferencebetweenSVGandHTML5Canvas?SVG和HTML5Canvas有什么区别？【发布时间】：2011-06-2703:38:35【问题描述】：SVG和HTML5Canvas有什么区别？他们似乎都对我做同样的事情。基本上，它们都使用... 查看详情
canvas和svg区别
参考技术ACanvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。描述：描述：CanvasSVG参考：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp 查看详情
html中svg和canvas的区别
...SVG和CANVAS两样都可以在网页上作图，那么它们有啥显著的区别吗？另外我想问：比如我先作一个圆，然后在后期要去调整大小和位置，用那个编写程序来实现这个过程更为方便？望大神解答补充问下：这两样，那个里面有类似图... 查看详情
svg与canvas的区别
内联SVG 什么是SVG指可伸缩矢量图形定义用于网格的基于矢量的图形使用XML格式定义图形是万维网联盟的标准SVG的优势可通过文本编辑器来创建和修改SVG图像可以被搜索、索引、脚本话和压缩可伸缩在任何分辨率下被高质量的... 查看详情
canvas与svg的区别
1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布； 2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而c... 查看详情
canvas和svg区别
Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。Canvas描述：通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变，会重新进行绘制。SVG描述：一种使用XML描述的2D图形的语言SVG基于XML意味着，S... 查看详情
canvas与svg的区别
canvas是画布。位图不要在style中给canvas设置宽高。会有位移差varc=document.getElementById("c1");//给c设置一个绘图环境，得到的是一个对象varcan=c.getContext("2d");svg svg是矢量图svg绘制矢量图canvas用于绘制位图svg使用xml格式绘制图形svg要... 查看详情
前端面试html—svg和canvas有什么区别？
主要有以下区别：1.canvas是H5时期才有绘图方法，而svg已经有了十多年的历史；2.canvas绘图是基于像素点，是位图，如果进行放大或缩小会失真；svg基于图形，用html标签描绘形状，放大缩小不会失真&... 查看详情
canvas与svg的区别
Canvas1.canvas通过javascript来绘制2D图形。2.canvas是逐个像素进行渲染。3.在canvas中，图形绘制完成后，它就不会继续得到浏览器的关注。如果位置、大小等发生变化，那么整个canvas场景也需要重新绘制，根据变化不同，会产生一定程... 查看详情
总结：canvas与svg的区别(代码片段)
canvas(画布位图) 1.最好不要在style中给canvas设置宽高，会有位移差 2.canvas样式： . 绘制矩形： fillRect() 绘制一个填充的方块，默认颜色是黑色 strokeRect()绘制带边框的方块 绘制线条 mo... 查看详情
canvas画布与svg的区别
CANVAS是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大... 查看详情
canvas与svg区别
HTML5新特性之五——SVG绘图 Canvas绘图SVG绘图绘图类型位图矢量图缩放失真不失真颜色细节丰富不够丰富应用领域照片、游戏统计图、图标、地图内容JS绘制每个图形都是标签事件绑定不方便方便 ScalableVectorGraphiph，可缩放... 查看详情
svg
SVG思考：位图和矢量图的区别？csscanvas和svg又有什么区别？位图的质量是根据分辨率判定的，分辨率越大，图像画面越清晰；矢量图没有分辨率的概念。位图放大后会越来越不清晰，像马赛克一样；矢量图则不会。canvas类似于位... 查看详情
html5中哪个元素可以点击
...vas都做了很细致的研究和使用，大致弄清了这两者之间的区别，下面就为大家进行详细的讲解，希望对大家能够有帮助。首先为大家简单介绍一下这两种方法的工作原理，SVG是在XML中描述二维图形，所以在SVGDOM中的每一个元素都... 查看详情
搞懂svg/canvas中nonzero和evenodd填充规则(代码片段)
...们用3个点，连成一个三角形，则这两种填充规则没什么区别，如下对比（C 查看详情
3.canvas与svg的区别(代码片段)
canvas是通过javascript来绘制的2D图形canvas是控制像素来渲染的一旦渲染完成，浏览器就不会关注了，如果位置发生变化，整个场景就需要重新绘制 <canvasid="mycanvas"width="500"height="300"></canvas><scripttype="text/javascript">varc... 查看详情