如何實現WordPress部落格支援SVG格式影象上傳

SVG是一種基於XML的向量影象，現在很多網站使用這種格式來顯示網站Logo和圖示。 它們在開發人員和設計人員中特別受歡迎的主要原因是它們是可縮放的影象格式，通常檔案大小較小（有時相當大），完美適配視網膜螢幕。 預設情況下，WordPress不允許您上傳SVG檔案格式，主要是出於安全考慮。 今天我們將深入探討WordPress安全啟用SVG支援的方法，討論瀏覽器支援，以及一些警告，如果您決定要切換到向量影象格式。

希望有一天SVG作為WordPress核心的一部分。

• 什麼是SVG?
• 為什麼SVG安全性很重要
• 如何安全地為WordPress啟用SVG支援

什麼是SVG?

根據維基百科，SVG（可縮放向量圖形）是一種基於XML的向量影象格式，用於支援互動性和動畫的二維圖形。 您甚至可以使用程式碼或文字編輯器來編輯它們。 SVG規範是自1999年以來由全球資訊網聯盟開發的開放標準。目前SVG僅佔所有網站的3.4％，但正如您所見，採用率正在快速增長。 流行的網站，如谷歌，Reddit，Dropbox，ESPN，甚至我們在wbolt.com的網站都使用SVG。

SVG使用情況統計（2016年4月-2017年4月）

SVG瀏覽器支援情況

目前，所有主流瀏覽器和移動瀏覽器都支援SVG。 您可能遇到的唯一問題是，如果您仍然需要IE8的支援，當然我們不希望你繼續支援這個瀏覽器。 IE8僅佔0.36％的市場份額，並且微軟也不再為該版本瀏覽提供更新支援。 有興趣的朋友可以閱讀國外博主Lubos撰寫的關於《為什麼開發人員應該停止支援IE8，IE9和IE10》的文章。 從商業角度來看，這可能並非總是可行，但他提出了一些非常好的觀點。 如果由於某些特殊原因你仍然需要IE8支援，你可以為你的SVG定義一個備用影象（PNG或JPG），但我們今天不會基於此展開討論。 以下是支援的瀏覽器列表：

• Internet Explorer 9, 10, 11+ and Edge
• Firefox 3+
• Chrome 4+
• Safari 3.2+
• Opera 10+
• iOS Safari 3.2+
• Opera Mini (all)
• Android Browser 4.4+

SVG瀏覽器支援情況

SVGs的優勢

SVG是一種向量格式，這意味著它們可以在瀏覽器和照片編輯工具中無限無損縮放。SVG為什麼受圖形和網頁設計師歡迎，不言而喻。通常，當您嘗試在Photoshop，Sketch或Paint等工具中編輯PNG或JPG時，會受限於原圖的畫素。使用SVG，你可以隨心所欲地對圖形檔案進行縮放，並且畫素完美（或者我們應該說向量完美）。這就是為什麼它們是用於視網膜螢幕的優秀影象格式的原因。

谷歌索引SVG，如果你關心搜尋引擎優化，這是一個好訊息。連結到檔案本身的SVG內容將被編入索引並顯示在Google影象搜尋中。注意：內聯SVG，或者更確切地說僅由程式碼組成的SVG，通常不會被編入索引。

SVG傳統上（並非總是）檔案大小小於PNG或JPG。通過使用SVG，您實際上可以加快WordPress網站的速度，因為您將減少整體頁面大小。 國外博主Genki寫了一篇很棒的文章，他比較了SVG與PNG和JPEG的大小。以下是他測試中的一些內容，他比較了三種不同的影象型別。

JPG (經過優化後的大小: 81.4 KB)

JPG影象

PNG (經過優化後的大小: 85.1 KB)

PNG影象

SVG (經過優化後的大小: 6.1 KB)

SVG影象

如您所見，與JPG相比，SVG的檔案大小減少了92.51％。 與PNG相比，則減少92.83％。 這些檔案大小差異非常可觀。 然而，有一點需要注意，，SVG並非總是比JPG或PNG小，尤其是一些色彩豐富，細節複雜的圖片。

這就是為什麼許多網站使用SVG來處理不太詳細的影象，例如Logo，圖示等，因為它們會看到檔案大小的顯著減少。 但是對於擁有大量細節的影象，例如您的部落格文章“插圖”，您可能更偏向使用PNG或JPG（當然也應該對這些格式影象進行優化），SVG格式並不適合細節豐富的影象。 許多網站使用混合方法，在有意義的情況下將兩種檔案型別結合使用。

此外，值得注意的是Facebook和Twitter等社交媒體網路不支援SVG進行共享。 因此，如果您使用SVG作為特色影象，則必須使用Yoast SEO功能併為OG和meta標籤上傳PNG或JPG，甚至個人建議文章的特色影象直接不適用SVG格式。

為什麼SVG安全性很重要

