內容簡介
此外掛提供一個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許可證進行授權。
外掛標籤
開發者團隊
原文外掛簡介
This plugin provides a Svg Block to your block editor, this can be used with any svg icon or image (or even a html snippet). Some key features are provided like automatic markup sanitation, optimization (svgo), and small utility to change the color and the markup that will be very useful for you to create variations of your image.
This block has the same controls as the images, but actually the content is xml markup, and you can change it as you like! This allows thousands of possibilities… You will be able to use css animations or js scripts to animate it, change the inner text of the svg, create variations of the same svg.
However, this has the disadvantage that the svg will not be copied into the media library, so if you plan to use the same svg several times (buttons, icons, etc.) you are better off creating a reusable block
From a performance point of view, be aware that the image will not be included as an external resource, but will instead be within the markup of the page, thus making svg even faster than it already is.
Svg are awesome because:
✌️ Are always super sharp!
🪶 Incredibly lightweight and doesn’t require any additional resize image (you only need one source for all screen sizes and resolutions)
⚡ Increased page performance! Using inline SVGs saves can save dozens of requests and save server download bandwith.
🎉 highly customisable and animatable! Embedded svgs are easy to be animated, just use css!
Security
Since this plugin doesn’t enable uploads of svg images into media library could be considered safer than all the others that enable the upload.
As if that wasn’t enough Svg’s will be cleaned with DOM purify which indeed is a first class js purifier, those used in php try to mimic how it works.
Svg will be included within the pages as xml fragments, so they will not be processed by imagemagick and cannot be uploaded by anyone from website “side”. Only those with permissions to use the editor will be allowed to ‘upload’ (or rather 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.
