面向開發人員的 SVG：了解基礎知識、優點和缺點

圖形在網站上帶來獨特的表達方式，並幫助開發人員輕鬆地向用戶傳達深刻的想法和概念。 它是 Internet 上的一個關鍵元素，自 1999 年以來已成為可編寫腳本，允許在網絡上更複雜地呈現圖像。

您可能非常熟悉不同光柵圖像文件類型的使用：JPG、PNG 和 GIF。 讓我們回憶一下。 GIF（圖形交換格式）支持 256 色（8 位），是一種出色的動畫和透明度格式，不包括 alpha 透明度。 PNG（便攜式網絡圖形）格式要好得多，它支持超過 1600 萬種顏色（24 位）和所有類型的透明度，前提是您不需要動畫。

網絡上使用最廣泛的圖像格式 JPG 或 JPEG（聯合圖像專家組），主要是因為它是可壓縮的，支持超過 1600 萬種顏色； 灰度為每像素 24 位或 8 位，但不支持動畫或透明度。 因此，JPG 是開發人員用於靜態照片的主要圖形格式。 我沒有提到位圖 (BMP)，因為它通常不是 Web 的圖像格式。 BMP 存儲圖像中每個像素的精確數據，這使得文件非常大（超過相同分辨率的 JPG 大小的 150 倍）並且不適合用於網站圖形。

這些與分辨率相關的圖形格式非常棒，主要是在適當使用時。 然而，它們都有一個共同的缺點，這導致了 SVG 的引入——唯一的網絡矢量圖像格式。

什麼是 SVG？

Scalar Vector Graphics (SVG) 是一種基於可擴展標記語言 (XML) 的圖像格式，用於描述路徑、線、圓、圖案、文本顏色等二維圖形。在更簡單的定義中，它指的是一種圖像格式支持二維，其整個行為和存在由 XML 文本文件控制。

另一個有趣的特性是它的可擴展性。 您可以將 SVG 圖像放大到任意比例，而不會丟失其分辨率。 這是因為 SVG 用形狀、數字和坐標來渲染圖像，而不是像光柵圖像格式那樣用像素來渲染圖像，光柵圖像格式通過定義每個像素應該被繪製的顏色來渲染圖像。

讓我們看看如何創建 SVG 圖像以及應該考慮在項目中使用 SVG 的一些原因。

如何創建 SVG 圖像

您可以使用任何文本編輯器創建 SVG 圖像，儘管該過程有點技術性並且需要一些設計和數學知識，尤其是在創建一些複雜形狀時。 想像一下，只用幾行代碼在畫布上畫一架飛機。 然而，有一個更簡單的方法，但讓我們用它來理解 SVG 的基本概念。

我們使用 SVG 圖形元素在文本編輯器中製作 SVG 圖像。 該過程是簡單地將您的圖形元素插入 <svg> 和 </svg> 標籤內，指定它們的坐標、尺寸、顏色等。例如，<rect> 元素可用於繪製矩形，如下面的例子。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

如果保存為 .svg 文件並使用瀏覽器打開，上面的代碼將在瀏覽器的最左上角繪製一個 300x x 300px 的藍色矩形。 現在，您可能想知道為什麼我們在文檔中有兩個高度和寬度。 讓我們了解整個代碼以了解原因。 如前所述，您的 SVG 代碼必須寫在根元素（<svg> 和 </svg>）內，以通知瀏覽器如何解釋這些行。

就像在 HTML 中一樣，SVG 需要在根元素中聲明命名空間。 在上面的示例中，我們在根元素中提供了 xmlns 參數“http://www.w3.org/2000/svg”和 W3C 推薦的 SVG 版本 1.1。 根元素內部的維度稱為 SVG 視點，它是根標籤中繪製的 SVG 圖像將通過它出現的窗口或畫布。 視點必須至少與整個 SVG 對象具有相同的尺寸，然後它們才能出現在瀏覽器中。

