背景
效能優化的準則之一就是--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