SVG Support

説明

The complete SVG solution for WordPress – secure, flexible, and easy to use.

SVG Support enables secure SVG uploads with powerful features for both basic users and developers:

Key Features:
– Secure SVG uploads with automatic sanitization
– Inline rendering for direct CSS/JS manipulation
– File size optimization through minification
– Role-based access control
– Advanced developer options
– Multisite compatible
– Full Block Editor (Gutenberg) compatibility

🔒 Security First:
– Built-in sanitization removes potentially harmful code
– Role-based upload restrictions
– Comprehensive MIME type validation

🎨 Designer Friendly:
– Direct styling of SVG elements
– Animation support
– Custom class targeting
– Automatic dimension handling

💻 Developer Ready:
– Advanced mode for additional features
– REST API support
– Gutenberg compatible
– Extensive hooks and filters

使い方

Basic Usage:
– First, install and activate SVG Support via your WordPress dashboard
– Upload SVG files to your media library like any other image
– Works seamlessly with Image blocks, Cover blocks and featured images

Advanced Usage:
– Enable “Advanced Mode” for minification and inline rendering
– Customize with hooks and filters for tailored functionality

Block Editor Usage:
– Use Advanced Mode to enable inline rendering:
– Add the "style-svg" class to Image blocks
– Add the "style-svg" class to Cover blocks to render SVG backgrounds inline
– Use “Skip Nested SVGs” setting to control inline rendering of SVGs within Cover blocks

Classic Editor Usage:
– Use Advanced Mode to add the "style-svg" class to <img> tags for inline rendering
– Enable “Auto Insert Class” option for automatic class insertion in Classic Editor

Common Issues & Solutions:
– SVG not displaying? Ensure dimensions are set in CSS.
– Need help? Use the support tab and I will do my best to assist you.

お試し版のサイトで体験してみませんか ?

TasteWP を使って、SVG Support 有効化ずみのサイトを試すことができます ! 完全に無料で、サインアップも、クレジットカードもいりません。一度試してみてください。
このリンクをクリックすると、10秒ほどでお試し版のサイトが立ち上がります。

セキュリティ

SVG Support prioritizes security with automatic sanitization and role-based restrictions. Only trusted users should have upload permissions. Configure settings to balance functionality and security.

フィードバック

SVG Support をお使いいただきありがとうございます ! 新機能の提案やフィードバックを受け付けています。

Follow @SVGSupport on Twitter
Follow @benbodhi on Twitter
Follow @benbodhi on Warpcast

ご案内: このプラグインを気に入っていただけることを願っています ! 気に入っていただけましたら、ぜひ、WordPress.org のレビューページで評価をお願いします。

Development & Contributing

The development version of SVG Support is maintained on GitHub. Feel free to contribute:

プラグインの翻訳

Contribute translations here. New to translating? Check the Translator Handbook.

スクリーンショット

  • 基本設定
  • 高度な設定
  • アイキャッチ画像メタボックスにあるチェックボックス (チェックを入れると SVG がインラインでレンダリングされます)
  • SVG used in WP native Image Widget
  • SVG がインラインでレンダリングされた時のフロントエンドのコード
  • ヘルプ – 概要
  • ヘルプ – プラグイン設定
  • ヘルプ – 標準的な使い方
  • ヘルプ – SVG のインラインレンダリング (高度な設定)

FAQ

バージョン2.3に更新したところ、SVG のインラインレンダリングができなくなりました。

Ensure “Advanced Mode” is enabled in Settings > SVG Support.

インライン SVG を使用しない場合、フロントエンドの JavaScript を無効にするにはどうすればよいですか ?

Disable “Advanced Mode” in the settings.

カスタマイザーで SVG を使おうとしているのですが、うまくいきません。

カスタマイザーで SVG をうまく表示させるには、子テーマの関数ファイルにコードを追記する必要があります。すばらしいチュートリアルがあるので参考にしてみてください。チュートリアルの中で重要なのは下に示した箇所です。

'flex-width'    => true
'flex-height'   => true