第二行更容易理解。 用於繪製矩形的 <rect> 元素體現了以尺寸開頭的建議矩形​​的參數。 stroke-width 描述了線條的粗細，而兩個 RGB 顏色模型分別通知瀏覽器填充矩形和線條的顏色。 這很簡單吧？

現在，我們可以通過聲明 x 和 y 的值來在頁面內移動矩形，如下所示：

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

當然，我們不會忘記增加視點尺寸以容納這將佔用的額外空間。

創建 SVG 圖像的最簡單方法是使用 Adob​​e Illustrator、Inskape 和 Sketch 等繪圖工具。 如果您正在尋找圖標、複雜的形狀等，一些 JavaScript 庫（例如 Bonsai.js 和 D3.js）不是從頭開始構建的，而是很好的 SVG 圖像來源。

添加 SVG 圖像

使用 SVG 圖像的好處之一是可以輕鬆地將它們與您的設計集成。 您只需在 img 標籤的 src 屬性中引用它們。 這應該是指保存在您的網站文件夾中的 .svg 文件，如下所示：

<img src='example.svg'>

或者，您可以將 SVG 代碼插入到 HTML 文檔中，如前所述，使用 <svg></svg> 標記開始和結束代碼。

您還可以在 CSS 中為 background-image 引用 SVG 圖像，如下所示：

.main-header {
background-image: url(example.svg);
}

使用 SVG 對開發人員的好處

考慮到當前 Internet 的圖形需求，您在後續 Web 項目中對 SVG 的需求怎麼強調都不為過。 除了具有強大分辨率和屏幕尺寸的無數新設備之外，網站現在具有如此多的交互性，以至於如果無法完全控制您的圖形，就很難提供專業級的網站。

一些好處包括：

可擴展性和響應性

作為一種不依賴於分辨率的圖像格式，SVG 可以無限縮放，而不會像素化。 作為開發人員，這使您可以向每個用戶提供一流的圖形圖像，無論其設備的分辨率強度和屏幕尺寸如何。 您可以組合不同的路徑、形狀和文本元素來創建令人驚嘆的視覺效果，這些視覺效果在各種尺寸下都將清晰明了。

這在任何具有固定尺寸的光柵圖像格式中都不可用，僅僅是因為當它們被極度放大時，它們永遠不會有足夠的數據來填充每個空間。 SVG 計算點之間的距離以保持路徑不斷連接，以便圖像在任何比例下都保持清晰。

極其靈活並支持動畫

與提供圖像最終副本的光柵圖像不同，SVG 圖像可以通過使用文本編輯器或特殊繪圖工具調整代碼來完全編輯。 使用 SVG 元素的類名或 ID，您可以使用 CSS 設置 SVG 圖像的樣式或動畫。 也可以使用 Web Animation API、SMIL 或 WebGL 對 SVG 圖像進行動畫處理。

最重要的是，您可以將 SVG 圖像與其他著名的開放式 Web 平台技術和文檔集成。 SVG 可以使用 JavaScript 編寫腳本，並使用 HTML 等 CSS 進行樣式設置。

SEO 友好和小文件大小

SVG 圖像以文本格式存在，提高了網站的可訪問性，這是頁面排名的重要資產。 除此之外，搜索引擎能夠索引 SVG 元素文本，並允許用戶使用 SVG 文件中的關鍵字找到您的網站。

SVG 加載速度要快得多，因為它沒有要下載的文件並且不需要 HTTP 請求。 提高光柵圖像文件的分辨率意味著增加點（像素）的數量。 這將增加圖像大小，從而拖累您的網站加載時間。 當您使用 SVG 時，情況遠非如此。 作為使用一組指令和坐標創建的圖像，與任何其他圖像文件類型相比，SVG 文件的大小（優化後）非常小。 這會導致更快的加載時間、更高的頁面性能、更高的搜索引擎排名，同時仍能改善用戶體驗。 有關這方面的更多信息，請訪問倫敦 SEO 顧問

SVG 有自己的文檔對像模型

