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

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

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

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

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

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

　　打開(kāi)編輯器，新建一個(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 圖片名。保存文件。

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

　　svg 圖片怎么制作呢?

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

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

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

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

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

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

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

　　這節(jié)課我們就講到這，下節(jié)課開(kāi)始，我們?cè)诋?huà)布上繪制各種美妙的圖形，大家加油!

上一篇

表單綜合案例（下）

下一篇

矩形、圓形和橢圓形