SVG にアニメーションを追加するにはどうしたらいいですか ?

SVG ファイルをコードエディターで編集し、SVG 内の対象となる各要素に CSS クラスを追加する必要があります。IMG タグがインライン SVG に置き換えられていることを確認した後、CSS または JS を使って SVG ファイル内の要素にアニメーションを適用できます。

マルチサイト環境で SVG Support がうまく動作しないのはなぜですか ?

WordPress 3.5より前にマルチサイト化を行っている場合、ms-files を削除する必要があります。いくつかの情報源を紹介します。Dumping ms-files Removing ms-files after 3.5

ビジュアルエディターで SVG がうまく表示されないのはなぜですか ?

ビジュアルエディターや、その他のページビルダーで SVG Support を使うときは、画像に独自の CSS クラスを追加できるようにする必要があります。もっとも簡単な方法は、ビルダーが用意するシンプルなテキストブロックやコードブロックを使って画像の埋め込みコードを配置することです。SVG Support には、すべての SVG ファイルをインラインで強制的にレンダリングする設定もあるので、それを使うのも一つの方法でしょう。

Media Library Assistant プラグインと一緒に動作させるにはどうしたらいいですか ?

svg と svgz の mime type を追加する必要があります。「MLA Settings」 > 「Media Library Assistant」 > 「Uploads (タブ)」 で動作するようになります。

評価

2025年4月10日
I’ve been using this plugin on a client’s site for a while without thinking much of it, but after investigating a complaint of a sluggish UI, it turns out this plugin is responsible for a 500 MB memory increase when only two SVG files are displayed on the page.Enabling SVG support for the WordPress media library can be done with a dozen lines of PHP, so just switching form this plugin to a few lines in functions.php has returned RAM consumption back to normal again.I previously wrote that this plugin appears to convert SVG to HTML and CSS, but that’s not actually the case—that turned out to be the Safari LiveText implementation. The plugin does nevertheless trigger a memory leak. I haven’t investigated it further, but the developer is welcome to comment on it. I’ll update my review if necessary.

svg

2025年4月10日
отлично молодцы
2025年2月23日 2 replies
 recall this plugin used to work correctly before. Why has it stopped uploading? Interestingly, if I upload a file from another plugin first, it seems the original plugin then properly converts it to inline SVG afterward.
347件のレビューをすべて表示

貢献者と開発者

SVG Support はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“SVG Support” は18ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“SVG Support” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

2.5.14

  • セキュリティ強化:

    • Remove default roles from the sanitizer bypass settings
  • Fixes:

    • More comprehensive upload checks, allowing generator tags and comment patterns
  • Performance Improvements:

    • Cleanup duplicate inline_featured_image meta entries more efficiently
    • Remove inline_featured_image meta entries that aren’t explicitly set to 1 (enabled)
    • Don’t store inline_featured_image meta for posts that previously had it enabled but don’t anymore
  • General Updates:

    • Restructured settings layout
    • Better cleanup on uninstall when delete plugin data is selected

2.5.13

  • Code Improvements:
    • Better PHP 8.3 compatibility – added null checks to prevent deprecated warnings in PHP 8.3

2.5.12

  • General Updates:

    • Added blueprint.json for the live preview feature on wordpress.org
  • Fixes:

    • Fixed mime type check that was restricting SVG uploads without the XML tag in PHP 7.4

2.5.11

  • Security Enhancement
    • Added more effective handling of sanitization for REST API uploads

2.5.10

  • Fixes:
    • Fixed issue with upload checks preventing plugin uploads

