应用指南

SVG是一种用 XML 定义的语言，用来描述二维矢量及矢量/栅格图形。 比如常用的矢量设计软件Illustrator中的形状、路径，或者是用Illustrator创作的任何图形都是矢量图形。 SVG是跟web中常用的JPEG一样是一种的图形格式。 但是SVG比其它图形格式有一个很突出的特点，就是能使用CSS / JS等web技术对它进行控制。

在网页上使用SVGs 有不同的使用方法。对于这些使用方法要具体问题具体分析，因地制宜的采用。有些使用方法是要避免使用的。如果，你只是想使用SVG跟分辨率无关和文件体积这两个特性，你可以使用img或者是使用CSS中background-image来引入SVG格式的图形，就像使用其它的图形格式一样简单。

总结

如果你想尽可能使用发挥SVGs的特性，那使用<object>来使用SVG是最好的方法。 当然，你也可以直接把SVG代码直接插入到html文件中来节省HTTP 请求， 要记住的是，它就不能被缓存了哦。 如果仅仅是想像使用其他格式图片的方法来使用SVG，那就要使用<img> 或者是 background-image方法。 也可以使用 <iframe> 和 <embed> 方法来使用SVG，不过我觉得这两个方法不是好的选择。

注意: ‘Some inline’ 意味着使用img和background-image方法来使用SVG的话，css方面会有一些限制。 但是，如果直接把CSS写在SVG代码里面情况就不一样了。更多关于CSS与SVG的信息在下一节阐述。

使用SVG 值得庆幸的事情是我们依然可以使用CSS来控制SVG的表现。比如，我们想要一个icon在一些地方显示蓝色，我们只需要改变它的颜色即可而不需要换一张新的蓝色的图片。

有两种方法来使用样式 — 内联样式和外链样式。内联样式，即把样式包裹在 <style> 标签里然后放到<![CDATA[ ... ]]>里面。一定要记得把样式包裹在<![CDATA[ ... ]]>里面，因为有时候 XML在解析一些特殊字符串的时候会有一些问题(比如>)。即使你没有一些特殊的字符串，也建议你使用上面的方法来写SVG的内联样式。即使用CDATA标签来包裹内联样式。

使用内联样式来操作SVG是一个非常好的实践。像这种<img> 和 background-image内联插入图片到话是不支持CSS3动画的 (可以看看 animations 部分了解更多的关于动画方面的)。 background-image不支持媒体查询的(关于媒体查询可以先看看 media queries 这部分了解更多的关于SVG与媒体查询)。而如果把样式内联在SVG文件中就可以解决这两个问题。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: yellow; }
    .secondb { fill: red; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

如果使用外链样式的话也很容易来操作SVG图形，不过对于 <img> or background-image就无能为力了。 如果你使用 <object>来使用SVG代码，你需要在 SVG 中引入样式表（可以看看下面的代码）。 记住一点: 如果这样使用样式的话SVG可能会识别不了它的父类(比如<object>) 所以在使用object方法的时候，不要使用外链样式。 而直接在html文件中直接插入 SVGs 就不需要这么多顾虑了，想怎么做就怎么做。

// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>

// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }

由于我的javascript经验不是很多，所以我这里只是分享一些如何使用使用JS 来控制SVG的小的技巧。如果你想把JS代码嵌入到SVG 文件中， 记住把代码包裹在 <![CDATA[ ... ]]> 中。如果是<img>或者是background-image，就不能用脚本来控制。

如果是使用外链 JS，如果你的 SVG 代码是直接插入到html的话，你可以像平常开发中使用JS控制DOM元素一样来控制SVG。如果是使用 <object> 你可以使用 contentDocument来控制它。比如下面：

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("firstb");
  var svgb2 = svgDocument.getElementsByClassName("secondb");
  svgb1[0].setAttribute("fill", "yellow");
  svgb2[0].setAttribute("fill", "red");
};

在web开发中响应式图片有两种方法，一种是制作不同固定尺寸图片，然后使用媒体查询来根据不同尺寸的设备来引用不同尺寸的图片；一种是根据图片父容器尺寸来自动调整图片自身的尺寸来适应设备。

如果是使用固定尺寸的图片，需要注意的一点是：如果是使用background-image 来使用SVG你需要使用background-size 属性来指定尺寸。因为浏览器可能不能正确解析它从而导致一些问题出现。

使用SVG 有下面几点需要注意:

