Safe SVG

外掛說明

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

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

目前功能

  • 處理 SVG 檔案:不會允許未經處理的 SVG 檔案上傳,以避免觸發 WordPress 網站的安全性漏洞。
  • 在媒體庫中檢視 SVG 檔案:不需要去回想哪個 SVG 檔案是哪天上傳的,這個外掛提供在 WordPress 媒體庫中預覽 SVG 檔案的功能。

功能開發藍圖

  • SVGO 最佳化:使用者可以選擇透過我們提供的 SVGO 伺服器上傳 SVG 檔案,以節省網站儲存空間。
  • 設定可上傳 SVG 檔案的使用者:設定指定使用者才能上傳 SVG 檔案,或開放全部使用者均可上傳。

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

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

適用於區塊編輯器

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

  • Safe SVG Display the SVG icon

安裝方式

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

常見問題集

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

可以,這可以透過 svg_allowed_attributessvg_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;
} );

使用者評論

2022 年 11 月 30 日 1 則留言
Great little plugin that does exactly what it says. And does it easily. (Still not sure why SVGs are not supported natively but that's another discussion) Thank you, job well done!
2022 年 2 月 23 日 3 則留言
Why Automattic hates SVG has always been a source of confusion to me. Why shouldn't uploading SVG be as easy and straightforward as any other kind of (supported) image? Then again, it's true that you can write malicious code inside a SVG rather easily. The solution? Safe SVG. It cleans up a malformed or malicious SVG during the upload, so that when it arrives in your Media Library, it will already have been sanitised. The plugin is as simple to operate as it is useful. All parts of WP that require opening the Media Library browser will now accept SVGs as well. As others have remarked, there are some outstanding issues when previewing SVGs inside Gutenberg. No surprises there — this plugin has predated Gutenberg, and (at the time of writing) has been abandoned for about two years, during which Automattic has been eagerly upgrading WordPress. The author has not gone away, though. He is still actively developing the sanitising part of the plugin, using a library he has developed and posted on GitHub, and which has accepted several contributions and gone through many code reviews. It's possibly the reference library for SVG sanitation written in PHP. And fortunately he's now back and has released a brand new version as of late February 2022 🙂
2022 年 2 月 14 日 1 則留言
Our agency has a talented illustrator who is adept at creating SVGs, particularly with self-contained CSS animations. We would be loading them all manually from the theme folder with no path to easily add new or replace existing SVGs without developer involvement if it weren't for this plugin. We install Safe SVG on pretty much all sites we custom build for our clients. I'm really hoping for some additional features to come to this plugin to better support the Gutenberg editor, since the core image block doesn't handle SVGs well. But that doesn't affect my 5-star review as the most reliable SVG upload plugin.
閱讀全部 67 則使用者評論

參與者及開發者

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

參與者

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

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

對開發相關資訊感興趣?

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

變更記錄

2.1.1 – 2023-04-05

2.1.0 – 2023-03-22

2.0.3 – 2022-09-01

2.0.2 – 2022-06-27

2.0.1 – 2022-04-19

2.0.0 – 2022-04-06

  • Added: New filter, safe_svg_use_width_height_attributes, that can be used to change the order of attributes we use to determine the SVG dimensions (props @dkotter, @peterwilsoncc).
  • Changed: Documentation updates (props @j-hoffmann, @jeffpaul, @Zodiac1978).
  • Fixed: Use the viewBox attributes first for image dimensions. Ensure we don’t use image dimensions that end with percent signs (props @dkotter, @peterwilsoncc).
  • Fixed: Make sure we use the full size SVG dimensions rather than the requested size, to avoid wrong sizes being used and duplicate height and width attributes (props @dkotter, @cadic).
  • Fixed: Ensure the tmp_name and name properties exist before we use them (props @dkotter, @aksld).

1.9.10 – 2022-02-23

Note that this release bumps the WordPress minimum version from 4.0 to 4.7 and the PHP minimum version from 5.6 to 7.0.

1.9.9 – 2020-05-07

  • Fixed: Issue where 100% width is accidentally converted to 100px width (props @joehoyle).

1.9.8 – 2020-05-07

  • Changed: Underlying library update.

1.9.7 – 2019-12-10

  • Changed: Underlying library update.

1.9.6 – 2019-11-07

  • Security: Underlying library update that fixes a security issue.

1.9.5 – 2019-11-04

  • Security: Underlying library update that fixes some security issues.

1.9.4 – 2019-08-21

  • Fixed: Bug causing lots of error log output to do with safe_svg::fix_direct_image_output().

1.9.3 – 2019-02-19

  • Fixed: Bug causing 0 height and width SVGs.

1.9.2 – 2019-02-14

  • Fixed: Warning about an Illegal string offset.
  • Fixed: Issue if something other than a WP_Post object is passed in via the wp_get_attachment_image_attributes filter.

1.9.1 – 2019-01-29

  • Fixed: Warning that was being generated by a change made in 1.9.0.

1.9.0 – 2019-01-03

  • Changed: If an image is the correct ratio, allow skipping of the crop popup when setting header/logo images with SVGs.

1.8.1 – 2018-11-22

  • Changed: Don’t let errors break upload if uploading an empty file
  • Fixed: Featured image display in Gutenberg. Props @dmhendricks 🙂

1.8.0 – 2018-11-04

  • Added: Pull SVG dimensions from the width/height or viewbox attributes of the SVG.
  • Added: role=”img” attribute to SVGs.

1.7.1 – 2018-10-01

  • Changed: Underlying lib and added new filters for filtering allowed tags and attributes.

1.7.0 – 2018-10-01

  • Added: Allow devs to filter tags and attrs within WordPress.

1.6.1 – 2018-03-17

  • Changed: Images will now use the size chosen when inserted into the page rather than default to 2000px everytime.

1.6.0 – 2017-12-20

  • Added: Fairly big new feature – The library now allows <use> elements as long as they don’t reference external files!
  • Fixed: You can now also embed safe image types within the SVG and not have them stripped (PNG, GIF, JPG).

1.5.3 – 2017-11-16

  • Fixed: 1.5.2 introduced an issue that can freeze the media library. This fixes that issue. Sorry!

1.5.2 – 2017-11-15

  • Changed: Tested with 4.9.0.
  • Fixed: Issue with SVGs when regenerating media.

1.5.1 – 2017-08-21

  • Fixed: PHP strict standards warning.

1.5.0 – 2017-06-20

  • Changed: Library update.
  • Changed: role, aria- and data- attributes are now whitelisted to improve accessibility.

1.4.5 – 2017-06-18

  • Changed: Library update.
  • Fixed: some issues with defining the size of an SVG.

1.4.4 – 2017-06-07

  • Fixed: SVGs now display as featured images in the admin area.

1.4.3 – 2017-03-06

  • Added: WordPress 4.7.3 Compatibility.
  • Changed: Expanded SVG previews in media library.

1.4.2 – 2017-02-26

  • Added: Check / fix for when mb_* functions are not available.

1.4.1 – 2017-02-23

  • Changed: Underlying library to allow attributes/tags in all case variations.

1.4.0 – 2017-02-21

  • Added: Ability to preview SVG on both grid and list view in the wp-admin media area
  • Changed: Underlying library version.

1.3.4 – 2017-02-20

  • Fixed: SVGZ uploads failing and not sanitising correctly.

1.3.3 – 2017-02-15

  • Changed: Allow SVGZ uploads.

1.3.2 – 2017-01-27

1.3.1 – 2016-12-01

  • Changed: Underlying library version.

1.3.0 – 2016-10-10

  • Changed: Minify SVGs after cleaning so they can be loaded correctly through file_get_contents.

1.2.0 – 2016-02-27

  • Added: Support for camel case attributes such as viewBox.

1.1.1 – 2016-07-06

  • Fixed: Issue with empty svg elements self-closing.

1.1.0 – 2015-07-04

  • Added: I18n.
  • Added: da, de ,en, es, fr, nl and ru translations.
  • Fixed: Issue with filename not being pulled over on failed uploads.

1.0.0 – 2015-07-03

  • Initial Release.