2.5.9

  • New Features:

    • Added new Advanced Mode setting “Skip Nested SVGs” to control inlining of SVGs within containers (for example: nested SVGs in Gutenberg Cover blocks)
    • Added proper multisite support for SVG uploads across subsites
    • Added network administrator support for SVG uploads on all subsites
  • セキュリティ強化:

    • Updated DOMPurify library to version 2.5.8
    • Updated enshrined/svg-sanitize to version 0.21.0
    • Added nonce verification for non-REST uploads to prevent CSRF attacks
    • Improved MIME type validation for SVG files
    • Enhanced file content validation to ensure only valid SVG files are processed
    • Moved security checks earlier in the upload process for better efficiency
    • Updated and improved sanitization options for both frontend and admin
  • Code Improvements:

    • Changed synchronous XMLHttpRequest to asynchronous in vanilla JS version to improve performance and remove Chrome deprecation warnings
    • Removed console logging statements from JavaScript files for cleaner browser console
    • Reorganized upload validation flow for better performance
    • Added proper error messages for failed security checks
    • Improved handling of REST API uploads
    • Enhanced code documentation and inline comments
    • Added proper plugin asset handling and alt text for admin images
    • Enhanced multisite compatibility with proper role and capability checks
    • Added network-level upload permission validation
    • Added AJAX hooks for featured image inline toggle
    • Enqueue minified Gutenberg filters script instead of expanded version
    • Added better version update handling
  • Fixes:

    • PHP Warning about undefined array key “css_target” in admin init.php
    • Fixed “not allowed to upload this file type” error on multisite installations
    • Fixed duplicate meta entries for inline featured images preventing post saves
    • Added automatic cleanup of duplicate meta entries during plugin update
    • Improved handling of featured image meta to prevent duplicate entries
    • Updated and refactored Gutenberg featured image checkbox to use modern React hooks instead of deprecated withState
    • Fixed missing file path in SVG attachment metadata causing issues with WPML Media Translation
    • Fixed jQuery dependency only being required when not using vanilla JS option
  • General Updates:

    • Updated security documentation
    • Refined error messaging for better user experience

2.5.8

  • セキュリティ強化:

    • セキュリティ強化のため、SVG アップロードと添付ファイルのサニタイズが改善されました。
    • 管理設定ページのすべての出力が適切にエスケープされていることを確認しました。
    • セキュリティと互換性を向上させるために、直接ファイル処理機能を WordPress API に置き換えました。
    • 翻訳者のコメントと順序付けられたプレースホルダーが追加され、翻訳サポートが改善されました。
  • 管理インターフェースの改善:

    • ファイル admin-init.php を更新し、エスケープ方法を改善し、設定ページのセキュリティを強化しました。
    • Added error logging to SVG processing to assist with debugging without disrupting the user experience.
  • パフォーマンスと互換性:

    • スクリプトとスタイルが適切な依存関係で効率的に読み込まれるように、エンキュー関数を更新しました。
    • メディアライブラリと ACF 統合での問題を防ぐために、SVG のメタデータ処理が改善されました。
    • Optimized nonce verification and meta updates in the featured image functions to prevent unnecessary database writes.
  • 一般的なコードの改善:

    • 冗長性を減らし、保守性を向上させるためにコードをリファクタリングしました。
    • コードの明確化と将来の開発のために、詳細なインライン ドキュメントを追加しました。
  • WP All Import との実験的統合:

    • インポート時の実験的な SVG 処理のために、WP All Import との統合を導入しました。
    • WP All Import 経由でインポートされた SVG ファイルはサニタイズされ、メタデータが正しく生成および更新されます。
    • SVG インポート処理中の問題を追跡するためのエラー ログを追加しました。
    • 注意: この機能は実験的なもので、現時点ではメインのプラグイン ファイルではコメント アウトされています。テストするには、include 行のコメントを解除してください。ただし、最初にデータをバックアップしてください。

2.5.7

  • 新しいバージョンの PHP との互換性。

2.5.6

  • いくつかのセキュリティ上の懸念に対処。

2.5.5

  • より多くのエラー修正と全般的なクリーンアップを行った。

2.5.4

  • エラーを修正した。

2.5.3

  • 致命的な PHP エラーを修正した。

2.5.2

  • セキュリティ向上のため、デフォルト値をいくつか追加した。

2.5.1

  • uninstall.php に欠落していた引用符を追加した。