SVG 作為一個單獨的文檔存在，被認為具有自己的結構並位於普通 DOM 中。 這種聲譽對於 viewBox 屬性至關重要，它允許我們創建任意維度的視點，在不同大小的畫布上繪製圖像並在不更新 SVG 屬性的情況下顯示它們。

SVG 是未來的圖像文件格式

如果沒有更強大且屏幕分辨率驚人的設備的出現，開發人員就不必為針對不同設備優化圖像而頭疼不已。 但這在幾年後不會變得更容易，再加上對增加網站交互性的渴望。

不知何故，通過提供不同的圖像來匹配用戶的視點維度來管理這些挑戰並不划算。 為了通過節省帶寬、資金和改善用戶體驗來實現業務可持續性，轉向 SVG 圖像格式的努力不可避免地成為重中之重。 SVG 支持者社區不斷壯大。

在 W3C 於 2011 年 8 月 16 日推出 SVG 1.1（第二版）之前，SVG 1.0 和 1.1（第一版）已經在改變我們在互聯網上處理圖像的方式。 這是比常規光柵圖像格式更有價值的承諾，這在我們當前的 Web 編程狀態中仍然非常有用。 SVG 在所有情況下都不是最好的圖像格式。 SVG 的後續版本有望解決 SVG 的一些缺點； 將在本文後面討論。

何時使用 SVG 圖像格式

當然，與分辨率相關的圖像格式仍然是照片和其他詳細圖像的最佳選擇。 以下是 SVG 圖像格式最佳的常見情況列表。

1. 標誌和圖標
2. 交互式圖像，例如圖表、圖形、地圖、信息圖表
3. 動畫
4. 應用程序接口
5. 簡單的圖表和插圖
6. 特殊效果，例如粘性或形狀變形
7. 低強度的藝術品和簡單的圖形

SVG 對開發人員的缺點

並非所有瀏覽器都支持 SVG：舊瀏覽器對待 SVG 的方式與舊的 Windows XP 在您嘗試連接閃存驅動器或佳能 EOS 5DSr 時對待它們的方式相同。 簡而言之，SVG 不適用於舊版瀏覽器。 IE8 及更低版本。 然而，考慮到遺留瀏覽器並不是任何未來事業的一部分，再加上只有少數人仍在使用它們，這並不是不使用 SVG 的主要原因。

SVG 不支持這麼多細節：作為路徑和點的混合體，SVG 缺乏顯示與基於像素的光柵圖像格式一樣多的細節的框架。 SVG 不適用於用相機拍攝的任何東西。 因此，具有如此多細節的照片和其他形式的圖形最好使用光柵圖像格式顯示，因為它們支持更高的顏色密度。

理解 SVG 代碼：雖然開發人員可能被認為知道如何使用多種 Web 編程語言，但事實證明，增加這種負擔是一個挑戰。 SVG 代碼模式實際上並不難或與 Web 編程語言完全不同。 但是創建或處理引人注目的圖像需要一些努力。 當位圖圖像很方便且無需努力嵌入時，這並不是每個開發人員都願意投入大量時間做的事情。

結論

網站上圖形響應其廣泛用戶的行為是當今 Web 開發的一個重要方面。 而 SVG 圖像格式是最重要的解決方案，而不是像我們當前的設計中通常看到的那樣呈現多種圖像尺寸。 這是因為瀏覽器使用一組指令計算應如何渲染圖像，這些指令可確保任何比例的清晰和清晰的圖像。

位圖圖像仍然最適合用於高度詳細的圖像，例如照片，而 SVG 圖像用於不太詳細的圖像，例如圖標、徽標、圖表、信息圖表等。我建議您堅持使用 Illustrator 或 Sketch 等繪圖工具為圖標和流行形狀創建 SVG 圖像和在線庫。 只有當您想要操作 SVG 圖像時才需要編碼。

請讓我們知道您如何使用 SVG 以及此處未分享的其他酷炫技巧。