一、何為SVG？
SVG是可伸縮的矢量圖形，用來定義用于網格的基于矢量的圖形，它使用XML格式定義圖形，圖像在放大或縮小的情況下，其圖形品質不會有損失，SVG還是網際網路聯盟的一個标準。
二、與JPEG和PNG等圖像相比有何優點？
JPEG和PNG等圖像屬于位圖，是由像素點所構成，圖檔放大或縮小時容易造成失真。而SVG則屬于矢量圖，無論如何放大縮小都可以保證其清晰度不會降低。
三、如何使用SVG?
1、直接内聯引入
<div class="del">
<svg class="icon" width="20" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</svg>
<span>删除</span>
</div>
2、使用img标簽引入，與引用位圖方式無異
<div class="del">< img src="svg/delete.svg" /><span>删除</span></div>
3、使用iframe标簽引入
<div class="del"><iframe class="icon" src="svg/delete.svg" frameborder="0"></iframe><span>删除</span></div>
4、SVG Sprites，使用use引入（可以看這篇文章" 移動端小圖示模糊問題 "有介紹）
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-delete" viewBox="0 0 32 32">
<title>delete</title>
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>
</svg>
<div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-delete"></use></svg><span>删除</span></div>
</body>
</html>
當然，類似于寫CSS時使用style标簽寫在HTML内一樣，在頁面内直接寫過多的SVG代碼總感覺不太好，會讓頁面感覺很臃腫。那麼當然與使用link标簽外鍊樣式類似的，SVG也能通過外鍊的方式引入，就像這樣：
<div class="del"><svg class="icon icon-bin"><use xlink:href="demo.svg#icon-delete"></use></svg><span>删除</span></div>
其中demo.svg中則可以儲存許多可供調用的SVG：
<!--demo.svg-->
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-delete" viewBox="0 0 32 32">
<title>delete</title>
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>
<!--省略-->
</svg>
但是需要注意的是，以上SVG Sprites外聯方式在IE下全軍覆沒，甚至IE11都不行！
那麼，如何改變SVG的大小與顔色呢？
很簡單，直接給調用SVG的标簽上設定CSS樣式即可，比如上面的例子可以這樣設定：
.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; fill: red;}
注意：以img标簽和iframe标簽方式調用的時候改變SVG顔色無效！
最後貼上以上四種使用SVG方式的執行個體效果圖：
本文為原創文章，轉載請注明出處，謝謝！
![2018年不想被web前端開發淘汰，你需要掌握哪些技術？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)