SVG 圖標(biāo)

SVG圖標(biāo)是SVG圖像，用作Web應(yīng)用程序或移動(dòng)應(yīng)用程序內(nèi)的圖標(biāo)或圖像按鈕。SVG圖標(biāo)也可以用于徽標(biāo)。此SVG圖標(biāo)教程說(shuō)明了如何創(chuàng)建自己的SVG圖標(biāo)，以及在何處可以下載高質(zhì)量的預(yù)制SVG圖標(biāo)。

SVG圖標(biāo)的優(yōu)勢(shì)

對(duì)圖標(biāo)使用SVG的優(yōu)點(diǎn)是，可以輕松地按比例放大和縮小圖標(biāo)，具體取決于要在應(yīng)用程序中顯示的位置以及顯示應(yīng)用程序的屏幕尺寸。SVG圖標(biāo)具有優(yōu)于位圖圖形的優(yōu)點(diǎn)，即按比例放大或縮小時(shí)它們?nèi)匀豢雌饋?lái)不錯(cuò)。位圖圖形在按比例放大時(shí)趨于像素化，而在按比例縮小時(shí)會(huì)失去質(zhì)量（像素）。

在Web Apps中使用SVG圖標(biāo)

如在Web瀏覽器中顯示SVG所述，有幾種方法可以在Web瀏覽器中顯示SVG，作為HTML頁(yè)面的一部分。 但是，在顯示SVG圖標(biāo)時(shí)，使用HTML的img元素來(lái)顯示圖標(biāo)是最容易的，HTML img元素可以輕松地放大和縮小SVG圖標(biāo)的大小。

這是img顯示SVG圖標(biāo)的示例元素：

<img src="svg-icon.svg">

要放大或縮小SVG圖標(biāo)的大小，只需使用CSS width或height樣式屬性。下面是添加了CSS Height Style屬性的img元素示例：

<img src="svg-icon.svg" style="height:32px">

要在放大或縮小SVG圖標(biāo)時(shí)保持其長(zhǎng)寬比，應(yīng)僅為其中一個(gè)width 或height - 而不能同時(shí)設(shè)置這兩個(gè)值。 當(dāng)僅設(shè)置其中一個(gè)屬性的寬度時(shí)，瀏覽器將沿另一個(gè)軸相應(yīng)縮放SVG圖標(biāo)，以便SVG圖標(biāo)保持其縱橫比。

創(chuàng)建自己的SVG圖標(biāo)

有時(shí)您可能需要?jiǎng)?chuàng)建自己的SVG圖標(biāo)。SVG圖標(biāo)只是包含在它自己的SVG文件中的SVG圖像。下面是一個(gè)非常簡(jiǎn)單的圓形圖標(biāo)，由SVG circle元素組成：

<svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

下面是此SVG圖標(biāo)與img元素一起顯示時(shí)的外觀：

但是，當(dāng)您使用img元素顯示此SVG圖標(biāo)，并放大和縮小img元素的大小時(shí)，SVG圖標(biāo)不會(huì)放大或縮小。 相反，或多或少會(huì)顯示SVG畫布。 下面是將img CSS Height屬性設(shè)置為32的示例：

請(qǐng)注意，如何僅顯示圓圈的一部分，而不是按比例縮小整個(gè)圓圈。

造成此問(wèn)題的原因是SVG圖像文件缺少某些信息。您必須為SVG viewBox屬性設(shè)置一個(gè)值 。SVG viewBox屬性指定應(yīng)顯示多少SVG畫布（在X和Y方向上）。

在我們的示例中，我們只想顯示SVG畫布的包含圓圈圖標(biāo)的部分。該區(qū)域從點(diǎn)0,0延伸到點(diǎn)128,128（圓的半徑為64，以64，64為中心）。 使用SVG Viewbox屬性，我們可以指定只渲染SVG畫布的這一區(qū)域。 下面是設(shè)置了Viewbox值的SVG圓圖標(biāo)的外觀：

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 128 128">
    <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

這是顯示的SVG圖標(biāo)，高度分別為32、48和64像素：