svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)

svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。

这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。

一、制作svg

1.用记事本新建一个mysvg.svg , 里面内容如下

<svg xmlns="http://www.w3.org/2000/svg">

</svg>

2.用 ai 制作了一个 svg文件, 把这个文件中的<svg>部分替换成symbol, 去掉所有属性，只保留viewbox ,并增加一个id属性（便于引用），然后拷贝到mysvg.svg中的svg标签中间 方便引用。

如下图：

<svg xmlns="http://www.w3.org/2000/svg">

<symbol viewBox="70 -135 400 400" id="buy">

<path class="st0" d="M360.8,215.5c-12.1,0-21.9,10.3-21.9,23.1s9.8,23.1,21.9,23.1s22-10.3,22-23.1S373,215.5,360.8,215.5z ">
<set to="blue" begin="click" restart="always" fill="remove" attributeName="fill"></set>
</path>
<path class="st0" d="M206.2,217.1c-11.7,0-21.2,10-21.2,22.3s9.5,22.3,21.2,22.3s21.2-10,21.2-22.3
C227.3,227.1,217.9,217.1,206.2,217.1z"/>
<path class="st0" d="M398.7,181.7c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2-0.1-0.2-0.1H214.7c-15.8,0-17.5-3.6-20.7-15.1
c-0.8-3-1.7-6.2-2.7-9.7l188-27.9c24.1-3.6,28.4-14.5,28.4-34.7V45.8c0-17.6-13.7-32-30.4-32H192.5h-0.1c-0.1,0-0.2,0-0.3,0
c-6.6,0-12,5.8-12,13.1s5.4,13.1,12,13.1c0.1,0,0.2,0,0.3,0h0.1h173.6c8.4,0,15.2,7.2,15.2,16v22.6c0,14.2-0.4,16.6-15.4,18.8
l-183,28.9c-18-66.2-44-162.6-44-162.6c-0.9-3.5-3.9-5.8-7.3-5.8H95.1c-0.1,0-0.2,0-0.3,0.1c-0.2,0-0.4-0.1-0.6-0.1
c-6.7,0-12.2,5.9-12.2,13.3c0,7.3,5.4,13.3,12.2,13.3c0.2,0,0.5-0.1,0.7-0.1c0.1,0,0.1,0.1,0.2,0.1h18.4
c7.5,27.8,39.9,148,53.4,197.1c4.8,17.3,11.8,26.7,35.3,26.7h195.7c0.1,0,0.1,0,0.2,0c0.2,0,0.3,0.1,0.5,0.1
c6.7,0,12.2-5.9,12.2-13.3C410.9,187.6,405.4,181.7,398.7,181.7z"/>
</symbol>

<symbol viewBox="70 -135 400 400" id="sell">

<path class="st0" d="M206.2,217.1c-11.7,0-21.2,10-21.2,22.3s9.5,22.3,21.2,22.3s21.2-10,21.2-22.3
C227.3,227.1,217.9,217.1,206.2,217.1z"/>

</symbol>
</svg>

可如此增加多个svg文件到单独的svg文件中国

二、html中引用这个svg

css:

<style>
.mytest{
fill:#00f;
background-color:#600;
}

/* 点击时的样式
.mytest:active{
fill:#0f0;
}
</style>

html:

<svg  class="mytest" ><use  xlink:href="/images/mysvg.svg#buy" /></svg>

<svg  class="mytest" ><use  xlink:href="/images/mysvg.svg#sell" /></svg>

至此，已经实现。

注意:

1这样制作的svg无法通过img的src或 div的background-image引入

2.通过use 引入外部svg文件时，  在.svg文件中指定的css(用 <style>标记的属性），以及filter(滤镜),渐变色等通过ID的引用都不起作用。（直接指定的元素属性如fill stroke等可以生效）

需要在use所在的html文件中写css或filter,或渐变色

svg内部定义style方法如下

<style type="text/css"><![CDATA[
.green { fill: red; stroke: blue; stroke-width: 3 }
]]> </style>

但这样一来，svg代码就很分散了，吃相很差。 有一种最优雅的方式：直接将<svg>写到html文件中，这样svg中的css,filter,滤镜等都可以生效。但是这样html文件很臃肿，而且svg无法复用。

再进一步，还有两种方法

A.通过js 的ajax获取svg文件后附加到html中。

B:我开发用的是asp.net core, 在cshtml中插入下面一段

<div style="height:0px;">
@Html.Raw(Model.Include("/myEditor/dist/expression.svg"));
</div>

其中Include是模型类中写的一个方法，用于读取文件内容返回字符串。这种方式打开更快，因为客户端没有额外的http请求。注意这里之所以要用div包围住，就是因为svg会占用空间。而且div的display不能为none,否则css,filter,渐变色等引用会失效。

看到很多网站在用<!-- include file =""--> 来在html中包含另一个html，但是现在在asp.net core中似乎已经不起作用了，只能通过手动写个方法来实现同样功能。

3.通过<img> 或background引入svg时，svg文件中的css可起作用

4.<img>不可以引用symbol <img src=“/aaa.svg#haha"/>是不行的

5.使用symbol时 filter（滤镜）不能在svg内部定义，只能在use的地方定义

<filter id="blurMe">
<feGaussianBlur in ="SourceGraphic" stdDeviation="22" result="g1"/>
<feComposite in="g1" in2="g1" result="g2" operator="in"/>
<feComposite in="g2" in2="g1" result="g3" operator="in"/>
</filter>
<circle id="red_shy" fill="#D5234C" r="50" y="90" filter="url(#blurMe)">

6.

参考文献：https://blog.csdn.net/u010582082/article/details/70195629