説明
WordPress のための完全な SVG ソリューション – 安全、柔軟、使いやすい。
SVG サポートにより、基本ユーザーと開発者の両方にとって強力な機能を備えた安全な SVG アップロードが可能になります:
主な特長:
– 自動サニタイズによる安全な SVG アップロード
– CSS/JS を直接操作するためのインラインレンダリング
– 最小化によるファイルサイズの最適化
– 権限グループベースのアクセス制御
– 高度な開発者向けオプション
– マルチサイト対応
– ブロックエディター (Gutenberg) との完全な互換性
🔒 セキュリティ第1:
– 組み込みのサニタイズ機能により、潜在的に有害なコードを削除
– ロールベースのアップロード制限
– 包括的な MIME タイプ検証
🎨 デザイナーフレンドリー:↵
– SVG 要素の直接スタイル設定↵
– アニメーションのサポート↵
– カスタムクラスのターゲット設定↵
– 自動ディメンション処理
💻 開発者向け対応:
– 追加機能のためのアドバンスモード
– REST API サポート
– Gutenberg 対応
– 豊富なフックとフィルター
使い方
基本的な使い方:
– まず、WordPress ダッシュボードから SVG サポートをインストールして有効化します
– SVG ファイルを他の画像と同様にメディアライブラリにアップロードします
– 画像ブロック、カバーブロック、アイキャッチ画像とシームレスに連携します
高度な使用:
– 最小化とインラインレンダリングのための「アドバンスモード」を有効にします
– フックとフィルターでカスタマイズし、機能をカスタマイズできます
ブロックエディターの使用:
– アドバンスモードを使用して、インラインレンダリングを有効にします:
– Image ブロックに "style-svg" クラスを追加します
– SVGの背景をインラインでレンダリングするために、"style-svg" クラスを Cover ブロックに追加します
– Skip Nested SVGs” 設定を使用して、Cover ブロック内の SVG のインラインレンダリングを制御します
クラシックエディターの使い方:
– アドバンスモードを使用して、<img> タグに "style-svg" クラスを追加し、インラインレンダリングを行います。
– クラシックエディターでクラスを自動挿入するには、「クラスの自動挿入」オプションを有効化します
よくある問題と解決策:
– SVG が表示されませんか ? CSS でサイズが正しく設定されていることを確認してください。
– ご不明な点がございましたら、サポートタブをご利用ください。できる限りサポートさせていただきます。
お試し版のサイトで体験してみませんか ?
TasteWP を使って、SVG Support 有効化ずみのサイトを試すことができます ! 完全に無料で、サインアップも、クレジットカードもいりません。一度試してみてください。
このリンクをクリックすると、10秒ほどでお試し版のサイトが立ち上がります。
セキュリティ
SVG サポートは、自動サニタイズとロールベースの制限によりセキュリティを最優先します。アップロード権限は信頼できるユーザーのみに付与する必要があります。機能性とセキュリティのバランスをとるために設定を調整してください。
フィードバック
SVG Support をお使いいただきありがとうございます ! 新機能の提案やフィードバックを受け付けています。
Follow @SVGSupport on Twitter
Follow @benbodhi on Twitter
Follow @benbodhi on Warpcast
ご案内: このプラグインを気に入っていただけることを願っています ! 気に入っていただけましたら、ぜひ、WordPress.org のレビューページで評価をお願いします。
開発と貢献
SVG Support の開発版は GitHub で管理されています。自由に貢献してください:
- バグレポートや機能提案を送信してください: GitHub Issues
- プルリクエストからコードを投稿してください
- 開発リポジトリ: GitHub
プラグインの翻訳
スクリーンショット
FAQ
-
バージョン2.3に更新したところ、SVG のインラインレンダリングができなくなりました。
-
設定 > SVG サポートで「アドバンスモード」が有効化していることを確認してください。
-
インライン SVG を使用しない場合、フロントエンドの JavaScript を無効にするにはどうすればよいですか ?
-
設定で「詳細モード」を無効化します。
-
カスタマイザーで 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 (タブ)」 で動作するようになります。
評価
貢献者と開発者
変更履歴
2.5.14
-
セキュリティ強化:
- Remove default roles from the sanitizer bypass settings
-
Fixes:
- More comprehensive upload checks, allowing generator tags and comment patterns
-
パフォーマンスの向上:
- 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
-
コードの改善:
- 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 を更新し、エスケープ方法を改善し、設定ページのセキュリティを強化しました。
- ユーザー エクスペリエンスを中断せずにデバッグを支援するために、SVG 処理にエラー ログを追加しました。
-
パフォーマンスと互換性:
- スクリプトとスタイルが適切な依存関係で効率的に読み込まれるように、エンキュー関数を更新しました。
- メディアライブラリと ACF 統合での問題を防ぐために、SVG のメタデータ処理が改善されました。
- 不要なデータベース書き込みを防ぐために、アイキャッチ画像機能の nonce 検証とメタ更新を最適化しました。
-
一般的なコードの改善:
- 冗長性を減らし、保守性を向上させるためにコードをリファクタリングしました。
- コードの明確化と将来の開発のために、詳細なインライン ドキュメントを追加しました。
-
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
- 最初のリリース。











