inlinesvg图标如何兼容所有浏览器的

[zhouwenbin]

sketch导出的svg虽然可以直接贴在页面内使用，但是代码比较多冗余，特别是有循环的时候，比如下面这种情况。

其中svg的代码如下:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="46px" height="38px" viewBox="0 0 23 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
    <title>Shape Copy 10</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M22.4335818,0.711110963 L20.0886967,0.711110963 C19.9992099,0.711110963 16.4906652,3.93023608 16.4906652,3.93023608 C16.4502304,3.97055709 16.4194072,4.01645093 16.3938869,4.06431165 L10.0214337,4.06431165 L8.43586044,4.06431165 L1.36773035,4.06431165 C0.653493257,4.06431165 0.243842652,4.61634899 0.45595947,5.29033283 L2.78261581,12.6684233 C2.99572693,13.342735 3.75371312,13.8944445 4.46761878,13.8944445 L8.43586044,13.8944445 L10.0214337,13.8944445 L13.9890124,13.8944445 C14.7032495,13.8944445 15.4615672,13.3424072 15.673684,12.6684233 L17.9787972,5.36114047 L20.5328163,2.83435672 L22.4335818,2.83435672 C22.744797,2.83435672 23,2.58259622 23,2.27445187 L23,1.27036019 C23,0.96287146 22.744797,0.711110963 22.4335818,0.711110963 L22.4335818,0.711110963 Z M4.16666635,18.288889 C4.99877539,18.288889 5.67333304,17.6330691 5.67333304,16.8240742 C5.67333304,16.0150793 4.99877539,15.3592594 4.16666635,15.3592594 C3.33455731,15.3592594 2.65999966,16.0150793 2.65999966,16.8240742 C2.65999966,17.6330691 3.33455731,18.288889 4.16666635,18.288889 Z M13.2066665,18.288889 C14.0387755,18.288889 14.7133332,17.6330691 14.7133332,16.8240742 C14.7133332,16.0150793 14.0387755,15.3592594 13.2066665,15.3592594 C12.3745575,15.3592594 11.6999998,16.0150793 11.6999998,16.8240742 C11.6999998,17.6330691 12.3745575,18.288889 13.2066665,18.288889 Z" id="Shape-Copy-10" fill="#4A4A4A" sketch:type="MSShapeGroup" transform="translate(11.700000, 9.500000) scale(-1, 1) translate(-11.700000, -9.500000) "></path>
    </g>
</svg>

一大坨的代码直接贴页面里面显得很不美观，整个dom也会变特别大，所以我们要做一些优化，让svg可以重用，并且去掉一些没用的代码。

我们可以把页面上用到的所有svg放在一起，用<symbol>包裹，每个图标指定唯一的ID，然后把它们隐藏。

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" display="none">
    <symbol id="icon-addtocart" viewBox="0 0 30 30">
        <path d="M18.9302816,-7.99360578e-15 L16.9156597,-7.99360578e-15 C16.8387766,-7.99360578e-15 13.8243898,2.84475111 13.8243898,2.84475111 C13.78965,2.88038292 13.7631681,2.92093946 13.7412422,2.96323413 L8.26631156,2.96323413 L6.90405702,2.96323413 L0.831431545,2.96323413 C0.217790548,2.96323413 -0.134163175,3.45107128 0.0480782351,4.04667294 L2.0470387,10.566715 C2.23013437,11.1626064 2.88136265,11.6501538 3.4947189,11.6501538 L6.90405702,11.6501538 L8.26631156,11.6501538 L11.6750802,11.6501538 C12.2887212,11.6501538 12.9402342,11.1623167 13.1224756,10.566715 L15.1029272,4.10924588 L17.2972277,1.87631904 L18.9302816,1.87631904 C19.1976639,1.87631904 19.4169231,1.65383749 19.4169231,1.38152933 L19.4169231,0.494210326 C19.4169231,0.222481553 19.1976639,-7.99360578e-15 18.9302816,-7.99360578e-15 Z M3.23615385,15.5335385 C3.95106521,15.5335385 4.53061538,14.9539883 4.53061538,14.2390769 C4.53061538,13.5241656 3.95106521,12.9446154 3.23615385,12.9446154 C2.52124248,12.9446154 1.94169231,13.5241656 1.94169231,14.2390769 C1.94169231,14.9539883 2.52124248,15.5335385 3.23615385,15.5335385 Z M11.0029231,15.5335385 C11.7178344,15.5335385 12.2973846,14.9539883 12.2973846,14.2390769 C12.2973846,13.5241656 11.7178344,12.9446154 11.0029231,12.9446154 C10.2880117,12.9446154 9.70846154,13.5241656 9.70846154,14.2390769 C9.70846154,14.9539883 10.2880117,15.5335385 11.0029231,15.5335385 Z" transform="translate(14.000000, 15.083333) scale(-1, 1) translate(-14.000000, -15.083333) translate(4.000000, 7.083333)"></path>
    </symbol>
</svg>

需要用到的时候，只要用<use>引入对应的ID就可以了。

<svg class="icon-addtocart-normal"><use xlink:href="#icon-addtocart"></use></svg>

这样页面的代码就会清爽很多，又实现了代码的公用。

如果chrome的审查工具打开‘Show user agent shadow DOM’

可以看到浏览器帮我们生成了shadow DOM。

这个技术有点像css sprite，所以姑且称它为svg sprite，随着以后屏幕dpr越来越多，svg的图标一定会大放异彩。

如何兼容ie8？

移动端不用兼容ie8，但是pc上要用到inlinesvg的话得考虑兼容ie8及以下浏览器，可以多导出一张png格式的图片，然后用下面的代码兼容

<svg class="icon-addtocart-normal">
  <switch>
    <use xlink:href="#icon-addtocart"></use>
    <foreignobject>
      <img src="img/icon-addtocart.png">
     </foreignobject>
  </switch>
</svg>