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