一篇文章帶你了解SVG 圖標
SVG圖標是SVG圖像，用作Web應(yīng)用程序或移動應(yīng)用程序內(nèi)的圖標或圖像按鈕。SVG圖標也可以用于徽標。文章說明了SVG圖標如何創(chuàng)建自己的SVG圖標，以及在何處可以下載高質(zhì)量的預(yù)制SVG圖標。
一、SVG圖標的優(yōu)勢
圖標使用SVG的優(yōu)點：
1、可以輕松地按比例放大和縮小圖標，具體取決于要在應(yīng)用程序中顯示的位置以及顯示應(yīng)用程序的屏幕尺寸。
2、SVG圖標具有優(yōu)于位圖圖形的優(yōu)點，即按比例放大或縮小時它們?nèi)匀豢雌饋聿诲e。
3、位圖圖形在按比例放大時趨于像素化，而在按比例縮小時會失去質(zhì)量(像素)。
二、在Web Apps中使用SVG圖標
如在Web瀏覽器中顯示SVG所述，有幾種方法可以在Web瀏覽器中顯示SVG，作為HTML頁面的一部分。但是，在顯示SVG圖標時，使用HTML的img元素來顯示圖標是最容易的，HTML img元素可以輕松地放大和縮小SVG圖標的大小。
這是img顯示SVG圖標元素：
- <img src="svg-icon.svg">
要放大或縮小SVG圖標的大小，只需使用CSS width或height樣式屬性。
下面是添加了CSS Height Style屬性的img元素示例：
- <img src="svg-icon.svg" style="height:32px">
要在放大或縮小SVG圖標時保持其長寬比，應(yīng)僅為其中一個width 或height - 而不能同時設(shè)置這兩個值。當(dāng)僅設(shè)置其中一個屬性的寬度時，瀏覽器將沿另一個軸相應(yīng)縮放SVG圖標，以便SVG圖標保持其縱橫比。
三、自定義SVG圖標
有時可能需要創(chuàng)建自己的SVG圖標。SVG圖標只是包含在它自己的SVG文件中的SVG圖像。
下面是一個非常簡單的圓形圖標，由SVG circle元素組成：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;">
- <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>
- </body>
- </html>
SVG圖標與img元素一起顯示時的效果圖：
但是，當(dāng)使用img元素顯示此SVG圖標，并放大和縮小img元素的大小時，SVG圖標不會放大或縮小。相反，或多或少會顯示SVG畫布。
下面是將img CSS Height屬性設(shè)置為32。
- <svg xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <circle cx="32" cy="32" r="64" style="fill: #00ccff;"></circle>
- </svg>
注：
如何僅顯示圓圈的一部分，而不是按比例縮小整個圓圈。
造成此問題的原因是SVG圖像文件缺少某些信息。必須為SVG viewBox屬性設(shè)置一個值 。SVG viewBox屬性指定應(yīng)顯示多少SVG畫布(在X和Y方向上)。
如何只顯示SVG畫布的包含圓圈圖標的部分?
只想顯示SVG畫布的包含圓圈圖標的部分。該區(qū)域從點0,0延伸到點128,128(圓的半徑為64，以64，64為中心)。使用SVG Viewbox屬性，可以指定只渲染SVG畫布的這一區(qū)域。
下面是設(shè)置了Viewbox值的SVG圓圖標的外觀。
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
- <circle cx="16" cy="16" r="16" style="fill: #00ccff;">
- </circle>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
- <circle cx="32" cy="32" r="32" style="fill: #00ccff;">
- </circle>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
- <circle cx="48" cy="48" r="48" style="fill: #00ccff;">
- </circle>
- </svg>
這是顯示的SVG圖標，高度分別為16、32和48像素：
四、總結(jié)
本文基于HTML基礎(chǔ)，介紹了SVG 圖標。什么是SVG圖標，以及SVG圖標的在實際的優(yōu)勢，如何在Web Apps中使用SVG圖標，如何去自定義自己的SVG圖標。每一個目錄都通過案例分析，運行效果圖的展示進行詳細講解。能夠加深讀者的印象。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
本文轉(zhuǎn)載自微信公眾號「前端進階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進階學(xué)習(xí)交流公眾號。
