內容簡介
這個 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.
