今天在調(diào)整網(wǎng)頁的時候，將logo以原有直接貼代碼形式，改為加載文件。

其實(shí)真正的目的是做SEO。上次SEO交流后得出 結(jié)論：核心在于內(nèi)容的本身的優(yōu)化。信噪比很重要。也就是有效信息需要占文章的主要內(nèi)容，相關(guān)信息太多會降低權(quán)重，關(guān)鍵詞優(yōu)化作用有限，太多關(guān)鍵詞的堆砌反倒會降低權(quán)重。然后LD認(rèn)為這個會影響SEO，遂去掉。

當(dāng)時使用這種并不友好的方法，是因?yàn)椴捎迷蟹绞郊虞dSVG文件不顯示，然后才將SVG文件進(jìn)行壓縮后直接貼代碼的形式。

---

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

代碼如下：

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

效果如下：

---

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

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

如果直接拷貝w3c的代碼會發(fā)現(xiàn)，其實(shí)是有問題的，這里的屬性是有寬高的，[可以根據(jù)自己的需求設(shè)置大小] ，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圖片自動適應(yīng)頁面大小。

效果：

PC端：

　　

移動端：

　　

總結(jié)

以上是生活随笔為你收集整理的SVG图片背景透明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。