浏览器支持
在浏览器支持方面，危险区域是IE 8和向下，Safari 5和向下，iOS 4.3和向下，以及Android 2.3和向下。但如果你的政策是“最后两个主要版本” - 你会看到几乎100％的支持。
请记住，图标只能用作支持角色，就像总是伴随着一个单词一样。如果是这样的话，那么支持并不算太大。如果它们是独立的，并且不显示会使网站无法使用，那么这是一个大问题。
我可能会选择图标字体，因为那里的支持更深。只要确保你做得对。
会变得更好的
理想情况下，我们能够做到这一点：
<svg viewBox="0 0 100 100" class="icon shape-codepen"> <use xlink:href="/images/svg-defs.svg#shape-codepen"></use> </svg>
这确实在某些浏览器下是可以的，这意味着你可以不用将svg包括在文档的顶部。但意味着额外的 HTTP 请求，但这也意味着可以更有效地利用缓存（而不是膨胀文档缓存）。在测试中，Jonathan Neal 发现你需要拥有 xmlns 属性<svg>才能使它工作：
<svg xmlns="http://www.w3.org/2000/svg">
但即使这样，任何IE都没有支持。除非你想把整个换成<svg><use>一个<object>，这确实有效。乔纳森尼尔再次想到这一点：
/MSIE|Trident/.test(navigator.userAgent) && document.addEventListener('DOMContentLoaded', function () { [].forEach.call(document.querySelectorAll('svg'), function (svg) { var use = svg.querySelector('use'); if (use) { var object = document.createElement('object'); object.data = use.getAttribute('xlink:href'); object.className = svg.getAttribute('class'); svg.parentNode.replaceChild(object, svg); } }); });
他的演示现在还有一个方法，它对内容进行Ajax请求并注入，这允许填充在IE 9中工作。效率不高，但更像是polyfill。
我想有一天会直接<svg><use>将.svg连接起来。甚至可能<img>在SVG上使用URL片段标识符。
浏览器<use>像阴影DOM一样对待：
现在，我们可以针对<path>具有CSS 的个人进行定位，例如：
.targetting-a-path { fill: red; }svg.shape-version-2 .targetting-a-path { fill: red; }
但这会影响该路径的所有实例。你认为你可以这样做：
但这不起作用。它穿过阴影DOM边界。理想情况下，您可以使用“帽子”选择器来打破：
svg.shape-version-2 ^ .targetting-a-path { fill: red; }
但是，这也没有得到支持，并且不完全清楚这是否确实如何起作用。
与图标字体比对
基于矢量：领带
CSS风格： SVG精灵略有优势（定位部分，SVG特定造型，如笔画）
奇怪的失败： SVG似乎正常工作（支持时）。图标字体似乎以奇怪的方式失败。例如，您将字符映射到普通字母，然后字体加载失败，您会得到随机字符。或者你映射到“私人使用区”，一些浏览器决定将它们重新映射到真正奇怪的角色，如玫瑰，但它很难复制。或者你想在CDN上托管@font-face文件，但这是跨域的，Firefox讨厌这个，所以你需要你的服务器提供正确的跨源头文件，但你的Nginx设置不是正确的，唉。SVG赢得了这一局。
语义：并不是什么大不了的事，但我觉得<svg>对于一个图像来说比<span>更有意义。
可访问性：也许有人可以告诉我？我们应该/可以给出<svg>一个title属性吗？或者<text>我们在视觉上隐藏的元素？
更新：该<title>元素可以有。或者也许是<desc>此SVG访问规范中使用的元素。
易用性：像 Fontello 和 IcoMoon 这样的工具非常适合图标字体工作流程，但我认为，与 Grunt 一起将它们拼凑在一起的文件夹 - 完整的SVG更加容易。
引用外部svg文件
svg 通过use可以在页面中引用多次， 但前提是svg里内嵌的，如果是外部的， 可以借助下面的脚本来实现：https://github.com/jon