2.5

  • スペルミスや書式の誤りなどを修正した。
  • セキュリティ上の懸念事項に対応した。
  • サニタイズ (無害化) オプションを追加した – フロントエンドと管理画面の両方に対応。
  • SVG の最小化に対応した。
  • jQuery と Vanilla JS を選択できる機能を追加した。
  • アンインストール時のデータベースクリーンアップ処理を追加した。
  • フォールバックを修正した。

2.4.2

  • 一部の有償テーマで発生する srcset の警告を修正した。
  • タグの置換時にオリジナルの IMG ID が保存されないのを修正した。
  • アイキャッチ画像のボックスから不要な文字列を削除した。

2.4.1

  • WP-CLI が壊れる原因を修正した。

2.4

  • 新機能: SVG の無害化オプションを追加した。
  • 新機能: SVGの最小化オプションを追加した。
  • アイキャッチ画像の設定欄にインライン SVG のチェックボックスを追加した。
  • Gutenberg への対応を全般的に改善した。
  • IMG にクラスを直接設定できないとき、ネストした SVG (任意の深さのレベル) のインラインレンダリングができるよう、クラスのターゲティングに関するロジックを修正した。
  • jQuery の代わりに Vanilla JS を使用するように修正した。
  • 設定ページのアクセシビリティに関する問題を修正した。
  • 次元メタデータの問題を修正した。
  • SVG に width や height が設定されていないとき、0による除算ができない問題を修正した。
  • 旧エディターとブロックエディターの両方で、アイキャッチ画像の間隔が狭くなる問題を修正した。
  • 動作に必要な PHP バージョンを引き上げた。
  • 廃止された管理者通知を削除した。
  • SVG ファイル用の srcset を削除した。
  • ファイルパスのメタデータからディレクトリ名を削除した。

2.3.21

  • アイキャッチ画像の SVG がコンテナーに重なるのを修正した。

2.3.20

  • 設定画面を出力する際に、エスケープを回避するよう修正した。

2.3.19

  • functions/enqueue.php の localize_script による PHP 警告を修正した。
  • js/svgs-inline.js で SRC 属性のチェックを追加した。

2.3.18

  • メインプラグインファイルの作者 URL を更新した。
  • 寄付に関するリンクを更新した。
  • メタリンクと設定ページに関するプラグインアクションを整理した。
  • functions/attachment.php が他の添付ファイルのメタ情報を削除していたのをロールバックした。

2.3.17

  • フロントエンドへの CSS 読み込みを選択する設定を追加した。

2.3.16

  • XML 宣言を持つファイルを修正した。
  • 画像ウィジェットの PHP 警告を修正した。
  • SVG メディアの添付ファイルを表示する際のフロントエンド CSS を微修正した。

2.3.15

  • PHP 警告に対する修正がテーマの互換性に影響を及ぼしたため、ロールバックを行った。

2.3.14

  • 修正: データベースから古いオプションを削除する際、致命的エラーを起こすケースがあったのを修正した。

2.3.13

  • 修正: wp_debug が on のとき、SVG ファイル使用時に画像ウィジェットから PHP の警告と通知が表示される不具合を解消した。
  • 修正: フロントエンドの CSS を改良し、SVG ファイルを画像とインラインの両方で表示できるようにした。
  • 削除: 管理者通知に関する非推奨のデータを DB から削除した。

2.3.12

  • 追加: SVG Support の設定ページにネイティブの「ヘルプ」タブを追加した。
  • 追加: インライン JS を関数でラップし bodhisvgsInlineSupport(); で任意に呼び出せるようにした。
  • 修正: ターゲットとなる SVG の src のみを CSS で操作するようにした。
  • 修正: SVG Support の設定ページを微修正した。
  • 削除: 更新に関する管理者への通知を削除。

