SVG图片

SVG有什么优势？

  • 文件体积小，能够被大量的压缩
  • 图片可无限放大而不失真(矢量图的基本特征)
  • 在视网膜显示屏上效果极佳
  • 能够实现互动和滤镜效果

SVG的制作方法

用Adobe Illustrator设计制作。Adobe Illustrator能直接把文件保存成SVG格式SVG的用法

1) 如果你把SVG保存成文件，你可以直接把它放到<img>标记里。

<img src="kiwi.svg" alt="新西兰鹬鸵鸟">

你可以向PNG和JPG图片那样改变它的大小

<img style=”width:100px;height:100px;” src=”kiwi.svg”/>

浏览器支持情况

如果你想要在所有浏览器中都支持SVG图片，你可以用Modernizr测试浏览器的支持情况，必要时以普通图片代替：

if (!Modernizr.svg) {

  $(".logo img").attr("src", "images/logo.png");}

 

2) SVG背景图的用法

跟SVG图片用法相似，你也可以在背景图(background-image)中使用SVG。

<a href="/" class="logo">

  新西兰鹬鸵鸟</a>

.logo {

  display: block;

  text-indent: -9999px;

  width: 100px;

  height: 82px;

  background: url(kiwi.svg);

  background-size: 100px 82px;}

注意，我们将background-size的大小设置的跟logo元素的大小一致。我们必须这样做，否则背景图会超出logo元素而隐藏一部分。background-size的长宽比例要和原图一致。但你可以使用background-size的常量值contain或cover来达到不同的效果。

浏览器支持情况

各种浏览器对以SVG为背景图(background-image)的支持情况可以在这里看到。但基本来说和SVG图片一样。唯一不支持的浏览器是IE6/8。

Modernizr在这里也能起到作用，而且更高效。如果浏览器不支持SVG背景图时，SVG文件将不会被加载，因为Modernizr在检测到不支持SVG时，在HTML上加了"no-svg"CSS类，于是我们可以这样利用它：

.main-header {

  background: url(logo.svg) no-repeat top left;

  background-size: contain;}

.no-svg .main-header {

  background-image: url(logo.png);}

另外一个更巧妙的方法是使用多背景图技术。因为各浏览器对SVG和对多背景图技术的支持情况很相似，如果支持多背景图，也会支持SVG，所以，我们的CSS声明可以这样写：

body {

  background: url(fallback.png);

  background-image: url(image.svg), none;}

3) "inline" SVG的用法

你实际上可以把SVG代码从SVG文件里拷贝出来，直接粘贴掉HTML里使用，它们跟你直接使用普通图片的效果一样。

<body>

 

   <!-- 把SVG代码粘贴到这里，图片会显示出来！  -->

 

</body>

这样做的好处是图片数据就在HTML页面里，不需要浏览器单独执行一次请求下载它。换句话说，它跟使用Data URI的优势一样。但不好的地方也是一样。比如“臃肿”的页面代码，缓存问题等。

如果你使用后台语言，例如PHP，可以用include函数让页面更整洁：

<?php include("kiwi.svg"); ?>

优化SVG

你应该不会吃惊：用Adobe Illustrator保存的SVG文件并不是优化过的。里面有DOCTYPE、生成工具署名等无用的信息。SVG文件本身很小，但谁会嫌弃更小？Peter Collingridge有一个在线的SVG优化工具。传上去大的，下载出小的。

如果你有强迫症，你还可以试试这个Node JS工具。

更多：原文来自http://www.webhek.com/svg/?utm_source=tuicool&utm_medium=referral

 

posted @ 2016-04-05 16:35  nohuman  阅读(1623)  评论(0)    收藏  举报