[WordPress] 外掛分享： OH MY Svg

前言介紹

  • 這款 WordPress 外掛「OH MY Svg」是 2022-07-25 上架。
  • 目前有 200 個安裝啟用數。
  • 上一次更新是 2023-02-06，距離現在已有 818 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 5.7 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.1.0 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

codekraft |

外掛標籤

SVG | icon | blocks | upload | Vector |

內容簡介

此外掛提供一個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.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「OH MY Svg」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

0.1.0 | 0.1.1 | 0.1.2 | 0.1.3 | trunk |

延伸相關外掛（你可能也想知道）

  • SVG Support 》這個 WordPress 外掛可以安全地上傳 SVG 檔案至媒體庫，並像其他圖片一樣使用。現在還有可選的清理功能！當你在網站上使用 SVG 圖片，很難使用 CSS 來設計 SV...。
  • Safe SVG 》Safe SVG 可以讓你安心地在 WordPress 中上傳 SVG 檔案！, 它能夠讓你允許上傳 SVG 檔案的同時，確保它們已經經過消毒以防止 SVG/XML 弱點影響你的網站。此外...。
  • Scalable Vector Graphics (SVG) 》SVG（可縮放向量圖形）是二維向量圖形，可以是靜態或動態的。此外掛可輕鬆讓您在網站上使用它們。, 主項目頁面位於此處：https://sterlinghamilton.com/proje...。
  • SVG Social Menu 》這個外掛增加了一個小工具，讓你可以顯示社交媒體連結作為向量圖示。, 啟用後，按照以下步驟使用：, , 建立一個含有你的社交媒體連結的選單, 選擇 “SVG Socia...。
  • Mapplic Lite 》Mapplic 是市場上獨一無二的地圖軟體，具有廣泛的用途和獨特豐富的功能。作為一個真正多用途且完全可定制的地圖 WordPress 外掛，Mapplic 可以輕鬆將圖像和 S...。
  • Icons Enricher 》化的外掛程式，只會連接必要的 CSS、JS 和字體等資源，不會影響網站流量，同時滿足訪客對網站速度要求。, 您可以使用帶有聯想搜索功能的UI來選擇圖示，不需要...。
  • Support SVG – Upload svg files in wordpress without hassle 》結論：, SVG Support 外掛可以在 WordPress 中支援 SVG (可縮放向量圖形)。這個輕量化的外掛允許您在 WordPress 媒體庫中上傳和使用 SVG 檔案，且不受任何限...。
  • SVG Editor 》總結：SVG Editor 是一個能直接在 WordPress 媒體庫中編輯 SVG（可縮放向量圖形）檔案的外掛程式，讓您可以輕鬆更改 SVG 圖形的顏色，而無需外部設計軟件。, ...。
  • SVG Shortcode 》這是一個外掛，可以讓使用者透過媒體瀏覽器上傳 SVG 檔案（可縮放向量圖形），並增加一個 SVG 短碼，讓你在 WordPress 網站上使用 SVG 檔案。, 如果瀏覽器不...。

文章
Filter
Apply Filters
Close
Mastodon