问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
产生这个问题前，我先查询的是svg和canvas的区别，有一个根本的却别是：
svg可以当作xml，可以放大缩小，像html一样操作
而canvas则是一个实实在在画布，像swf那样，编辑起来不是很方便，但是效率高
从这里可以看出两者各有优劣，再后来我又看了CSS3，我发现CSS3结合了两者的长处：
可以结合DOM，和svg一样容易操作
渲染效率高，可以像canvas在dom上画出任意形状
那么我有这么几个问题：
有了css3之后，我们还需要svg还有canvas吗？
他们各自的有缺点是什么
什么场合适合用CSS3，什么场合适合用svg，什么场合适合canvas
目前这三者有什么知名的框架来便于操作、使用吗？
他们三者目前浏览器兼容情况如何，希望能提供参考页面或者图表说明
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
CSS3在DOM节点多的情况下效率严重下降。
CSS3的旋转比canvas（2d）要好。
CSS3的文字渲染比canvas好。
canvas可以在更底层操作。
canvas支持webgl，可秒杀一切。
canvas（2d）兼容性还不错。
webgl兼容性坑爹，移动平台支持不好。
网页效果请用CSS3；应用、游戏、图表用canvas；如果你觉得展示数据的时候css3不够自由，canvas太麻烦可以用svg。
不是很熟悉
还有一些用来制作css3动画的工具，不过没见到让人满意的……
用的很少，这个勉强算一个？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我首先想到的是svg的兼容性比css3好，svg支持IE8+，css3和html5的部分属性在ie8下不支持
其次，说css3像svg一样可以结合dom，这有点抬举它了，svg基于xml，它的结构很好，很适合修改和扩展，而如果用css3重写就是html，语义上不对不说，结构也得靠工程师自己来设计和优化，扩展性和修改能力上远不如svg。所以，复杂图形上面，svg的优势很明显，而简单的图形，可以说css3跟svg差不多。
canvas的话，因为跟js结合更紧密，所以一些逻辑操作要比css3方便太多，比如用canvas逐帧写动画和游戏，css3实现的话会更加吃力一些。
其实css3我认为依然是对css的扩展，更多是从扩展样式表现方面的考虑，从程序逻辑上来说，只能依靠模拟来实现，在这方面依附于js的canvas还是有比较大的优势。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
canvas的操作更底层（使用WebGL的情况下） 效率更高 以后可能成为新的游戏平台
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我 确实不知道怎么回答好
只是来逛逛 ，你们加油
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知HTML5中40个最重要的技术点 | 程序师114网址导航HTML5网页中SVG和Canvas以及IMG图片的转换方法-html5教程-网页制作-壹聚教程网HTML5网页中SVG和Canvas以及IMG图片的转换方法
下面我们一起来看一个HTML5网页中SVG和Canvas以及IMG图片的转换方法，希望文章对各位有帮助．
网页中显示的图片或者是图形，一般就只有几种，对于静态的内容，大多会选择jpg、png、gif的图片，这些图片称之为位图，放大以后会出现锯齿，也是不易更改的图形，如果想要实现放大和更准确的显示图形，svg和canvas会是更好的选择，不过使用canvas可能会遇到兼容问题。
一般的图表都是采用矢量可绘制的格式图片，当然也有使用Flash技术的，对于浏览器兼容来说，很难满足既有足够的精确度，而图形足够小方便传输，不过有一种解决方法，就是将这些图形进行转换，今天就给大家说说HTML5网页中SVG和Canvas以及IMG图片的转换方法。
SVG转换为Canvas
假设我们有以下的一段svg代码
&div id=&svgContainer&&&
&&& &svg id=&svg&&&/svg&&
首先需要获取svg标签以及内容：
var svgHtml = document.getElementById('svgContainer').innerHTML();
将svg转成canvas需要用到google的一个插件canvg，可以上官网下载，也可以直接远程引用进来
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas。
&canvas id=&canvasId&&&/canvas&
canvasId = document.getElementById('canvasId');
canvg(canvasId,svgHtml)
Canvas转换为图片
然后就是将canvas转成图片了，这个更加简单了
var imgSrc = document.getElementById(canvasId).toDataUrl(&image/png&);
这其实是将canvas转成了图片，并返回图片的所有内容数据，如下即可显示图片：
&img src='' id='myImg' /&
document.getElementById('myImg').src = imgS
这就是HTML5网页中SVG和Canvas以及IMG图片的转换方法，这个还是很有用的，因为不同的浏览器对svg和canvas的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。
上一页： &&&&&下一页：相关内容5629人阅读
前端（42）
& & & &如题，此处主要讨论网页上实现画图的技术，像java的swing，.net的chart不在今天的讨论范围。
& & & &下文中所有代码，在chrome 29.0测试通过。
& & & & 代码下载：
o主流的画图方式？
o各方式之间的差异？
3.1 SVG简介
ScalableVector Graphics，可伸缩矢量图形；
它是使用 XML来描述二维图形和绘图程序的语言；
它是一种与分辨率无关的矢量图形格式；
SVG于日成为W3C推荐标准。
1、XML，它遵循严格的XML格式定义，如在svg文件头部xml版本定义及编码定义代码上方加空行，浏览器访问时报错，提示xml定义必须在文档首部。
二维图形：svg更适合于处理平面图形。
绘图程序：建筑图，工程图，电路图，放大而不失真，这个应用是它最大的优势。是其它几种画图方式无法取代的。
2、来历，2000年的时候，网页上显示图形没有统一的标准，各个厂家的协议互不兼容，在这种情况下W3C就发起建立图像显示的标准，参加的公司有许多，包括一些大公司，比如SUN、Adobe、苹果。经过几年的努力，2011年9月，1.0版，2013年1月，1.1版，该版本正式被确立为标准。最新的是SVG2.0，草稿在今年6月份已经发布。
3、它是一个开放的标准，不仅仅是一个标签或者语言或者API，这些都是它的子集。
开放，即自由、免费地使用，与flash不同，flash是私有技术。
矢量，有大小、方向，位图，仅有大小。
位图与矢量图比较：
简要说明位图、矢量的区别。
这张图片展示了位图和矢量图的区别。位图是由点构成的，矢量图则是由一些形状元素构成。
放大位图可以看到点，而放大矢量图看到的仍然是形状。演示svg illustrate效果。
为什么要用SVG
SVG代码示例：
&!DOCTYPE HTML&
&text id=&txt& x=&20& y=&20& style=&fill:blue&&SVG&/text&
分辨率无关；
基于DOM节点的API；
无须必要的HTTP请求；
1、&SVG实现不管什么大小的屏幕，缩放比例或着分辨率，都不影响图形的质量。直到SVG出现之前，我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里我们可以创建各种矢量形状。
下图是它的代码，无论屏幕分辨率是多少，只要向客户端传递这些文本就可以了，比image方式节省流量。过渡到第三点。
2、每个img，都是一个需要请求的文件。如果图像用一组DOM节点来代替，可以减少额外的HTTP请求，使你的网站速度更快，对用户更加友好。一部分图表型网站，如股票、基金，采用此方案。
3、svg里每个元素都是一个对象，是DOM树的一个节点，对于其它标签通用的属性或事件，对svg包含的标签同样适用。
4、其它优点，简单交互脚本，与第二点相关，可以用JavaScript进行交互，控制某个元素的样式等。D3.js、Raphael.js库辅助。
3.3 如何入门
主流的画图方式
4.1 画图方式
&&&&SVG、Canvas、Fusioncharts、Anychart
1、web画图主要可以分为两类：
&&& Fusion Charts：让数据亮瞎你的眼睛；
&&& AnyCharts：跨平台的数据可视化解决方案，6.0以前，flash+js，最新的6.0版加入svg，实现支持html5，flash+svg；
&&& canvas：html5新标签；svg：html老标签；
下面四个都是采用flash+js技术，fusioncharts，anychart收费，open flash chart开源且免费，有2个java版的api，其中一个是中国人写的。
JFreeChart是JAVA平台上的一个开放的图表绘制类库。
4.2 Canvas
&是一个标签，用来定义图形；
&只是一个图形容器，必须使用脚本绘制图形；
&Apple公司为了客户端矢量图形而设计；
&Safari中绘图能力为Dashboard组件所用；
1、canvas帆布、画布之意；
2、定义中的第二点大大限制了它的受欢迎程度；
3、对HTML扩展的根本原因在于，HTML 在Safari 中的绘图能力也为 Mac OS X 桌面的Dashboard 组件所使用，并且Apple希望有一种方式在Dashboard 中支持脚本化的图形。
4、canvas标记最早出现在Safari1.3中，后来Firefox 1.5 和Opera 9也开始支持，目前canvas已经成为HTML5中一个正式的标签。
&Canvas代码示例：
&!DOCTYPE HTML&
&canvas id=&myCanvas&&&/canvas&
&script type=&text/javascript&&
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
4.3&FusionCharts
跨平台、跨浏览器的flash图表组件解决方案；
InfoSoft Global公司的一个产品，2002年发布第一个版本；
1、fusion是融合的意思，chart是图表，图表融合组件；
2、InfoSoft公司是专业的flash图形方案提供商；
3、最新版本v3；
fusioncharts代码示例：
&!DOCTYPE HTML&
&body onload=&init();&&
&div id=&chartContainer&&&/div&
&script src=&FusionCharts.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
function init() {
var chart = new FusionCharts(&Column3D.swf&, &myChartId&, &500&, &300&);
chart.setDataURL(&date.xml&);
chart.render(&chartContainer&);
&graph caption='每月销售额柱形图'&
　　 &set name='一月' value='462' color='AFD8F8' /&
4.4&AnyChart
跨平台、跨浏览器的，基于flash/js的图表控件；
&&& 成立于2003年；
1、最新的版本6.0支持svg，所以可以理解为它是flash、js、svg多门技术的应用；
anychart代码示例：
&!DOCTYPE HTML&
&script src=&AnyChart.js& type=&text/javascript&&&/script&
&script type=&text/javascript& language=&javascript&&
//&![CDATA[
var chart = new AnyChart(&AnyChart.swf&);
chart.width = 700;
chart.height = 300;
chart.setXMLFile(&anychart.xml&);
chart.write();
anychart.xml
&?xml version=&1.0& encoding=&UTF-8&?&
&anychart&
&chart plot_type=&CategorizedHorizontal&&
&series name=&Year 2003& type=&Bar&&
&point y=&63& /&
&chart_settings&
&text&Sales of ACME Corp.&/text&
&/chart_settings&
&/anychart&
各方式的差异
5.1 SVG vs Canvas
下表列出了 canvas 与 SVG 之间的一些不同之处。
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘
不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用
信息来源w3school网站。
1、2、依赖分辨率，换种说明就是不支持可伸缩性。canvas交互基于鼠标坐标，svg交互基于对象。
前两点使用canvas2.html进行演示。
3、显示文本，(100,100)，canvas为文本左下角坐标，svg为文本正中间的坐标。
弱文本渲染能力？
4、svg支持格式较多，矢量图形，支持png，jpg，bmp，用一些工具甚至可以保存为svg格式的图片，如adobe illustrator。
Svg里每个元素被视为一个对象，是dom的一个节点，复杂度高意味着对dom节点进行频繁的操作，节点属性变化时，浏览器默认会重绘节点，
这样就降低了渲染速度。
通过word-wap.svg进行演示。
5、由第4点导致。且不适合进行大数据量的处理，如有1百万个点坐标，在界面上画出这些点。它的渲染速度不是很快。
5.2 SVG or Canvas
1、SVG和canvas都能实现几乎相同的结果，功能也完全重复。
2、高保真度的复杂向量文档已经成为并将继续成为SVG 的最强大的功能。两个原因：保存足够多的详细的文档，提供从数据库生成形状的能力。
如 建筑图、电子图、地图。
3、CanvasAPI 允许开发人员读写像素，这里唯一的限制是速度和想象力。如图像处理，先进行像素扫描，图像二值化。
4、图表和图形需要矢量图，Canvas或SVG 都可以使用。但是，由于 SVG固有的功能，它常常是更好的选择。
5.3 FusionCharts vs AnyChart
flash图表组件，跨平台、跨浏览器，丰富的图表类型，支持html5，界面交互性、美观性，功能，详尽的文档和代码示例。
FusionCharts专门为Python,GWT 等平台开发了插件；
FusionCharts 支持可滚动可缩放的图表；
AnyChart优势：xml接口驱动完成图表自定义；
AnyChart优势：采用ActionScript 3.0编译；
&&&两者在图表的丰富性和样式美观性上不相上下，在功能上，FusionCharts更丰富一些，当然价格更贵。
1、功能，相似。图表类型：柱形图、饼图、气泡图、雷达图。自定义显示方式和图表样式。
2、可滚动可缩放：新版的已支持触摸屏。
3、GWT，google
web工具包，使用java语言编写ajax前端，编译为优化的js。可以用它来创建UI组件，在项目中使用。重量级的工具包。
4、ajax无刷新切换图标类型，调试模式：图表出现异常时会迅速启动故障识别。
5、AnyChart，它由XML接口驱动完成图表自定义，无需修改任何Flash数据源。可以手动创建XML文件，也可以使用AnyChart自带的向导工具。
6、ActionScript是针对AdobeFlash Player而设计的一门编程语言，与javascript相似，它在 Flash内容和应用程序中实现了交互性、数据处理以及其它许多功能。
7、ActionScript与flash关系：AS就是制作flash中，添加高级动画或者是交互所用的语言。如按钮，游戏，交互。
5.4&FusionCharts or AnyChart？
&入门时间：均易上手；
&开发文档与资源：中文学习资料两者相差不大，且均拥有庞大的用户群；
&购买价格：企业版，FusionCharts 5万，AnyChart 3万，2012年8月数据；
1、足够多的详细的文档，提供从数据库生成形状的能力。
2、从咱们公司看，目前基本都是使用FusionCharts。
3、FusionCharts提供源代码，AnyChart不提供，这点对国外公司可能有影响，但是对国内的公司，应该是没有影响的。大家都从网上下载了，很少有人愿意花几万人民币买几个js或swf文件。
&Canvas：像素操作，数据量较大；
&SVG：清晰度，矢量图形，个人研究；
&FusionCharts：更多平台兼容，滚动及缩放;
&AnyChart：xml文件，复杂flash效果;
立体效果，可参考css3实现，举例。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：252955次
积分：3481
积分：3481
排名：第6401名
原创：93篇
转载：89篇
评论：26条
(4)(3)(3)(15)(12)(1)(2)(1)(2)(1)(1)(4)(2)(2)(1)(1)(4)(6)(12)(6)(16)(16)(7)(5)(10)(14)(9)(2)(5)(1)(1)(3)(10)(1)(2)