解決網站圖標問題的最佳方案——SVG!

　　SVG 是一種基于 XML 語法的圖像格式，英文全稱是： Scalable Vector Graphics，即可縮放矢量圖，是 W3C 的一項建議。

　　我們用手機拍攝的照片，圖片格式一般都是基于像素處理的，圖片放大會模糊失真。SVG 則是屬于對圖像的形狀描述，所以它本質上是文本文件，體積較小，且不管放大多少倍都不會失真。

　　我們來真實的體驗一下。

　　打開阿里巴巴矢量圖標庫網站，(https://www.iconfont.cn/)

　　在素材庫菜單里選擇矢量插畫庫，選擇任意一個主題點擊進去，鼠標劃入圖標，點擊下載按鈕，在彈框中分別點擊 SVG 下載和 PNG下載，這個圖標的兩種格式文件就下載到本地電腦了，將圖片拷貝到我們的目錄下。現在，它們可以當做圖片插入到網頁中了。

　　打開編輯器，新建一個 svg-demo.html 文件。補全基礎代碼，在 body 里添加一個 img 標簽，屬性 src 的資源路徑設置為當前目錄的 png 圖片名，width 寬度設置為 100. height 高度也設置為 100.復制另一個 img 標簽，src 的值修改為當前目錄的 svg 圖片名。保存文件。

　　在瀏覽器中打開網頁，兩張圖片顯示了。目前看，兩張圖片沒有什么區別，但當我們把兩張圖片逐漸放大時，就會發現，png 格式的圖片邊界模糊了，svg 格式的圖片邊界依然清晰。

　　svg 圖片怎么制作呢?

　　返回編輯器，我們在 VSCode 里打開 png，可以直接預覽圖片，其實 png 圖片是基于像素處理的，我們不能在 VSCode 里編輯。

　　再打開 svg 圖片，我們發現 svg 圖片是用類似 html 代碼繪制出來的。

　　因此，我們可以通過 html 元素來繪制 svg 圖片!可以使用 svg 標簽來實現。

　　svg 標簽是 svg 圖形的一個容器，它是一個雙標簽，基本語法是：尖角號 svg，尖角號 /svg。里面包含很多子標簽，用于繪制各種圖形。

　　svg 也可以理解為繪制圖形的畫布，它有兩個重要的屬性，width，定義畫布的寬度，height，定義畫布的高度，它們值都是數字。

　　再次打開 svg-demo.html 文件，在圖片下方添加 br 標簽。再添加一個 svg 標簽，給 svg 定義屬性 width 等于 800.height 等于 600.保存。

　　回到瀏覽器，刷新，按鍵盤 F12.打開開發者工具，在 elements 頁簽下，點擊 svg 元素，我們看到，一個800 乘 600 的畫布就做好了。

　　這節課我們就講到這，下節課開始，我們在畫布上繪制各種美妙的圖形，大家加油!

上一篇

表單綜合案例（下）

下一篇

矩形、圓形和橢圓形