SVG 与 HTML5 的 canvas 优缺点

最新推荐文章于 2024-05-23 13:27:10 发布

心灵小公寓

最新推荐文章于 2024-05-23 13:27:10 发布

阅读量9.8k

点赞数

分类专栏：技术 java

java 同时被 2 个专栏收录

70 篇文章 0 订阅

订阅专栏

技术

69 篇文章 0 订阅

订阅专栏

添加评论

默认排序按时间排序

14 个回答

gy zhao 程序员轻度强迫症

38 人赞同

Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。
从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。
同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
关于最后一点二者谁更有前途：从上面我们可以知道二者是有不同用途的，作为一个开发者，你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。

发布于 2011-06-06 8 条评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

sand no 数据之美 - http://yCoder.com

73 人赞同

这两种技术都搞过，几年前写过SVG，最近研究Canvas，两者各有各的适用范围：

Canvas适用场景

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

SVG适用场景

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

下面的内容引自：HTML5之图形绘制技术（Canvas Vs SVG）

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

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)，两者的主要特点见下面的表格：

SVG与Canvas主要特点

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

Canvas适用场景

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

SVG适用场景

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

编辑于 2014-01-11 8 条评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

周宁奕阿里-众安可视化工程师做过建筑骑过20…

21 人赞同

存在意味着合理不如问两者分别适合什么场景 canvas是个像素库绘制完了基本不记录过程更快 svg建立了一大堆可交互对象本性长于交互但性能会弱些但这种界限也在被一些js库打破如fabric.js 以及百度林峰的zRender 这些库在canvas上构建一层mvc层可以如svg一样操作和交互性能上往往比原生svg要好一些正如此在基于zRender的可视化库可以绘制数万个点倘使用svg 早挂了。而webgl-canvas实时绘点是百万级的所以看你的场景如果pc端强交互少元素 svg胜出 | pc端弱交互而强性能用canvas | pc端超强性能 webgl-canvas | 移动端弱交互原生canvas挺好（木有ie的世界真好） | 移动端强交互刚才提到的一些基于canvas的库不错（svg性能很挫） sorry这是个设备和需求的二维表偷懒了。个人的经验有误请拍

发布于 2015-05-11 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

Alex Zhao Knot.js作者, http://www.knotjs.com

9 人赞同

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

如果还不够直观，可以找一些类比：
canvas的工作方式就像传统的2d图形引擎比如GDI；而SVG的工作方式更像WPF(XAML)、HTML/CSS这类由标记控制的绘图引擎

发布于 2013-03-25 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

冰镇牛奶

6 人赞同

http://msdn.microsoft.com/zh-cn/library/ie/gg193983(v=vs.85).aspx

发布于 2014-01-21 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

幻影浪子软件工程师

5 人赞同

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

总结来w3shool.

发布于 2014-05-19 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

李国栋

2 人赞同

我是这样理解的：浏览器就是一个自动化的canvas 实时渲染svg格式图形
以canvas为基础开发的图表插件也是对内部矢量图形格式进行渲染
做图表
想要折腾就用canvas
简单美观
就用svg
另外svg当然不适合做游戏
万一哪天浏览器直接进化为3d渲染引擎直接拖个3d格式文件进来就能看也未尝不可
现阶段只是用canvas来做渲染引擎

发布于 2013-07-31 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

flyinhigh 我晕故我在

1 人赞同

手机上可能还是SVG更合适一些。

发布于 2014-06-02 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

知乎用户

1 人赞同

我觉得SVG在"遥远"的将来更有前途

发布于 2013-04-18 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

张国东艺术使生活变美好

svg,图像保真更适合网站页面视觉传达。

发布于 2016-11-05 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

潘多拉之欣前端开发

就我现在所看见的canvas的应用率要比svg高处很多个人觉得canvas比较有前途吧

发布于 2016-09-01 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

脱萝妇司机 Github 说我不是人，我要不要捐点祖传的D…

Canvas 与 SVG

Canvas 与 SVG

发布于 2016-08-26 添加评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

谢然二期前端班17年3月10日开课，详询QQ 2856…

10 人赞同

SVG跟Canvas的关系就像 几何与美术
So，你觉得哪个更有前途？

编辑于 2014-01-21 4 条评论感谢收藏 • 没有帮助 • 举报 • 作者保留权利

雷隐

如果是只能挑一样来学，还是建议svg，别问为什么．

心灵小公寓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG 与 HTML5 的 canvas 优缺点

添加评论分享默认排序按时间排序14 个回答38赞同反对，不会显示你的姓名gy zhao 程序员轻度强迫症38 人赞同Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编
复制链接

扫一扫