可縮放矢量圖形（SVG）是一種獨特的圖像格式。 與其他品種不同，SVG不需要依靠唯一的像素來構成您看到的圖像。 相反，他們使用「向量」數據。
通過使用SVG，您可以獲得可以縮放至任何解析度的圖像，這在許多其他用例中對於Web設計非常方便。 在本文中，我們將提出一個問題：什麼是SVG文件？ 然後，我們將教您如何使用格式。
讓我們開始吧！
什麼是SVG文件？
SVG是使用矢量構建的圖形。 對於初學者來說，向量是具有特定大小和方向的元素。 從理論上講，您可以使用向量集合生成幾乎任何類型的圖形。 拍攝這張帶有黑色邊框和陰影的藍色矩形的圖像，例如：
這是另一種稱為 攜帶型網路圖形（PNG），用於插圖和繪圖。 如果要使用矢量圖形複製相似的內容，則需要使用 XML代碼 （與用於站點地圖的結果相同。）以下代碼可以達到相同的結果：
<？xml version =「 1.0」 standalone =「 no」？>
從理論上講，如果您使用此代碼並將其放入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。 一些主要選項包括：
此列表中的最後兩個選項是開源解決方案。 這使它們成為無需付費購買高級軟體即可嘗試創建SVG的絕佳選擇。 實際上，它們可能就是您所需要的。
如果您沒有圖形設計經驗，那麼為網站創建自己的徽標或其他元素將是一個挑戰。 在這種情況下，最好的選擇是拍攝現有圖像並將其轉換為SVG。
2.將現有圖像轉換為SVG
您可以使用許多免費工具將其他格式的圖像轉換為SVG。 我們在上一節中提到的大多數軟體都使您可以打開圖像並將其另存為SVG文件。
如果您不想下載任何軟體，則還可以使用在線轉換工具-您可以使用許多服務。 一個例子是 矢量魔術，您可以用來將所有類型的文件類型轉換為SVG：
我們喜歡這個特殊的工具，因為它會在下載前顯示SVG文件的預覽。 您還可以使用內置的編輯器在下載文件之前進行一些小的更改和更正：
當然，這只是一種選擇。 其他PNG和JPG到SVG轉換器的服務包括 轉換和 圖2。 您將需要進行一些研究，以找到最適合您需求的解決方案。
根據我們的經驗，大多數SVG轉換器可提供類似質量的結果。 為了獲得最佳效果，使用的轉換器與選擇的圖像無關緊要。
根據經驗，只有將SVG格式用於「簡單」圖像（即具有定義的邊框和乾淨的線條的圖像）才有意義。 圖像越複雜，最終獲得大量SVG文件的可能性就越大，該文件很難手動編輯或設置動畫。
如何使用SVG文件（WordPress內外）
SVG並不是很難使用。 將SVG文件添加到您的網站就像獲取其代碼並將其粘貼到HTML文檔中一樣簡單，無論您想要將圖片移到何處。
如果您和您的網站訪問者使用支持SVG文件的瀏覽器（並且 這些天大多數），他們將能夠看到該元素。 當然，對SVG進行動畫處理比較麻煩，因為它需要使用CSS。
但是，如果您使用的是WordPress，則過程會有所不同。 內容管理系統（CMS）不支持現成的SVG。 如果您想啟用SVG支持，以便可以將文件直接上傳到您的網站，則需要使用一個插件，例如 安全的SVG：
也可以 在WordPress中啟用SVG支持 手動操作，但過程涉及更多。 在這種情況下，使用插件是更安全的選擇。
結論
調整您的網站以使用SVG文件比您想像的要容易得多。 真正的挑戰在於從頭開始設計SVG或選擇正確的圖像以轉換為格式。 幸運的是，您可以使用很多工具來完成這兩項工作。
一些不錯的選擇包括 Adobe Illustrator的， InDesign和 GIMP。 使用這些工具，您可以創建現有圖像並將其轉換為SVG。 如果您使用的是WordPress，則可以使用 安全的SVG 插件，然後 開心地給他們動畫。
您對如何使用SVG文件有疑問嗎？ 讓我們在下面的評論部分中討論它們！
由VectorsMarket / shutterstock.com提供的文章圖片縮略圖