svg转iconfront不显示

背景

性能优化的准则之一就是--Make Fewer HTTP Requests,减少请求数涉及到的很多，其中一条就是面对页面中形形色色的固定图片，应该如何减少图片的请求数，如果每个图标都要新开一个连接的话，对整体的压力还是很大的。按照历史发展的轨迹，人们相继提出了css sprites和字体图标的方式来解决这件事，个人对比如下：

问题

目前业务在移动端都是使用的svg转为字体图标的方式。但最近出了一个问题，视觉那边换了一个UI，再提供的新的UI视觉稿里的svg图标转成字体图标后在页面里不显示，但是svg直接在浏览器打开是可以显示的，问题就是为什么svg本身显示，但是转为iconfront后在页面里不显示了？ 这个问题本来想让视觉那边再换一个，但是UI也是不清楚为啥不显示，给的一直是同一个，后来想着万事求人不如求己的原则，自己排查解决这个问题！svg的源码如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<title>Artboard 7</title>
<desc>Created with Sketch.</desc>
<defs>
    <rect id="path-1" x="0" y="0" width="24" height="24" rx="2"></rect>
</defs>
<g id="Artboard-7" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group-10">
        <rect id="Rectangle-3" stroke="#979797" x="0.5" y="0.5" width="23" height="23" rx="2"></rect>
        <text id="订" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" line-spacing="20" fill="#999999">
            <tspan x="2" y="23">订</tspan>
        </text>
        <g id="Line">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <g id="Mask"></g>
            <path d="M23.5,0.5 L0.5,24.5" stroke="#999999" stroke-width="1.5" stroke-linecap="square" mask="url(#mask-2)"></path>
        </g>
    </g>
</g>
</svg>
复制代码

解决

开始用的最笨的方式，按个删不同的元素，看是哪块引起的问题，删到最后发现，是只有使用stroke属性时会导致不显示，后来搜索发现字体图标是不支持stroke这个属性的，一般都需要转为path路径，然后使用fill属性。具体在sketch里command-option-o组合键（或者layer->covert to outlines)来转为path,然后再导出成svg就可以了。

参考

https://segmentfault.com/q/1010000014145550