2.3.11

  • 追加: 最小化された JS ファイルでなく、完全に展開した JS ファイルを使用する機能 (外部のキャッシュプラグインを使用して JS の最小化を行う場合に便利)。
  • 追加: 「インライン SVG を強制」オプションを追加した。この機能は、適用されているクラスに関係なく、すべての SVG ファイルを強制的にインラインレンダリングすることを可能とする。例えば特定のページビルダーなど、何らかの理由で画像に独自クラスを追加できないときの対応策として有効であろう。この機能は、すでに埋め込まれているメディアのクラスをすべて変える必要があるときにも対応する。
  • readme ファイルや説明文を微修正した。
  • functions/featured-image.php 69行目の警告に対応するため、コードを一部修正した。
  • WordPress.org プラグインページの「WordPress バージョン」を4.8またはそれ以降に更新した (古いバージョンでも動作するはずだが、4.7フェーズで core に問題があったため、いずれにせよ更新時期が到来している)。

2.3.10

  • 設定ページのリンク切れを修正した。

2.3.9

  • プラグイン設定ページへのメタリンクを修正した。
  • プラグインで使われている文字列を全体的に見直した。
  • ShortPixel の利用をすすめるコメントを追加した。
  • メタデータを設定する前に、投稿タイプがサムネイルに対応していることを確認する条件判定を追加した。

2.3.8

  • WooCommerce、Sensei LMS でアイキャッチ画像が表示されるように CSS を追加した。
  • 修正: クラスを自動挿入する設定により、一部のケースでアイキャッチ画像の HTML が欠落する不具合を解消した。

2.3.7

  • WP v4.7.1 – v4.7.2のバージョンチェックに必要な、mime の修正をラップする関数を追加した。
  • mime の修正を mime type ファイルに移動した。
  • 管理者通知のコードをよりすっきりさせた。
  • 修正: 一部のサーバーと外部 SVG ファイルに関する attachment-modal.php の不具合を解消した (私の環境で不具合を再現できず、パッチを提供してくれた @abstractourist & @malthejorgensen に感謝)。
  • 互換性の向上: LEMP 上で動作する WordPress の互換性を高めるためにコードを変更した。
  • 互換性の向上: IE11 をサポートするために JS に別のスニペットを追加した (どうやらまだ IE を使っている人がいるようだ)。
  • FAQ の項目を追加した。

2.3.6

  • 追加: svgs-inline.js を古いブラウザで動作させるためのコードを追加した。
  • 追加: 設定ページ内に、プラグインのレビューを残せるセクションを追加した。
  • 削除: アップグレード時に用いる冗長なワンタイムコードを削除した。
  • 修正: アクティベーション時および設定ページで報告されるエラーへの対処 – WordPress.org の関連スレッドへのリンク

2.3.5

  • サムネイル表示に関係するコードの修正・変更を行った。

2.3.4

  • 修正: 関数に接頭辞がないことで起きる致命的なエラーを解消した。

2.3.3

  • 修正: 属性を制御ファイルの修正。引数の欠落により PHP が警告を出す不具合を解消した。
  • 設定ページのテキストを更新した。

2.3.2

  • クラス属性値を自動挿入するコードを、SVG ファイルのみに適用するように修正した。

2.3.1

  • 修正: 管理者通知機能がもとで、致命的なエラーが起きる場合がある不具合を解消した。

2.3

  • 新機能: 「高度な設定」をオフにして通常の画像のように SVG ファイルを簡便にアップロードできるようにした。オフにするとフロントエンドへのスクリプト読み込みを解除することもできる。
  • 新機能: アイキャッチ画像をサポート。アイキャッチ画像が SVG のときに投稿を保存すると、SVG のインラインレンダリングを設定できるチェックボックスが表示されるようにした (「高度な設定」有効時)。
  • パフォーマンスの向上: 画像のソースが SVG でない場合、インライン JS の実行を止めるようにした。
  • 設定ページ用の新しいスタイルシートを追加した。
  • SCSS ファイルを専用のフォルダに移動した。
  • 寄付のリンクを変更し、寄付をくださったかたにお礼を伝えられるようにした。
  • 設定ページとメディアページにレーティングリンクを追加した。
  • コードの記述を整理してコメントを追加した。
  • プラグインのバージョンチェックを追加した。
  • 「高度な設定」をオンにする必要があることを強調するため、注意書きを追加した。

