內容簡介
此外掛提供一個SVG區塊到你的區塊編輯器，你可以使用任何SVG圖示或圖像（甚至是HTML片段）。一些主要的功能包括自動標記清理、優化（使用SVGO），以及一個小工具，可更改顏色和標記，非常適用於創建圖像變化。
該區塊具有與圖像相同的控制，但其內容實際上是XML標記，你可以隨意更改！這可以產生無限的可能性......你可以使用CSS動畫或JavaScript腳本對其進行動畫，更改SVG內部文字，創建相同SVG的變化。
但是，這樣會有一個缺點，即SVG不會被複製到媒體庫中，因此如果你打算多次使用相同的SVG（按鈕、圖示等），則最好創建可重覆使用的區塊。
就性能而言，請注意，圖像將不作為外部資源包含，而是在頁面的標記中，因此使SVG比它本身更快。
SVG的優點：
✌️總是超清晰！
🪶重量級輕盈，不需要任何額外的調整圖像（你只需要一個來源來滿足所有屏幕尺寸和解析度要求）
⚡提高頁面表現！使用內嵌SVG可以節省數十個請求，減少伺服器下載帶寬。
🎉高度可定制和可動畫！簡單使用CSS即可輕鬆製作動畫。
安全
由於此外掛沒有啟用上傳SVG圖像到媒體庫，因此可能比啟用上傳的所有其他外掛更安全。
除此之外，SVG將使用DOM淨化，這實際上是第一類JS淨化，那些在PHP中使用的嘗試模仿它的工作方式。
SVG將在頁面內作為XML片段包含，因此不會被ImageMagick處理，也無法由網站“端”上傳。只有擁有編輯權限的人員才可以“上傳”（或者更準確地說是包含）它們。
靈感、連結
Mario Heiderich的the-image-that-called-me
Fortinet - Web上可擴展矢量圖形（SVG）攻擊面解剖
資源
dompurify © 2015 Mario Heiderich，Apache License Version 2.0
svgo © 2021 Kir Belevich，MIT License
貢獻
我們非常歡迎您的意見！我們希望使對此項目的貢獻變得盡可能輕鬆和透明，無論是：
報告錯誤
討論當前狀態、特點、改進
提交修復💯或新功能🎉
我們使用GitHub來存放程式碼，跟踪問題和功能要求，以及接受拉取請求。通過貢獻，您同意您的貢獻將根據其GPLv3許可證進行授權。
外掛標籤
開發者團隊
原文外掛簡介
Enhance your WordPress website with the power of SVG images using the OH MY SVG plugin. Easily add, manipulate, and optimize SVG images directly within the Gutenberg block editor.
Unlike traditional image blocks, this plugin provides an intuitive interface that allows you to incorporate SVG icons, illustrations, or HTML snippets effortlessly. Experience the convenience of automatic markup sanitation, SVGO optimization, and a range of built-in utilities like color customization, stroke adjustments, and element stripping.
🌟 Smart Dual Storage Modes (New!)
One of the biggest issues with using SVGs in WordPress is database bloat. If you paste a heavy SVG directly into the editor, its entire XML markup gets saved into every single post revision, quickly cluttering your database. OH MY SVG solves this by offering two distinct storage modes:
Inline Mode (Best for tiny icons): The SVG markup is embedded directly within the page’s HTML. This drastically reduces page load time by eliminating server requests and conserving bandwidth. Ideal for small, lightweight vectors.
Media Library Mode (Best for heavy illustrations): To prevent database bloat, this mode saves the SVG behind the scenes as a custom post meta attached to the WordPress Media Library. The plugin automatically generates a lightweight PNG proxy image so you can see it in your media grid. On the front end, it renders cleanly using a data URI, keeping your post content light, your database clean, and your page performance high.
Unleash your creativity with endless possibilities—animate SVGs using CSS or JavaScript, modify inner colors, and scale infinitely without losing sharpness.
Svg are awesome because:
✌️ Pixel Perfect: SVGs render sharply on any screen and resolution.
🗄️ Zero Database Bloat: Choose to link heavy SVGs to the Media Library, keeping your post content and revisions lightweight.
🎨 In-Editor Editing: Customize colors, add strokes, and remove fills to create variations directly in Gutenberg.
⚡ Performance Boost: Use inline SVGs to save dozens of HTTP requests and reduce server download bandwidth.
🛠️ Built-in Optimizer: Automatically compress and optimize markup using the integrated SVGO tool.
🎉 Developer Friendly: Easy to animate with CSS and JavaScript since they render as DOM elements or standard image tags.
🔒 Security First
The OH MY SVG plugin prioritizes your website’s security. By default, WordPress blocks raw SVG file uploads due to severe XML/XSS vulnerabilities. This plugin keeps that protection intact. Instead of allowing dangerous direct .svg uploads, our plugin safely processes the SVG markup within the editor using a robust JavaScript purifier (DOMPurify). When saving to the Media Library, it creates a harmless PNG proxy file and securely stores the sanitized SVG string as an attachment metadata field. SVGs cannot be maliciously uploaded from the website “side” (e.g., frontend forms); only trusted users with editor permissions can include them.
Inspirations, links
Mario Heiderich – the-image-that-called-me
Fortinet – Anatomy of Scalable Vector Graphics (Svg) Attack Surface on the Web
Resources
dompurify © 2015 Mario Heiderich, Apache License Version 2.0
svgo © 2021 Kir Belevich, MIT License
Contribute
We love your input! We want to make contributing to this project as easy and transparent as possible, whether it’s:
Reporting a bug
Discussing the current state, features, improvements
Submitting a fix 💯 or a new feature 🎉
We use GitHub to host code, to track issues and feature requests, as well as accept pull requests.
By contributing, you agree that your contributions will be licensed under its GPLv3 License.
