1. 【上海SEO】首頁
  2. 網站教程

如何實現WordPress博客支持SVG格式圖像上傳

如何實現WordPress博客支持SVG格式圖像上傳

SVG是一種基于XML的矢量圖像,現在很多網站使用這種格式來顯示網站Logo和圖標。 它們在開發人員和設計人員中特別受歡迎的主要原因是它們是可縮放的圖像格式,通常文件大小較?。ㄓ袝r相當大),完美適配視網膜屏幕。 默認情況下,WordPress不允許您上傳SVG文件格式,主要是出于安全考慮。 今天我們將深入探討WordPress安全啟用SVG支持的方法,討論瀏覽器支持,以及一些警告,如果您決定要切換到矢量圖像格式。

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

什么是SVG?

為什么SVG安全性很重要

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

什么是SVG?

根據維基百科,SVG(可縮放矢量圖形)是一種基于XML的矢量圖像格式,用于支持交互性和動畫的二維圖形。 您甚至可以使用代碼或文本編輯器來編輯它們。 SVG規范是自1999年以來由萬維網聯盟開發的開放標準。目前SVG僅占所有網站的3.4%,但正如您所見,采用率正在快速增長。 流行的網站,如谷歌,Reddit,Dropbox,ESPN,甚至我們在wbolt.com的網站都使用SVG。

如何實現WordPress博客支持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+

如何實現WordPress博客支持SVG格式圖像上傳

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)

如何實現WordPress博客支持SVG格式圖像上傳

JPG圖像

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

如何實現WordPress博客支持SVG格式圖像上傳

PNG圖像

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

如何實現WordPress博客支持SVG格式圖像上傳

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’);<code></code>

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

如何實現WordPress博客支持SVG格式圖像上傳

SVG sanitizer demo

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

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

Daryll開發了一個插件-WP SVG(也稱為安全SVG),它在將SVG圖像上傳到您的WordPress媒體庫時利用SVG-Sanitizer庫。 該插件還允許您在媒體庫中如普通圖像查看SVG。 您可以從WordPress插件市場免費下載這個插件,或者在WordPress儀表板“添加新”插件下的中搜索它安裝。

如何實現WordPress博客支持SVG格式圖像上傳

WP SVG 插件

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

在上傳SVG之前,重要的是要了解它們的特點與圖像略有不同。 從照片編輯工具導出SVG時,您需要將文本導出為曲線(或創建輪廓),否則,在各種瀏覽器中可能會略有不同。

如何實現WordPress博客支持SVG格式圖像上傳

Affinity Designer – 將文本導出為曲線SVG

安裝插件后,沒有任何需要你設置,只需在上傳時清理SVG。 在下面的測試網站上,您可以看到使用SVG文件替換了我們的Logo,它在媒體庫中可以正常查看。

如何實現WordPress博客支持SVG格式圖像上傳

SVG在WordPress媒體庫

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

如何實現WordPress博客支持SVG格式圖像上傳

SVG in WordPress header

我們還有一個額外的調整。 在IE9-11中,桌面和移動設備尚未正確擴展SVG文件。添加高度和寬度可以解決此問題。 這可能因主題而異,但在我們的測試網站上,我們只是修改了header.php文件并添加了這些自定義維度。 一些WordPress主題使用CSS來修改縮放,這不是出于性能原因,但由于它可能需要您添加其他代碼來修復IE問題。

如何實現WordPress博客支持SVG格式圖像上傳

為IE瀏覽器SVG擴展問題修改的header.php文件

就是這樣! 您現在已經安全地啟用了WordPress的SVG支持。 此插件和/或方法未得到WordPress核心的認可或支持,因此使用風險自負。 但是,如果您已經上傳了僅包含MIME類型代碼段的SVG,那么請務必這樣做。

此外,如果您之前從未使用過SVG,請確保在服務器上為“image/svg+xml”文件類型啟用GZIP。 這將確保它們被壓縮并盡可能快地加載。 有時,sysadmins僅啟用更標準的文件類型。 ·

小結

SVG在最近幾年越發流行,只要是為了能夠在高分辨率顯示器下以較小體積展示高品質的

發布者:小謝SEO,轉轉請注明出處:http://www.htmlhulp.com/35399.html

發表評論

登錄后才能評論

聯系我們

徐經理 18551199954

在線咨詢:點擊這里給我發消息

郵件:13965841010@qq.com

工作時間:周一至周五,9:30-18:30,節假日休息

QR code
两个人做人爱视频免费