日期:2013-3-25 来源:GBin1.com
在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG。
SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生!
为什么使用SVG?
- 文件非常小
- 能够无损失的缩放尺寸
- 在Retina显示屏上效果超棒
- 能够控制图片样式设计,例如互动和过滤filter
浏览器支持
- IE8及其更低版本不支持
- Android 2.3及其更低版本不支持
- 其它浏览器都支持
如果你需要支持这些版本的浏览器的话,你可以使用Modernizr,如下:
if (!Modernizr.svg) { $(".gblogo img").attr("src", "images/logo.png"); }
或者使用如下更简单的代码:
SVG文件作为一般图片使用
你可以作为图片来直接使用,如下:
你可以像控制JPG或者PNG格式文件一样,控制图片的大小,如下:
在线调试:http://www.gbtags.com/gb/debug/77d50934-592b-4b8a-b591-e7068c7e38ef.htm
SVG文件作为背景图片使用
我们也可以使用SVG图片作为背景图片使用,如下:
..........总结
SVG是一个非常强大的图片格式,可以帮助你高效的处理图片,拥有比JPG或者PNG更灵活强大的图形展示方式,相信如果加以时日,必定成为最流行的图片处理方式!
via 极客标签
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/8288/viewspace-757196/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/8288/viewspace-757196/