svg图片的使用方法

最新推荐文章于 2024-07-31 16:50:09 发布

???111

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量722

点赞数

原文链接：http://www.cnblogs.com/lch880/p/3458011.html

版权

　　第一次来认认真真的研究了下svg图片，之前只是在网上见过，但都是一晃而过也没当回事，最近网站改版看到同事有用到svg格式的图片，想想自己干了几年的重构也没用过，这些细节的知识是应该好好研究研究了。暂时还没研究得完全透切，先记下目前为止所看到的吧不然又给忘了。

　　svg可缩放矢量图形（Scalable Vector Graphics），顾名思义就是任意改变其大小也不会变形，是基于可扩展标记语言（XML），他严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，可以用记事本打开，应该更多的使用场景是手机端，因为手机分辩率差异化大。

　　大家常听说的就是矢量图和位图两种格式了，矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出，改变其大小图不会变形；而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。SVG是一种矢量图形格式，GIF、JPEG，png等都是位图，改变其尺寸大小图像会变形或会出现马赛克模糊等情况。有了两者的概念后，SVG较GIF、JPEG的优势显而易见。

　　svg的优势：

　　1．任意放缩。

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

　　2．文本独立。

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

　　3．较小文件。

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

　　4．超强显示效果

　　　　SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。

　　5．超级颜色控制。

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

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

　　自己动手实例：

　　1.先准备好要用到的图片的矢量图，再AI里拼合好一张图后先保存一张AI格式的源文件，再导出一张svg格式的图片（AI里有该格式）；

　　2.在css里的应用方法就跟CSS Sprites拼合的png格式的图一样，定位位置在AI里可以获取到。

1 <ul>
2     <li class="one"></li>
3     <li class="two"></li>
4     <li class="three"></li>
5     <li class="four"></li>
6 </ul>

li{width:159px; height:66px; background:url(tubiao.svg) no-repeat;}
.one{background-position:0 0;}
.two{background-position:0 -72px;}
.three{background-position:0 -171px;}
.four{background-position:0 -270px;}