SVG 与 HTML5 的 canvas 各有啥优点,哪个更有前途
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG 与 HTML5 的 canvas 各有啥优点,哪个更有前途相关的知识,希望对你有一定的参考价值。
参考技术A SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 javascript 事件处理器。 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。 Canvas Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。 Canvas 与 SVG 的比较 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用canvas与svg区别
HTML5新特性之五——SVG绘图
|
Canvas绘图 |
SVG绘图 |
绘图类型 |
位图 |
矢量图 |
缩放 |
失真 |
不失真 |
颜色细节 |
丰富 |
不够丰富 |
应用领域 |
照片、游戏 |
统计图、图标、地图 |
内容 |
JS绘制 |
每个图形都是标签 |
事件绑定 |
不方便 |
方便 |
Scalable Vector Graphiph,可缩放的矢量图,此技术在2000年就已经存在了,独立于网页的一门技术;HTML5之后,纳入了HTML5标准标签库,并进行了一定的瘦身。
SVG技术的使用方法:
(1)HTML5之前的使用方法:
SVG标签不属于HTML4或XHTML标签,只能编写在独立的XML文件中,首先编写一个SVG文件(本质是一个XML文件),然后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件
(2)HTML5之后的使用方法——H5已经把SVG标签采纳:
在HTML文件中直接使用SVG相关标签即可
<svg>默认为300*150的inline-block</svg>
以上是关于SVG 与 HTML5 的 canvas 各有啥优点,哪个更有前途的主要内容,如果未能解决你的问题,请参考以下文章
SVG 与 HTML5 的 canvas 各有啥优点,哪个更有前途