2.2.5

  • 修正: モーダルウインドウで SVG サムネイルを表示する際の不具合を解消した。

2.2.4

  • 修正: WP 4.7.1でのアップロードの問題を一時的に修正する機能を追加した。

2.2.32

  • ローカライズ時に不具合をきたさないよう、テキストドメインをプラグインのスラッグと一致させた。

2.2.31

  • 翻訳の修正を試みた

2.2.3

  • svg-support/js/svg-inline.js と svg-support/js/min/svg-inline-min.js のコードを修正。SVG 要素 を JS でコントロールできるようにし、それらがロードされているかを検出するようにした (IMGタグは置換された)。この提案とコードを示してくれた laurosello に感謝。
  • メディアライブラリのリストビューで、SVG サムネイルが正しく表示されない不具合を修正した。
  • コードとコメントを少々整理した。
  • スペイン語の翻訳を追加した。Apasionados del Marketing のサポートに感謝。

2.2.2

  • エラーを引き起こす svg-support/functions/thumbnail-display.php 内の無名関数を修正した。

2.2.1

  • svg-support/functions/thumbnail-display.php の15行目の無名関数を変更し、古いバージョンの PHP で致命的なエラーを引き起こさないようにした。

2.2

  • すべてのメディアライブラリ画面で SVG のサムネイルを表示するようにした。
  • MIME タイプに SVGZ を追加した。
  • SVG ファイルを挿入する際に、width と height の属性値を自動的に削除するようにした。
  • img タグにターゲットクラスを自動挿入する機能を追加し、機能のオン / オフを切り替えられるようにした。オンにした時は WordPress デフォルトのクラスを削除する。
  • フッターへのスクリプト出力を選択できる機能を追加した。true か false で設定する。
  • PHP ファイルへの直接アクセスをブロックするようにした。
  • CodeKit 利用による SCSS への対応 – 最小化した CSS ファイルと JS ファイルを追加した。
  • スペルミスのあった関数名を修正した。
  • 全ファイルのコメントについて一貫性ある表記に改めた。
  • 設定ページに GoWebben 試用版 (25ドル相当) へのリンクを追加した。
  • WordPress 4.3で動作確認を行った。
  • Readme ファイルを更新した。

2.1.7

  • WordPress 4.0でテストし、新しいインターフェースに対応したプラグインアイコンを追加した。

2.1.6

  • /functions/enqueue.php に不足していた jQuery の依存関係を修正した。SVG Support JS を jQuery より先に読み込んでいたため (問題点を指摘してくれた walbach の貢献に感謝)。

2.1.5

  • セルビア語訳を追加した (Ogi Djuraskovic の貢献に感謝)。

2.1.4

  • プラグインページに表示する、設定画面へのリンクを修正した。
  • リンク先を追加した – サポート & 寄付
  • 設定画面を若干修正した。
  • 設定画面の UI を CSS で整えた。
  • OCD を少しだけ克服した。

2.1.3

  • プラグインページにカスタムメニューを設けるための plugin_action_links ファイルを追加した。

2.1.2

  • trunk、tags、readme.txt を整理し、正しい変更履歴と更新通知を表示するようにした。

2.1.1

  • JS ファイルの動作条件を修正 – ローカル環境では動作したが、ライブ (リモート) 環境で動作しなかったため。

2.1

  • ローカライズに必要な言語ファイルを更新した。

2.0

  • 設定ページの項目を追加。管理者のみに使用を制限するオプション、およびカスタム CSS ターゲットクラスを設定するオプションを追加した。
  • プラグインのコード全体を完全に書き直し、再構築した。
  • SVG のアップロードを管理者のみに制限するオプションを追加した。
  • カスタム CSS ターゲットクラスを設定するための入力フィールドを追加した。
  • 設定ページにスタイルシートを追加した。

1.0

  • 最初のリリース。