缘由
在新版的Smashing Magazine的会员页面中，提供了三个会员级别收费的选项，这三个收费选项使用了三张SVG图片来把会员收费信息传递给用户。
这三张图片，是我一直从头到尾参与的，虽然中间图片的内容来来回回经常改变。不过，它一直是使用embed的方式来插入SVG，这个技术一直没有改变过。
每张图片包含了一些会员的价格等信息。因为在这个页面中，并没有像其它文章页面一样对会员信息有个详细的文字介绍，比如，标题等。所以，需要图片中的这些会员信息，是可以复制，可以被搜索引擎收录的文本信息。
这意味着，这些文字需要是真的文本信息，而不是把它转换成SVG中的路径信息。而在SVG中，正好有<text>这个文本标签可以解决这个问题。还可以使用CSS来控制它的UI表现。
综上所述，只能使用inline SVG的方式来插入SVG。不仅可以使用CSS来控制UI表现，还可以解决内容的可访问性问题。
虽然，听起来这种inline SVG的方法非常不错，但是也不是这么简单。就像上面的三个图形，每一个图形的内容非常丰富，如果直接使用inline SVG的方法来插入SVG，那它会大大增加html文件的体积。看看下面这个动图就明白了：
看完上面的动图，这么巨大的代码量，所以直接插入SVG代码是可以排除的一个选项。又要减少SVG代码，保持代码的简洁；还要保持文字的可访问性，该怎么办呢？
解决方案
在web上使用SVG有很多的不同的方法，每一种方法都对应着不同的场景，所以需要根据你具体的应用场景来选择不同的方法。但是，我们也可以综合各种方法来综合运用。比如，inline SVG我们就可以灵活来使用它。
我们都知道，SVG是一种文本的图形格式，跟我们平时所说的jpg等图形格式还是有非常不一样的地方。比如，在SVG中也可以引用其它的格式的图形，比如jpg等。所以，我们可以把复杂的图形以图片的形式来引入到SVG中，这不就解决我们上面碰到的复杂图形代码过于庞大的问题么？而文本信息则依然使用SVG中<text>标签来表示，也不影响文本的可访问性。
综上所述，SVG可以使用<image>标签来引入外部的图片，不限格式；同时也可以包括文本信息。这和在html中同时使用hmtl文本标签和引入图片的方式是一样的。
确定好解决方案后，可以把三张图片中的文本信息删除，只留下干净的图形内容。
然后，使用SVG中的image标签来引入图片，如下所示：
<svg width="318.029" height="267.921" viewBox="0 0 318.029 267.921" aria-describedby="title">
<title id="title">Supporter Plan</title>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/plan--supporter--no-text.svg" x="0" y="0" width="100%" height="100%"></image>
<text x=173" y="50" font-size=".8em">Supporter</text>
</svg>
使用这个解决方案，达到了下面几个目的：
1、保持了html文件的简洁。
2、SVG可以被缓存，对提高加载性能也有不错的提升。
3、保证了图形内容的可访问性。
最后，还需要写点文本的样式：
svg text {
font-weight: bold;
text-transform: uppercase;
font-family: $mija;
}
总结
有时候，我们不需要拘泥于一种方法，比如上面的插入SVG方法。我们需要发散下思路，结合不同的方法的优势来解决问题。SVG是一种文本格式，同时也是一种图形格式。需要时时刻刻记住这一点，这样才能充分发挥它的特性和优势，使用的时候才能犹鱼得水，游刃有余。
本文主要是从Optimizing SVG Text & Image Delivery with Inline SVG这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
