SVG

概述:

    SVG 基于 XML 语法的图像格式,它可以任意改变其大小也不会变形,是一种和图像分辨率无关的可缩放矢量图。

优点:

    1.任意放缩:用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。

    2.文本独立:SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。

    3.较小文件:总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。

 4.超强显示效果:SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨力和打印分辨力。

 5.超级颜色控制:SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

 6.交互性和智能化:SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题,另一个问题就是SVG的本地运行环境下的厂家支持程度。

注:GIF、JPEG,png等都是位图,改变其尺寸大小图像会变形或会出现马赛克模糊等情况

用法:

SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。


SVG_第1张图片

上面是 SVG 代码直接插入网页的例子。效果图如下:


SVG_第2张图片

SVG 代码也可以写在一个独立文件中,然后用