SVGs 动画方法给我们的选择很多：比如SVG本身的SVG动画(基于 SMIL)、CSS3动画、或者是JS 动画。使用 SVG 动画和 CSS3 动画就可以做出很多的动画效果，而使用SVG 动画更是CSS3动画不可比拟的。而使用Javascript则能使我们编写更加复杂的动画效果，比如 Snap.svg就是一个专门用来操控SVG的javascript库。这里就不详细说这个js库了，可以去它的官网看看它们的实例。

SVG动画非常的强大。不过这里我并不会展开来说，因为我使用SVG动画的经验也比较少。不过当我了解它到强大之后，我可以想象它能制作出很强大的动画效果。唯一不足的是可能要花费点时间。如果你有兴趣的话，这里推荐一些非常不错的教程 地址 。 SVG动画简而言之就是在SVG代码中插入 <animate> 元素，从而可以给路径或者是形状添加动画效果。大部分浏览器都支持SVG动画，不过 Internet Explorer不支持 SVG 动画， 当然你如果想在IE上也运行动画效果，可以使用FakeSmile这个javascript库来支持IE。

下面有一个简单的实例：两个字母之间的颜色互相切换

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#000000; #4e86b1; #000000" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#4e86b1; #000000; #4e86b1" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
    </path>
</svg>

在web开发中，会经常遇到一些图标交互动画的场景，比如鼠标滑过图标，触发并执行动画效果。从上面的内容SVG动画支持度可以知道如果使用<img> or background-image来使用SVG的话，是不支持SVG动画的。如果是使用 SVG 动画来编写鼠标滑过动画的话，我们需要使用 begin="mouseover" 和 begin="mouseout" 属性来触发鼠标滑过动画效果。而 CSS3 动画效果就简单多，跟我们平时使用CSS3编写动画效果一样没有什么区别，只需要使用 hover属性就可以了。有一件需要注意的事情的是， 如果你编写的动画效果用的是外链样式的话，对于直接在html文件中插入SVG代码没有什么影响；如果是使用<object>来使用SVG的话，那你也需要在SVG代码中引入你的外部样式。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseout"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseout"/>
  </path>
  </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: #000; transition: fill 0.1s; }
    .firstb:hover { fill: #4e86b1; }
    .secondb { fill: #4e86b1; transition: fill 0.1s; }
    .secondb:hover { fill: #000; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

SVG 也能使用雪碧图的技术，就像平时开发中使用的PNGs来制作雪碧图一样。不过使用SVG来做雪碧图的话，一个额外的好处是我们不再需要为高清屏准备额外的2倍图。因为SVG与分辨率无关，也就是说在任何设备上SVG都能清晰的显示。并且使用SVG还能节省HTTP请求。这里有两种方法来达到雪碧图相同的效果。第一种方法是把所有的图标使用<symbol>元素来定义在 SVG 代码中并且隐藏它。然后使用<use>元素来通过<symbol> 的 xlink:href="#id"来引用它。第二种方法是使用SVG的viewbox属性来指定显示SVG画布的区域，跟background-position原理差不多。

如果你想详细的了解SVG雪碧图的技术，可以去看看这几篇教程资源， 特别是 Sara Soueidan’s 24ways article。

SVGs一个有趣的地方是，如果你在嵌入的SVG文件中的样式中使用来媒体查询，那么SVGs响应的是这些元素建立起来的viewport。也就是说，这些元素的尺寸会生成描绘SVG的viewport，也会生成CSS媒体查询条件应用的viewport。这样我们就可以使用媒体查询来告知SVG 在不同viewport下的样式。

想象一下，如果你手头有一个大品牌的logo，你想logo都能清晰的展示出来，无论用户使用的是何种尺寸的设备。使用媒体查询就能做到，根据不同尺寸的设备改变SVG图形的尺寸。这适用于所有的使用SVG的方法，除了使用background-image的方法 (备注: IE9–11只支持一个断点的设置)。滑动下面的滑块试试看会发生什么：

大部分的现代浏览器都支持SVGs。如果你还要支持诸如IE8这样的老一代的浏览器你可能需要降级来处理，对不支持SVG的浏览器使用PNGs来显示。这里就不深入讨论了，现在都啥年代了，你可能早就不需要支持像IE8 这类老一代的浏览器了 ¯\_(ツ)_/¯。 不过, 如果你真的需要降级来处理SVG的话，一些本来使用 SVG就相当简单的事情就会变得稍微复杂啦。关于降级使用SVG，建议去读读Amelia Bellamy-Royds 写的CSS-Tricks篇文章。