WordPress.org

Taiwan 正體中文

取得 WordPress
WordPress.org

Plugin Directory

Safe SVG

Safe SVG

由 10up 開發
下載
即時預覽

外掛說明

使用 Safe SVG 外掛是在 WordPress 網站上開放 SVG 檔案上傳的最佳方式。

這個外掛能開放 WordPress 網站上傳 SVG 檔案的功能，並確保 SVG 檔案經過必要的處理，以避免觸發 SVG/XML 漏洞影響網站，同時也能讓使用者在媒體庫的各種檢視模式中預覽已上傳的 SVG 檔案。

目前功能

  • 處理 SVG 檔案：不會允許未經處理的 SVG 檔案上傳，以避免觸發 WordPress 網站的安全性漏洞。
  • SVGO 最佳化：在上傳 SVG 檔案時使用 SVGO 工具最佳化以節省網站儲存空間。這項功能預設為停用，但可以使用所列程式碼加以啟用：add_filter( 'safe_svg_optimizer_enabled', '__return_true' );
  • 在媒體庫中檢視 SVG 檔案：不需要去回想哪個 SVG 檔案是哪天上傳的，這個外掛提供在 WordPress 媒體庫中預覽 SVG 檔案的功能。
  • 設定可上傳 SVG 檔案的使用者：設定指定使用者才能上傳 SVG 檔案，或開放全部使用者均可上傳。

開發這個外掛的想法源自 #24251 這個功能需求。

SVG 檔案的處理使用 https://github.com/darylldoyle/svg-sanitizer 所提供的函式庫。

已透過所列函式庫完成 SVG 最佳化功能：https://github.com/svg/svgo。

Technical: Upload Path Security

WordPress’s _wp_handle_upload( $file, $action ) function allows any $action value, which determines the filter hook name: {$action}_prefilter. Safe SVG hooks common actions like wp_handle_upload and wp_handle_sideload, but cannot hook arbitrary custom actions defined by third-party code. Since upload actions are unbounded and MIME allowances are global, we cannot guarantee sanitization coverage across all possible upload paths.

適用於區塊編輯器

這個外掛提供 1 個可供區塊編輯器使用的區塊。

  • Safe SVG Display the SVG icon

安裝方式

透過 WordPress 外掛目錄安裝，或下載安裝檔案後解壓縮，上傳解壓縮所得的資料夾及其全部檔案至 /wp-content/plugins/ 目錄。

常見問題集

是否能變更開放使用的屬性及標籤？

可以，這可以透過 svg_allowed_attributes 及 svg_allowed_tags 篩選器完成。
這 2 個篩選器分別使用一個必須回傳值的引數。以下是範例程式碼：

add_filter( 'svg_allowed_attributes', function ( $attributes ) {

    // Do what you want here...

    // This should return an array so add your attributes to
    // to the $attributes array before returning it. E.G.

    $attributes[] = 'target'; // This would allow the target="" attribute.

    return $attributes;
} );


add_filter( 'svg_allowed_tags', function ( $tags ) {

    // Do what you want here...

    // This should return an array so add your tags to
    // to the $tags array before returning it. E.G.

    $tags[] = 'use'; // This would allow the <use> element.

    return $tags;
} );

Can my theme style an inline SVG?

Mostly, yes. The Inline SVG block renders an SVG that carries its own <style> element inside a shadow root, because CSS inside an inline SVG is otherwise applied to the whole page rather than just the SVG. Stylesheets cannot reach into a shadow root, so theme CSS such as .entry-content svg { fill: red; } will not apply to those SVGs.

Inherited properties still cross the boundary, so setting color on an ancestor and using currentColor inside the SVG works, as do CSS custom properties. SVGs that do not contain a <style> element are rendered without the shadow root and can be styled by theme stylesheets.

To turn isolation off, at the cost of allowing an SVG’s CSS to affect the rest of the page:

add_filter( 'safe_svg_inline_use_shadow_dom', '__return_false' );

Why doesn’t Safe SVG globally enable SVG uploads?

Safe SVG only allows SVGs through upload paths it can actively sanitize. While most WordPress uploads use standard functions like wp_handle_upload() (which Safe SVG hooks), plugins and themes can create custom upload paths by calling WordPress’s underlying _wp_handle_upload() function with arbitrary action parameters.

Globally enabling the image/svg+xml MIME type would allow SVGs through all upload paths—including custom ones Safe SVG cannot intercept and sanitize. This would create security vulnerabilities where unsanitized SVGs containing malicious scripts could be uploaded.

This is a deliberate design decision: Safe SVG prioritizes guaranteed sanitization over broad compatibility. SVGs are only allowed when we can ensure they’re safe.

Where do I report security bugs found in this plugin?

Please report security bugs found in the source code of the Safe SVG plugin through the Patchstack Vulnerability Disclosure  Program. The Patchstack team will assist you with verification, CVE assignment, and notify the developers of this plugin.

使用者評論

Great plugin, updated!

2026 年 8 月 6 日 1 則留言
Must use plugin, well maintained, installing almost every time and just now I've realized, that I didn't review it. Keep it up and thanks!

Works Well

2026 年 3 月 11 日 1 則留言
Needed SVG upload support, and this plugin did the job. Very lightweight and easy to use. No issues so far. Some additional settings would be nice, but overall, it's quite solid.

Good plugin, but missing …

2025 年 6 月 21 日 1 則留言
Would have given a 5 star, but it seems support is missing for the taxonomy / terms section (like in categories) upload for SVG images. Keep getting an error that the upload isn't supported. Hopefully this will be fixed in a future update. Will update once this is added. Cheers!

Wonderful + fetaure request

2025 年 4 月 30 日 1 則留言
Great plugin! very usefull, but please can you add the possibility to add an inline SVG on the block pasting svg code? Thanks!
閱讀全部 79 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Safe SVG〉的開發相關工作。

參與者

〈Safe SVG〉外掛目前已有 30 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Safe SVG〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

2.5.0 – 2026-09-07

2.4.0 – 2025-09-22

2.3.3 – 2025-08-13

2.3.2 – 2025-07-21

2.3.1 – 2024-12-05

2.3.0 – 2024-11-25

2.2.6 – 2024-08-28

View historical changelog details here.

社群版外掛

這個外掛由社群人員開發及提供技術支援。 參與這個外掛專案

中繼資料

評分

4.9 星，滿分為 5 星

撰寫評分

查看全部使用者評論

技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

檢視技術支援論壇