SVG圖片背景透明

今天在調整網頁的時候，將logo以原有直接貼代碼形式，改為加載文件。

其實真正的目的是做SEO。上次SEO交流后得出 結論：核心在於內容的本身的優化。信噪比很重要。也就是有效信息需要占文章的主要內容，相關信息太多會降低權重，關鍵詞優化作用有限，太多關鍵詞的堆砌反倒會降低權重。然后LD認為這個會影響SEO，遂去掉。

當時使用這種並不友好的方法，是因為采用原有方式加載SVG文件不顯示，然后才將SVG文件進行壓縮后直接貼代碼的形式。

---

后來修改css，在加上SVG后能夠顯示，但是SVG背景一直是白色的，這很尷尬。

代碼如下：

<a class="logo" href="/">
        <span class="svg">
             <svg class="icon icon-masala" style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1">
                   <img src="img/logo.svg"/>
             </svg>
        </span>
</a>

效果如下：

---

 

既然SVG圖片顯示了，那么現在需要去除背景。通過搜索，在w3c上發現了解決辦法，使用embed標簽

　　http://www.w3school.com.cn/svg/svg_inhtml.asp

如果直接拷貝w3c的代碼會發現，其實是有問題的，這里的屬性是有寬高的，[可以根據自己的需求設置大小] ，pluginspage 這個屬性我沒有用到直接刪除了。

<embed src="rect.svg" width="300" height="100" 
 type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

代碼如下：

<embed src="img/logo.svg" type="image/svg+xml"/>  //我去除了寬高屬性，為了讓SVG圖片自動適應頁面大小。

效果：

PC端：

　　

移動端：