什麼是SVG文件？網頁設計如何使用SVG文件？
可縮放矢量圖形 (SVG) 是一種獨特的圖像格式。與其他品種不同，SVG不依賴於獨特的像素來構成您看到的圖像。相反，他們使用「矢量」數據。通過使用SVG，您可以獲得可以放大到任何解析度的圖像，這在許多其他用例中對網頁設計非常有用。在本文中，我們將問一個問題：什麼是SVG文件？然後我們將教您如何使用該格式文件。
什麼是SVG文件？
SVG是使用矢量構建的圖形。對於初學者來說，向量是具有特定大小和方向的元素。理論上，您可以使用矢量集合生成幾乎任何類型的圖形。以這張帶有黑色邊框和陰影的藍色矩形圖像為例：
這是另一種稱為可攜式網絡圖形 (PNG)的圖像文件，用於插圖和繪圖。如果您想使用矢量圖形複製類似的東西，您需要使用XML程式碼生成它（與用於站點地圖的程式碼相同。）以下程式碼可以獲得相同的結果：
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>
理論上，如果您將這段程式碼放入一個 HTML 文件中，您將看到一組與PNG相似的矩形——也就是說，只要您使用的瀏覽器支持SVG文件。儘管兩個圖像看起來相同，但SVG文件提供了其他格式所沒有的一大堆好處。例如，SVG能夠在放大或縮小時保持圖像品質。
如果您繼續放大PNG矩形，您會注意到它的品質在某個時候開始下降。對於更複雜的基於像素的圖形，退化會更快地變得明顯。然而，SVG在幾乎任何解析度下看起來都不錯。
為什麼要使用SVG文件？
許多網站幾乎可以互換使用PNG和 JPEG 等格式。不過，SVG並不是那麼通用。如果您嘗試使用矢量重新創建複雜的照片，通常最終會得到大量且無法使用的SVG文件。
SVG格式文件使用場景：
標誌設計。由於您可能會在網站和社群媒體上重複使用徽標，因此使用SVG可以解決任何潛在的可擴展性問題。
圖表。SVG非常適合圖表和任何其他依賴於純線條的插圖。
動畫元素。您可以使用CSS為SVG設定動畫，這使它們成為網站設計中的有用組件，特別是對於微互動。
圖表和圖形。 您可以使用SVG創建支持動畫的可縮放圖形和圖表。
由於SVG使用 XML格式，這也使它們既可搜索又可索引。只要您使用正確的輔助功能標籤，螢幕閱讀器就可以解釋SVG文件。
最後，SVG文件往往比其他格式的高解析度文件小得多。在紙面上，這意味著您可以縮小一些頁面大小並減少加載時間。但是，除非您計劃將大部分圖像轉換為SVG，否則性能提升可能很小。
如何創建SVG文件（2 種方式）
對於SVG文件，您可以採用兩種方法。您可以從頭開始創建它們或獲取現有圖像並進行轉換。
1.手動創建SVG文件
創建SVG文件通常不需要像我們之前所做的那樣輸入矢量信息。您可以像創建任何其他圖形一樣創建SVG， 通過使用設計程序並將文件另存為SVG。許多現代圖形設計工具都支持開箱即用的SVG。包括：Adobe Illustrator、Photoshop、Animate和InDesign、微軟 Visio等。如果您沒有任何圖形設計經驗，為您的網站創建自己的徽標或其他元素將是一個挑戰。在這種情況下，最好的辦法是獲取現有圖像並將它們轉換為SVG。
2. 將現有圖像轉換為SVG
您可以使用許多免費工具將其他格式的圖像轉換為SVG。我們在上一節中提到的大多數軟體都可以讓您打開圖像並將它們保存為SVG文件。
如果您不想下載任何軟體，也可以使用線上轉換工具。
根據經驗，僅將SVG格式用於「簡單」圖像，即具有明確邊界和清晰線條的圖像。圖像越複雜，你就越有可能最終得到一個巨大的SVG文件，這是一項手動編輯或動畫製作的苦差事。
如何使用SVG文件
SVG並不是那麼難使用。將SVG文件添加到您的網站就像獲取其程式碼並將其粘貼到 HTML 文檔中一樣簡單。
如果您和您網站的訪問者使用支持SVG文件的瀏覽器（現在大多數都支持），他們將能夠看到該元素。當然，使用動畫SVG有點挑戰，因為它需要使用CSS。但是，如果您使用的是 WordPress，則該過程會發生變化。內容管理系統 (CMS) 不支持開箱即用的SVG。如果您想啟用SVG支持以便可以將文件直接上傳到您的網站，您需要使用諸如SafeSVG之類的插件：也可以在 WordPress 中手動啟用SVG支持，但這個過程要複雜得多。在這種情況下，使用插件是更安全的選擇。
小結
調整您的網站以使用SVG文件比您想像的要容易得多。真正的挑戰在於從頭開始設計SVG或選擇正確的圖像以轉換為格式。您可以使用很多工具來完成這兩項工作。一些不錯的選擇包括Adobe Illustrator、InDesign和GIMP。使用這些工具，您可以創建現有圖像並將其轉換為SVG。如果您使用的是 WordPress，則可以使用SafeSVG插件上傳這些SVG，然後享受動畫製作的樂趣。
