svg的相关学习,好像就做了一个简单的按钮。另外就是思维导图软件可以把图导出成svg格式,可以贴到博客或者其他地方分享。
什么是svg?SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
那么SVG与我们的Canvas有什么区别呢?
SVG是一个中使用XML描述2D图形的语言。
SVG特点:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如说谷歌地图)
复杂度高会减慢渲染速度(任何过度使用DOM的应用都不会快。)
不适合游戏应用。
Canvas:
Canvas通过JavaScript来绘制2D图形。
Canvas是逐像素进行渲染的。
在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
特点:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以.png或者.jpg格式保存图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