如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

您想將 svg 文件添加到您的 wordpress 網站嗎?

默認情況下,WordPress 允許您上傳幾乎所有流行的圖像、音頻和視頻文件格式。然而,SVG 并不在其中。這是因為圖像格式存在潛在的安全問題,但有安全的方法來使用它們。

在本文中,我們將向您展示如何在 WordPress 中輕松安全地添加 SVG。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

什么是 SVG?

SVG 或可縮放矢量圖形是一種使用 xml 標記語言定義矢量圖形的文件格式。SVG 的主要優點是它允許您放大圖像而不會損失質量或出現任何像素化。

SVG 是如何工作的?

可縮放矢量圖形 (SVG) 是一種使用 XML 顯示二維繪圖的技術。它們與常用的圖像格式(如 PNG、GIF或 JPG)不同。

如果您拍攝 PNG 或 JPG 圖像文件并放大,您會注意到圖像將開始模糊并變得像素化。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

矢量圖形不使用像素。

相反,他們使用二維地圖將您正在查看的圖形定義為坐標。當您放大時,圖像不會像素化,因為它根本就不能像素化。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

這使您能夠在不損失質量的情況下放大矢量圖形。最重要的是,SVG 圖像的文件大小比 PNG 或 JPG 文件小得多。

矢量圖形通常用于圖標、圖標字體、網站徽標和品牌圖像。您可能希望將 SVG 文件添加到 WordPress 以作為您的公司徽標、圖標或其他圖形。

盡管聽起來很酷,但 SVG 文件可能有點不安全。這就是為什么 WordPress 默認不支持 SVG 文件上傳。

如果您在 WordPress 中上傳 SVG 圖像,您將看到以下錯誤消息:

抱歉,出于安全原因,不允許使用此文件類型。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

WordPress 中有關 SVG 的安全問題

SVG 文件包含XML標記語言的代碼,類似于 html。您的瀏覽器或 SVG 編輯軟件會解析 XML 標記語言以在屏幕上顯示輸出。

但是,這會使您的網站面臨可能的 XML 漏洞。它可用于未經授權訪問用戶數據、觸發暴力攻擊或跨站點腳本攻擊。

我們將在本文中分享的方法將嘗試清理 SVG 文件以提高其安全性。然而,這些插件并不能完全阻止惡意代碼的上傳或注入。

最佳解決方案是僅使用由可靠來源創建的 SVG 文件,并將 SVG 上傳限制為僅可信任的用戶。

要了解有關安全性的更多信息,請查看我們完整的WordPress初學者安全指南。

話雖這么說,讓我們看看如何使用 3 種方法之一輕松、安全地在 WordPress 中使用 SVG 文件。

  • 方法 1. 使用 WPCode 在 WordPress 中允許 SVG 文件(推薦)
  • 方法 2. 使用 SVG 支持在 WordPress 中上傳 SVG 文件
  • 方法 3. 使用安全 SVG 在 WordPress 中上傳 SVG 文件

視頻教程

https://www.youtube.com/embed/2V6mg7v2Wps?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您更喜歡書面說明,請繼續閱讀。

方法 1. 使用 WPCode 在 WordPress 中允許 SVG 文件(推薦)

安全地允許 SVG 上傳到 WordPress 的最簡單方法是使用WPCode,它是可用的最強大的代碼片段插件。

WPCode 附帶了一個大型預配置代碼片段庫,可以替換您網站上的許多一次性插件,包括禁用附件頁面、使用經典帖子編輯器或允許 SVG 文件上傳。

首先,您需要安裝并激活免費的 WPCode 插件。有關詳細說明,請參閱我們有關如何安裝 WordPress 插件的分步指南。

激活后,您應該導航到WordPress 管理面板中的代碼片段 ? 添加片段。只需搜索“svg”并將鼠標懸停在“允許 SVG 文件上傳”上即可。

然后,您可以點擊“使用片段”。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

接下來,您將進入“編輯片段”頁面,其中 WPCode 已經配置了代碼運行所需的所有設置。

您所需要做的就是單擊切換到“活動”,然后按“更新”按鈕。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

現在,您將能夠上傳 SVG 文件,而 WordPress 不會給出錯誤或警告消息。

然后,您可以像對待 WordPress 網站上的任何其他圖像一樣對待它。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

默認情況下,WPCode 代碼段僅允許具有管理員角色的用戶將 SVG 添加到 WordPress。

您還可以通過刪除下圖中看到的代碼片段的第 14-16 行來向所有其他用戶角色授予權限。

您還可以通過在每行的開頭添加兩個斜杠“//”來“注釋掉它們”,將它們變成淺棕褐色。WPCode 不會執行它視為注釋而不是代碼的代碼片段的任何部分。

您可以在下圖中的第 11-13 行中看到這樣的示例。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

無論哪種方式,刪除代碼后,所有用戶都將能夠將 SVG 文件上傳到您的WordPress 網站。請務必單擊“更新”以保存您所做的任何更改。

方法 2. 使用 SVG 支持在 WordPress 中上傳 SVG 文件

此方法使用 SVG 支持插件,允許您在 WordPress 帖子和頁面中顯示內聯 SVG,并控制誰有權上傳它們。

首先,您需要安裝并激活SVG 支持插件。有關更多詳細信息,請參閱我們有關如何安裝 WordPress 插件的分步指南。

激活后,您需要訪問設置?SVG 支持頁面來配置插件設置。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

在設置頁面上,您需要選中“僅限管理員?”旁邊的框。選項。這將只允許站點管理員在 WordPress 中上傳 SVG 文件。

下一個選項是打開高級模式。僅當您想使用css 動畫和內聯 SVG 渲染等高級功能時,才需要選中此選項。

不要忘記單擊“保存更改”按鈕來存儲您的設置。

您現在可以創建新帖子或編輯現有帖子。在帖子編輯器中,您將像上傳任何其他圖像文件一樣上傳 SVG 文件。只需將圖像塊添加到編輯器,然后上傳 SVG 文件即可。

您現在可以在 WordPress 中上傳和嵌入 SVG 文件。

如何在 WordPress 中添加 SVG 圖像文件(3 個簡單解決方案)

方法 3. 使用安全 SVG 在 WordPress 中上傳 SVG 文件

此方法還使用插件,允許您對上傳到 WordPress 的 SVG 文件進行清理。

您需要做的第一件事是安裝并激活Safe SVG插件。有關更多詳細信息,請參閱我們有關如何安裝 WordPress 插件的分步指南。

該插件開箱即用,無需您配置任何設置。您可以直接開始上傳 SVG 文件。

缺點是該插件允許所有可以在 WordPress 網站上撰寫帖子的用戶上傳 SVG。為了控制誰可以上傳文件,您需要購買該插件的高級版本。

我們希望本文能幫助您了解如何在 WordPress 中安全添加 SVG 文件。您可能還想查看我們關于如何解決 WordPress 中最常見的圖像問題以及最佳 SEO 插件和工具的文章。

? 版權聲明
THE END
喜歡就支持一下吧
點贊7 分享