圖形是網站設計中的一個關鍵元素，它有助於使你的網站盡可能地對使用者友好。 獲得良好的圖像品質以在不同的螢幕尺寸上正確顯示圖形是很重要的，因為當你的標誌、圖示或圖像被嚴重縮放或扭曲時，看起來很不專業。 與JPEG和PNG等光柵圖像一起，SVG圖像現在被廣泛使用。 SVG檔在設計師和開發者中很受歡迎，因為它們的檔尺寸較小，可以通過代碼進行修改，具有可伸縮性，可以像圖像一樣使用，也可以在頁面代碼中內聯使用。 讓我們來瞭解一下如何在WordPress網站中使用SVG圖片吧
SVG檔和它們如何工作
SVG是可擴展向量圖的縮寫。 SVG使用XML標記在網路上呈現二維圖像，並支援交互性和動畫。 它以一種由點、線、形狀和曲線組成的向量格式存儲圖像。
讓我們弄清楚光柵和向量圖像之間的區別是什麼。
光柵圖形將圖像資訊存儲在彩色方塊的網格中，這被稱為位圖。 這些點陣圖方塊結合在一起顯示出完整的圖像，就像電腦螢幕上的圖元。 光柵圖像有一個固定的解析度，這就是為什麼增加尺寸會降低圖像的品質。 當然，你已經熟悉了最流行的柵格格式的圖像，JPEG和PNG。
至於向量格式，如SVG，它將圖像存儲為一組點和點之間的線，其位置由數學公式決定。 因此，當你放大或縮小圖像時，點和線的空間位置會被計算出來，無論其大小如何，都能保持圖像的高品質。
如前所述，SVG檔是用標記語言XML編寫的。 XML代碼決定了圖像所包含的形狀、顏色和文本。 例如，下面是描述一個帶有顏色填充的簡單圓形的XML代碼。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<circle fill="#00A651" cx="150" cy="150" r="150"/>
</svg>
代碼中有一行是標籤，指定了形狀。 在這個標籤裡面，你可以看到以下屬性：填充顏色fill，位置cx和cy，半徑r。
SVG檔也可以顯示文字。
這個帶文字的矩形圖像的代碼如下。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="300px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve">
<path fill="#39B54A" d="M500,288c0,6.627-5.373,12-12,12H12c-6.627,0-12-5.373-12-12V12C0,5.373,5.373,0,12,0h476
c6.627,0,12,5.373,12,12V288z"/>
<text transform="matrix(1 0 0 1 80 175)" fill="#FBB040" font-family="'MyriadPro-Regular'" font-size="86">SVG Text</text>
</svg>這個圖像的形狀是用標籤描述的，它可以通過組合多條直線和/或曲線來創建複雜的形狀。 描述文本的那部分代碼被放在標籤內。 當網路瀏覽器得到一個SVG檔時，它會處理XML代碼並在螢幕上顯示向量圖像。
SVG圖像的優點
在網站設計中，與光柵圖像相比，SVG格式的圖像有很多強大的優勢。 讓我們來看看SVG圖像的優勢。
檔尺寸小。 SVG檔能更有效地儲存圖像的資訊，並包含在任何比例下顯示向量的資訊，而光柵格式的圖像需要更多的圖元，因此需要更多的文件空間。 由於檔案大小較小，SVG圖像可以提高你的網站性能，因為它們在瀏覽器中的載入速度會更快。
圖元完美的縮放。 SVG圖像可以被放大或縮小到任何尺寸而不損失品質。 下面這張擴大的Artbees標誌的圖片清楚地展示了這一優勢（SVG圖片在左邊，PNG在右邊）。
- 設計的定製：你可以使用相容SVG的編輯軟體來改變SVG檔中的向量形狀、文字、顏色和視覺效果，而不是直接在文本編輯器中進行修改。 在文章的後面，我們將提供用於編輯向量圖的最流行的程序清單。
- 可訪問性：由於SVG檔是基於文本的，它們可以被搜索和索引，這意味著螢幕閱讀器和搜尋引擎可以閱讀它們，這使得SVG對搜尋引擎優化很有用。
- 由腳本控制：SVG是一種標準化的網路圖形格式，所以它的開發是為了與HTML、CSS和JavaScript等網路慣例良好地運作。 它允許你用提供動態渲染能力的腳本來操縱SVG圖像。
網站的元素 SVG最適合用於
SVG格式很適合用於細節少於標準照片的圖像。 在網站上，最好將向量圖用於以下元素。
網站標識和圖示。 這些網站元素在任何尺寸下都需要清晰明瞭，而SVG提供了精確的圖像形狀控制來實現這一點。
數據可視化和資訊圖表。 你可以根據使用者的操作或其他事件動態地更新SVG來顯示數據。 它有助於創建圖形、圖表或互動地圖來說明不同的數據。
動畫。 你可以將CSS動畫應用到你的SVG圖像上，或者將CSS和JavaScript結合起來以獲得很好的動畫效果。 下面是一個SVG動畫的例子。
此外，還有一個基於SVG JSON的動畫，叫做Lottie，你可以用它來輕鬆地創建動畫。
- 傳統的插圖。 如果圖畫或插圖不是過於複雜，它們可以被轉換為SVG圖像。 這樣他們就可以在不損失質量的情況下減少圖像檔的大小和容易縮放。
創建和編輯SVG圖像
如果你想打開一個SVG圖像，只預覽它，不做任何修改，你可以在網頁瀏覽器中這樣做。 要想從頭開始創建一個SVG圖像或對其進行編輯，沒有必要在XML中手動編碼。 你可以使用支援向量圖的繪圖軟體，然後以SVG格式保存/匯出你的檔。 這裡列出了最流行的處理向量圖形的程式。
Adobe Illustrator
CorelDRAW
微軟Visio
GIMP
Inkscape
前三個工具是付費的，其餘兩個是免費使用的。
除了從頭開始繪製你的圖像，你還可以將你的光柵圖像轉換成向量圖形。
讓我們看看在Adobe Illustrator中對PNG圖像進行向量處理的例子。
- 在Illustrator中打開PNG圖像，方法是：檔>打開>選擇檔。
- 一旦它被打開，使用選擇工具來選擇圖像區域（圖像周圍會出現一個藍色的邊界）
點擊圖像跟蹤按鈕，打開圖像跟蹤面板，進行跟蹤設置，以獲得理想的結果。
點擊展開按鈕，將追蹤物件轉換為路徑。
經過這些步驟，我們將得到以下結果，在這裡我們可以編輯向量圖像。
一旦完成了所有必要的編輯，我們可以通過導航到檔>另存為，將圖像保存為SVG格式。
WordPress SVG支援
由於安全問題，WordPress預設不包括對SVG檔格式的支援–因為SVG是XML檔，它們很容易被惡意軟體注入。 然而，在你的WordPress網站上安全上傳和使用SVG檔的能力，可以通過使用第三方外掛程式來提供
最受歡迎的是 SVG Support.用於將圖片上傳到你的WordPress網站。 SVG支援外掛程式允許你的SVG檔作為普通圖片出現在媒體庫中。
該外掛程式可以通過WordPress儀錶板上的外掛程式>添加新的部分安裝，如下圖所示。
一旦外掛程式安裝完畢，你會在WP儀錶盤>設置>SVG支援部分找到外掛程式設置頁面。 在設置頁面上，有關於如何為你的網站設計SVG文件樣式的說明。 另外，你還可以改變重要的管理設置，比如將SVG的上傳許可權限制在只有管理員才能使用。 一個重要的說明是：在你的伺服器設置中應該啟用對SVG檔的GZip支援。
將SVG圖片添加到你的網站
一旦在你的WordPress網站上啟用了對SVG檔的支援，你就可以上傳SVG圖片並在你的頁面上使用它們。 你可以直接把SVG上傳到媒體庫中，然後在網站主題中進行使用
