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端：

　　

移动端：

　　

 

转载于:https://www.cnblogs.com/0xcafedaddy/p/6382962.html