如何將 SVG 檔案安全上傳到 WordPress 網站？

將 SVG 圖像添加到 WordPress 網站而不是傳統圖像格式有其優點。影像顯得更加清晰銳利，且沒有壓縮或解析度損失。

但如果它比其他傳統圖像格式有優勢，那麼使用它來代替 JPG 或 PNG 圖像有什麼問題呢？

嗯，原因是出於安全考慮，WordPress 不支援直接使用 SVG 檔案。

但這並不意味著您不能使用它們。在本部落格中，我們將為您提供輕鬆將 SVG 圖像添加到 WordPress 網站的最佳方法。

什麼是 SVG？

SVG 代表可縮放向量圖形。它是一種用於在網站上顯示圖形的圖像格式。與 JPEG 或 PNG 等由微小的顏色方塊（像素）組成的常見圖像格式不同，SVG 由線條、形狀和文字組成。這使得它們具有可擴展性，這意味著它們可以變大或變小，而不會降低品質或變得模糊。

例如，當您放大 PNG 或 JPEG 影像時，您可能會注意到影像出現像素化（模糊或顆粒狀）。但對於 SVG，無論放大多少或調整大小，影像都保持銳利和清晰。

SVG 是如何運作的？

SVG 透過使用文字指令（以 XML 編寫）來描述影像的形狀和路徑。將其視為網頁瀏覽器的一組簡單繪圖指令。

例如，如果您畫一個圓圈，SVG 檔案會告訴瀏覽器如下：

• “在這裡畫一個圓圈，大小、顏色。”

因為它是向量格式（基於數學和幾何，而不是像素），所以圖像可以縮放到任何尺寸而不會損失其品質。

SVG 的主要優點：

• 可縮放：您可以將圖像設定為任何尺寸，並且它看起來仍然很完美。
• 輕量級：SVG 檔案大小通常較小，使網站載入速度更快。
• 可編輯：由於它是基於程式碼，因此即使在建立圖像後您也可以輕鬆更改顏色或形狀。
• 互動式：SVG 可以是動畫的或互動式的，這對於網頁設計師和開發人員非常有用。

範例用例：

• 徽標和圖標需要在所有設備（從手機到大螢幕）上看起來清晰。
• 簡單的插圖或圖形，不需要照片等複雜的細節。

注意：如果您將 SVG 檔案上傳到 WordPress 站點，將顯示錯誤訊息，如下所示：

查看以下方法：

如何將 SVG 圖像新增至 WordPress 網站？

下面給出了一些您可以遵循的最佳方法，可以在 WordPress 網站上安全可靠地使用 SVG 檔案。

方法 1：使用 WPCode 外掛程式在 WordPress 中新增 SVG 檔案或圖片

第 1 步：安裝 WPCode 插件

• 什麼是 WP 代碼？ WPCode 是一個插件，可以幫助您為 WordPress 網站添加不同的有用程式碼片段，而無需自己編寫程式碼。這些片段可以執行許多功能，否則需要多個外掛程式。
• 首先，您需要安裝並啟用WPCode 外掛程式。如果您不確定如何安裝插件，可以遵循基本指南，但通常很簡單，只需轉到 WordPress 儀表板的“插件”部分，搜尋 WPCode，然後點擊“安裝”，然後點擊“啟用” ”。

第 2 步：造訪 WPCode 片段庫

• 啟動外掛後，前往 WordPress 儀表板，然後導覽至程式碼片段 » 新增片段。

• 在搜尋列中，輸入「svg」以尋找允許 SVG 檔案上傳的程式碼片段。
• 將滑鼠懸停在「允許 SVG 檔案上傳」選項上，然後在看到它時按一下「使用片段」 。

第 3 步：啟動程式碼片段

• 選擇片段後，您將進入「編輯片段」頁面。 WPCode 已經為您配置了所有內容，因此您無需擔心更改任何內容。
• 您所需要做的就是將開關切換到“活動” ，然後按一下“更新”按鈕以儲存變更。

步驟 4：將 SVG 檔案上傳到您的 WordPress 網站

• 現在程式碼片段已激活，您可以像任何其他圖像格式（如 JPG 或 PNG）一樣上傳 SVG 文件，而不會從 WordPress 收到錯誤訊息。

• 您可以轉到媒體庫並上傳 SVG 文件，它將在您的網站上順利運行。

步驟 5（可選）：允許其他使用者上傳 SVG 文件

