前言介紹
- 這款 WordPress 外掛「SVG Support」是 2014-07-21 上架。
- 目前有 1000000 個安裝啟用數。
- 上一次更新是 2025-02-25，距離現在已有 67 天。
- 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 347 人給過評分。
- 論壇上目前有 11 個提問，問題解答率 18%
外掛協作開發者
benbodhi |
外掛標籤
SVG | Vector | safe svg | mime type | sanitization |
內容簡介
這個 WordPress 外掛可以安全地上傳 SVG 檔案至媒體庫，並像其他圖片一樣使用。現在還有可選的清理功能！當你在網站上使用 SVG 圖片，很難使用 CSS 來設計 SVG 內的元素。現在這個外掛可以輕鬆做到！可縮放向量圖形(SVG)在現代網頁設計中越來越常見，可以嵌入小的檔案大小圖像，而不會失去品質。
這個外掛不僅提供了 SVG 支援，還提供了一個簡單的 IMG 標籤嵌入完整 SVG 檔案的程式碼，只需將 class "style-svg" 添加到 IMG 元素(或外部容器)，此外掛就會動態地將 IMG 元素中包含在目標 class 中找到的 SVG 圖片的 src 屬性中的原始碼替換成 SVG 圖像，使其成為內置。其主要目的在於使你能夠設計和動畫你的 SVG 元素。通常，當單獨使用 embed、object 或 img 標籤時，你的樣式選項會受到限制。
此外掛的功能包括：
支援媒體庫裡的 SVG 圖片
淨化 SVG 上傳檔案
壓縮 SVG 檔案
內嵌 SVG 代碼
直接使用 CSS 設計 SVG 元素
使用 CSS 和 JS 建立 SVG 元素的動畫效果
簡單的設定頁面和說明
只允許管理員上傳 SVG 檔案
設置自定義目標類別
極簡使用-簡化 SVG 檔案的複雜使用
使用此外掛：
首先安裝並啟用 SVG Support 這個外掛。啟用後，你可以像上傳其他檔案一樣，簡單地將 SVG 圖片上傳至你的媒體庫中。作為管理員，你可前往"設置>SVG Support"的管理設定頁面，並只允許管理員上傳 SVG 檔案。若你只需要上傳 SVG 檔案來用作圖像，則不需要啟用「進階模式」。啟用進階模式後，你可以淨化和/或壓縮上傳的 SVG 檔案，定義一個自定義 CSS 類別以進行樣式設計，以及調整其他設定。啟用進階模式後，你可以像使用標準圖像一樣嵌入 SVG 圖像，只需在 IMG 標籤中添加 class "style-svg"（或自定義類別），然後此外掛會將 IMG 元素動態替換成你的 SVG 原始碼，使其內容可被選取。你還可以從 IMG 標籤中刪除所有其他屬性，因為它們將不會顯示。此外，如果你無法直接添加到 IMG 標籤中，你現在還可以將目標 class 添加到外部元素中。然後這個外掛會遍歷子元素，尋找要替換為內置代碼的 SVG。此外，這個外掛還提供了在加入 SVG 圖片時自動添加你的 class 的選項，並移除不必要的標籤。
原文外掛簡介
The complete SVG solution for WordPress – secure, flexible, and easy to use.
SVG Support enables secure SVG uploads with powerful features for both basic users and developers:
✨ Key Features:
– Secure SVG uploads with automatic sanitization
– Inline rendering for direct CSS/JS manipulation
– File size optimization through minification
– Role-based access control
– Advanced developer options
– Multisite compatible
– Full Block Editor (Gutenberg) compatibility
🔒 Security First:
– Built-in sanitization removes potentially harmful code
– Role-based upload restrictions
– Comprehensive MIME type validation
🎨 Designer Friendly:
– Direct styling of SVG elements
– Animation support
– Custom class targeting
– Automatic dimension handling
💻 Developer Ready:
– Advanced mode for additional features
– REST API support
– Gutenberg compatible
– Extensive hooks and filters
Usage
Basic Usage:
– First, install and activate SVG Support via your WordPress dashboard
– Upload SVG files to your media library like any other image
– Works seamlessly with Image blocks, Cover blocks and featured images
Advanced Usage:
– Enable “Advanced Mode” for minification and inline rendering
– Customize with hooks and filters for tailored functionality
Block Editor Usage:
– Use Advanced Mode to enable inline rendering:
– Add the "style-svg" class to Image blocks
– Add the "style-svg" class to Cover blocks to render SVG backgrounds inline
– Use “Skip Nested SVGs” setting to control inline rendering of SVGs within Cover blocks
Classic Editor Usage:
– Use Advanced Mode to add the "style-svg" class to tags for inline rendering
– Enable “Auto Insert Class” option for automatic class insertion in Classic Editor
Common Issues & Solutions:
– SVG not displaying? Ensure dimensions are set in CSS.
– Need help? Use the support tab and I will do my best to assist you.
Spin up a test site
With a single click, you can spin up a completely free test site to test SVG Support using TasteWP! No sign up, no cards, nothing! How cool is that? Give it a go:
Click Here to spin up a test site in seconds
Security
SVG Support prioritizes security with automatic sanitization and role-based restrictions. Only trusted users should have upload permissions. Configure settings to balance functionality and security.
Feedback
I’m open to your suggestions and feedback – Thanks for using SVG Support!
Follow @SVGSupport on Twitter
Follow @benbodhi on Twitter
Follow @benbodhi on Warpcast
Note: I hope you like this plugin! Please take a moment to rate it.
Development & Contributing
The development version of SVG Support is maintained on GitHub. Feel free to contribute:
Submit bug reports or feature suggestions: GitHub Issues
Contribute code via Pull Requests
Development repository: GitHub
Translations
Contribute translations here. New to translating? Check the Translator Handbook.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「SVG Support」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 2.0 | 2.1 | 2.2 | 2.3 | 2.4 | 2.5 | 2.1.1 | 2.1.2 | 2.1.3 | 2.1.4 | 2.1.5 | 2.1.6 | 2.1.7 | 2.2.1 | 2.2.2 | 2.2.3 | 2.2.4 | 2.2.5 | 2.3.1 | 2.3.2 | 2.3.3 | 2.3.4 | 2.3.5 | 2.3.6 | 2.3.7 | 2.3.8 | 2.3.9 | 2.4.1 | 2.4.2 | 2.5.1 | 2.5.2 | 2.5.3 | 2.5.4 | 2.5.5 | 2.5.6 | 2.5.7 | 2.5.8 | 2.5.9 | trunk | 2.3.10 | 2.3.11 | 2.3.12 | 2.3.13 | 2.3.14 | 2.3.15 | 2.3.16 | 2.3.17 | 2.3.18 | 2.3.19 | 2.3.20 | 2.3.21 | 2.5.10 | 2.5.11 | 2.5.12 | 2.5.13 | 2.5.14 | 2.2.3.1 | 2.2.3.2 |
延伸相關外掛（你可能也想知道）
WP SVG Images 》安全上傳 SVG 檔案到您的媒體庫。上傳的 SVG 檔案將自動過濾。, SVG 代表可縮放向量圖形，是最有效率的顯示圖片的方式。, WP SVG Images 外掛是一個易於使用...。
Secure SVG Support 》, , , Secure SVG 外掛介紹
, ,Secure SVG 外掛讓您可以安全地將 SVG 檔案上傳至 WordPress 媒體庫...。
SVGPlus 》**總結：**, , SVGPlus 是一款全面的 WordPress 外掛程式，旨在強化您的網站以安全和高效地處理 SVG（可縮放的向量圖形）文件。無論您是設計師、開發人員還是...。
SEO File Renamer 》這是一個非常簡單的外掛程式，用於上傳檔案名稱的合法化處理。, 基本上，它是為了讓搜索引擎更容易讀取您上傳的文件名稱，因此更有利於 SEO，在文件夾中更易...。
Sanitize DB 》這個外掛會透過移除未使用的元數據項目和其他未連結的記錄，清理資料庫。它會逐一刪除未使用的資料，掃描資料庫後在外掛儀表板上顯示統計資訊。當你的網站非...。