解決網(wǎng)站圖標(biāo)問題的最佳方案——SVG!

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

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

　　我們來真實(shí)的體驗(yàn)一下。

　　打開阿里巴巴矢量圖標(biāo)庫網(wǎng)站，(https://www.iconfont.cn/)

　　在素材庫菜單里選擇矢量插畫庫，選擇任意一個(gè)主題點(diǎn)擊進(jìn)去，鼠標(biāo)劃入圖標(biāo)，點(diǎn)擊下載按鈕，在彈框中分別點(diǎn)擊 SVG 下載和 PNG下載，這個(gè)圖標(biāo)的兩種格式文件就下載到本地電腦了，將圖片拷貝到我們的目錄下?，F(xiàn)在，它們可以當(dāng)做圖片插入到網(wǎng)頁中了。

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

　　在瀏覽器中打開網(wǎng)頁，兩張圖片顯示了。目前看，兩張圖片沒有什么區(qū)別，但當(dāng)我們把兩張圖片逐漸放大時(shí)，就會(huì)發(fā)現(xiàn)，png 格式的圖片邊界模糊了，svg 格式的圖片邊界依然清晰。

　　svg 圖片怎么制作呢?

　　返回編輯器，我們?cè)?VSCode 里打開 png，可以直接預(yù)覽圖片，其實(shí) png 圖片是基于像素處理的，我們不能在 VSCode 里編輯。

　　再打開 svg 圖片，我們發(fā)現(xiàn) svg 圖片是用類似 html 代碼繪制出來的。

　　因此，我們可以通過 html 元素來繪制 svg 圖片!可以使用 svg 標(biāo)簽來實(shí)現(xiàn)。

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

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

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

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

　　這節(jié)課我們就講到這，下節(jié)課開始，我們?cè)诋嫴忌侠L制各種美妙的圖形，大家加油!

上一篇

表單綜合案例（下）

下一篇

矩形、圓形和橢圓形