• 預設情況下，只有 WordPress 網站上的管理員（最高等級的使用者）才能上傳 SVG 檔案。如果您想允許其他使用者上傳 SVG，您可以編輯該程式碼片段。
• 如何操作：您需要刪除程式碼片段中的第 14-16 行。這些行將 SVG 上傳限制為僅限管理員。或者，您可以透過在第 11-13 行的開頭添加兩個斜線 (//) 來「註解」該限制，這將使 WordPress 忽略這些行。

• 完成此操作後，再次按一下“更新”以儲存變更。

方法 2：使用 SVG 支援外掛程式上傳 SVG 檔案或映像

第 1 步：安裝 SVG 支援插件

• 什麼是 SVG 支援？ SVG 支援是一個插件，可讓您在 WordPress 網站上上傳和顯示 SVG 檔案。它還可以讓您控制誰可以上傳 SVG，甚至可以讓您使用一些高級功能。
• 首先，您需要安裝並啟動 SVG 支援插件。如果您不確定如何執行此操作，請按照簡單的指南進行操作，但通常情況下，您會轉到 WordPress 儀表板的“插件”部分，搜尋“SVG 支援”，按一下“安裝” ，然後按一下"啟用設定" .

第 2 步：配置插件設置

• 啟動外掛後，前往 WordPress 儀表板並導航至「設定」»「SVG 支援」 。

• 在這裡，您將看到一些用於配置 SVG 檔案處理方式的選項。

步驟 3：限制管理員上傳 SVG

• 為了讓您的網站更安全，您可能需要限制 SVG 上傳，以便只有管理員（最高等級的使用者）才能上傳 SVG。為此，只需選中“僅限管理員？”旁邊的框即可。選項。
• 這將阻止其他使用者（例如編輯者或作者）上傳 SVG 檔案。

步驟 4（可選）：啟用進階模式以獲得額外功能

• 進階模式為您提供了額外的選項，例如允許CSS 動畫或內聯 SVG 渲染，這可以使您的 SVG 具有互動性或動畫效果。
• 如果您想使用這些進階功能，只需選取「進階模式」選項即可。
• 如果您不確定這些高級功能是什麼，請不要擔心 - 如果您不需要它們，可以跳過此步驟。

第 5 步：儲存您的設置

• 根據您的喜好配置設定後，點擊“儲存變更”按鈕以套用它們。

第 6 步：在貼文或頁面中上傳 SVG 文件

• 現在 SVG 支援外掛程式已設定完畢，您可以像任何其他圖片檔案一樣將 SVG 檔案上傳到您的貼文或頁面。
• 為此，請建立一篇新文章或編輯現有貼文。在貼文編輯器中，新增圖像區塊（就像 JPG 或 PNG 一樣），然後上傳 SVG 檔案。

方法 3：使用 Safe SVG 插件上傳 SVG 映像或文件

第 1 步：安裝 Safe SVG 插件

• 什麼是安全 SVG？ Safe SVG 是一個插件，允許您將 SVG 檔案上傳到 WordPress，同時自動清理它們。清理意味著清理 SVG 檔案以刪除任何潛在有害的程式碼，從而使您的網站更安全。
• 首先，您需要安裝並啟動 Safe SVG 插件。如果您不確定如何操作，請按照簡單的指南進行操作，但通常您會前往 WordPress 儀表板中的“插件”部分，搜尋“Safe SVG”，然後按一下“安裝”和“啟動” 。

第 2 步：開始上傳 SVG 文件

• 好消息：一旦激活，該插件就會自動運行！您無需配置任何設定。
• 您可以立即開始將 SVG 檔案上傳到 WordPress 媒體庫，就像上傳任何其他圖像格式（例如 PNG 或 JPG）一樣。

第 3 步：了解使用者權限

• 預設情況下，Safe SVG 的免費版本允許任何可以撰寫貼文的使用者（如作者或編輯）上傳 SVG 檔案。如果您想要更多地控制誰可以上傳 SVG，這可能是一個問題，因為這會增加有害上傳的風險。

步驟 4（可選）：升級到進階版本

• 如果您想控制誰可以上傳 SVG 檔案（例如，僅限管理員），您需要購買 Safe SVG 插件的高級版本。進階版本可讓您管理誰可以上傳 SVG，從而讓您更好地控制安全性。

結論

使用 SVG 檔案有其優點，並且可以成為提高 WordPress 網站上圖片的視覺品質和可擴展性的強大工具。

然而，由於潛在的安全風險，安全處理 SVG 上傳非常重要。幸運的是，透過正確的插件，您可以使用 SVG，而不會影響網站的安全性。

我們希望這篇部落格文章能夠幫助您了解如何將 SVG 圖像新增至您的 WordPress 網站。如果您有任何疑問或建議，請寫在下面的評論部分。

拉胡爾

Rahul Kumar 是一位網路愛好者和內容策略師，專門從事 WordPress 和網站託管。憑藉多年的經驗和對了解最新行業趨勢的承諾，他制定了有效的線上策略來增加流量、提高參與度並提高轉換率。拉胡爾對細節的關注以及製作引人入勝的內容的能力使他成為任何希望提高其線上形象的品牌的寶貴資產。