SVG不屬於WordPress核心的原因在於還需要解決安全問題。 您可以回顧在2013年關於SVG作為WordPress核心（＃24251）的激烈討論。SVG是一個XML檔案，它本身可能會導致各種漏洞（普通的影象格式則不會存在這樣的問題）。 這些漏洞包括XML外部實體攻擊（XXE），巢狀實體攻擊和XSS攻擊。

Mario Heiderich發表了一篇有關SVG檔案內容注入所帶來的安全風險的深刻見解。 給出的一個例子是JavaScript嵌入在SVG中，它實際上設法在Skype上呼叫Mario。 那有點嚇人！ WordPress安全外掛的作者SecuPress也談到了在向WordPress新增SVG時要注意的問題，以及以正確的方式做到這一點的重要性。

外掛庫中的許多SVG外掛都使用以下程式碼，這些程式碼只允許將MIME型別SVG上載到WordPress媒體庫。 這不是安全的方法！ 所以不要去下載任何免費的SVG外掛，或者複製貼上這段程式碼來實現SVG上傳支援。

function cc_mime_types($mimes) { 
 $mimes['svg'] = 'image/svg+xml'; 
 return $mimes; 
} 
add_filter('upload_mimes', 'cc_mime_types');

解決方案是需要對SVG進行清理。 清理基本上是清理程式碼或輸入以避免安全問題（例如程式碼注入），程式碼衝突和錯誤。 這可能需要編碼資料，過濾和驗證字串等等。這是Daryll Doyle的SVG-Sanitizer庫發揮作用的地方，他稱之為“試圖在PHP中構建一個像樣的SVG清理工具” 。你可以使用該開發者編寫的DEMO來體驗一把SVG程式碼清洗效果。

SVG sanitizer demo

同樣重要的是，您要考慮您網站上的哪些人有權上傳SVG。 例如，如果您的WordPress網站支援多作者，則不知道其他人可能上傳哪種SVG，從而暴露您的網站。 將SVG上傳限制為管理員以及瞭解某些安全問題的人員可能比較穩妥。

如何安全地為WordPress啟用SVG支援

Daryll開發了一個外掛-WP SVG（也稱為安全SVG），它在將SVG影象上傳到您的WordPress媒體庫時利用SVG-Sanitizer庫。 該外掛還允許您在媒體庫中如普通影象檢視SVG。 您可以從WordPress外掛市場免費下載這個外掛，或者在WordPress儀表板“新增新”外掛下的中搜尋它安裝。

WP SVG 外掛

你可以通過wpsvg.com獲取它的高階版本，允許您限制某些使用者上傳SVG和其他SVG優化。 在下面的這個例子中，我們僅以免費版本作為示例。

在上傳SVG之前，重要的是要了解它們的特點與影象略有不同。 從照片編輯工具匯出SVG時，您需要將文字匯出為曲線（或建立輪廓），否則，在各種瀏覽器中可能會略有不同。

Affinity Designer – 將文字匯出為曲線SVG

安裝外掛後，沒有任何需要你設定，只需在上傳時清理SVG。 在下面的測試網站上，您可以看到使用SVG檔案替換了我們的Logo，它在媒體庫中可以正常檢視。

SVG在WordPress媒體庫

這也允許我們使用我們的主題控制面板將我們的WordPress標題中的Logo更改為SVG檔案。 你可以在下面看到它確實提供了.SVG檔案。 在視網膜螢幕上看起來完美無缺。

SVG in WordPress header

我們還有一個額外的調整。 在IE9-11中，桌面和移動裝置尚未正確擴充套件SVG檔案。 新增高度和寬度可以解決此問題。 這可能因主題而異，但在我們的測試網站上，我們只是修改了header.php檔案並新增了這些自定義維度。 一些WordPress主題使用CSS來修改縮放，這不是出於效能原因，但由於它可能需要您新增其他程式碼來修復IE問題。

為IE瀏覽器SVG擴充套件問題修改的header.php檔案

就是這樣！ 您現在已經安全地啟用了WordPress的SVG支援。 此外掛和/或方法未得到WordPress核心的認可或支援，因此使用風險自負。 但是，如果您已經上傳了僅包含MIME型別程式碼段的SVG，那麼請務必這樣做。

此外，如果您之前從未使用過SVG，請確保在伺服器上為“image/svg+xml”檔案型別啟用GZIP。 這將確保它們被壓縮並儘可能快地載入。 有時，sysadmins僅啟用更標準的檔案型別。 ·

小結

SVG在最近幾年越發流行，只要是為了能夠在高解析度顯示器下以較小體積展示高品質的圖形！ 我們建議將SVG，PNG和JPG結合使用以獲得最佳效能，因為細節過於豐富的影象在SVG格式中表現不佳。 SVG非常適合Logo及網站圖示，以確保它在每個螢幕上都具有完美的畫素。 關於WordPress下支援SVG，你的想法是什麼？ 你在WordPress網站上使用過SVG嗎？