SVG Image
DrupalのImageフィールドを拡張し、別のフィールドタイプを必要とせずにSVGファイルのアップロードと表示をサポートします。
svg_image
インストール
composer require 'drupal/svg_image:^3.2'
composer require 'drupal/svg_image:^3.0'
概要
SVG Imageモジュールは、デフォルトの画像フィールドウィジェットとフォーマッタをオーバーライドすることで、DrupalコアのImageフィールド機能を拡張し、SVG（Scalable Vector Graphics）ファイルをシームレスにサポートします。SVG画像用に別のフィールドタイプを作成する代わりに、既存のImageフィールド設定に「svg」拡張子を追加するだけで使用できます。
このモジュールはSVGファイルをラスター画像とは異なる方法で自動的に処理します。CSS/JavaScriptを完全に制御できるように<svg>タグとしてインライン展開するか、よりシンプルな用途向けに標準的な<img>タグとしてレンダリングできます。SVGファイルはenshrined/svg-sanitizeライブラリを使用してサニタイズされ、XSS攻撃やその他のセキュリティ脆弱性を防止します。
レスポンシブ画像を使用するサイトでは、オプションのSVG Image Responsiveサブモジュールにより、この機能をResponsive Imageフォーマッタにも拡張できます。
Features
- 許可される拡張子に「svg」を追加することで、DrupalのImageフィールドを通じてSVGファイルのアップロードを有効化
- 通常SVGファイルを拒否する画像バリデーションを自動的にバイパス
- 設定に基づいてSVG画像をインライン<svg>タグまたは<img>タグとしてレンダリング
- SVG表示専用の幅と高さ属性を設定可能
- enshrined/svg-sanitizeライブラリを使用してSVGファイルをサニタイズし、XSS攻撃を防止
- ファイルのwidth/height属性からSVGの寸法を抽出して使用
- コンテンツ編集中のImageフィールドウィジェットでSVGプレビューを保持
- 画像スタイルが適用されている場合でもSVGファイルを適切に処理（特別なクラス付きでオリジナルを表示）
- アンインストール時にフィールド拡張子から「svg」を削除し、設定をクリーンアップ
- SVG Image Responsiveサブモジュールによるレスポンシブ画像のサポート
Use Cases
ロゴとアイコンの管理
SVG Imageを会社のロゴ、アイコン、その他のベクターグラフィックスに使用し、異なる画面サイズや解像度でもきれいにスケールできます。ロゴ用のImageフィールドを追加し、「svg」拡張子を有効にし、CSSによる色のカスタマイズのためにインラインSVGレンダリングを使用します。
ベクターを使用したレスポンシブヒーロー画像
SVG Image Responsiveサブモジュールを使用して、SVGイラストをResponsive Imageフォーマッタと組み合わせます。SVGはレスポンシブ画像スタイルのフォールバック設定に基づいて適切なサイズで表示され、鮮明なベクター品質を維持します。
インタラクティブグラフィックス
SVG画像をインライン展開（svg_render_as_image = false）してレンダリングすることで、SVG要素へのJavaScript操作、CSSアニメーション、IMGタグレンダリングでは不可能なホバーエフェクトを有効にします。
ラスターとベクターコンテンツの混在
従来のラスター画像（jpg、png、gif）とSVGファイルの両方を受け入れる単一のImageフィールドを使用します。モジュールは各タイプを自動的に適切に処理し、ラスター画像には画像スタイルを適用しながら、SVGのベクター品質を維持します。
安全なSVGアップロード
コンテンツ編集者がセキュリティの懸念なくSVGファイルをアップロードできるようにします。モジュールはenshrined/svg-sanitizeライブラリを使用してすべてのSVGコンテンツをサニタイズし、潜在的に悪意のあるスクリプトや外部参照を除去します。
Tips
- 最良の結果を得るには、SVGファイルのルート<svg>要素にwidthとheight属性を含めてください
- CSSによる色の制御やJavaScriptのインタラクティビティが必要な場合は、インラインSVGレンダリング（「IMGとしてレンダリング」を無効）を使用してください
- シンプルな表示だけが必要で、より良いキャッシュ動作が必要な場合は、IMGレンダリングを使用してください
- 「no-image-style」クラスは画像スタイルを通じて表示されるSVGに追加されます。これをターゲットにしたCSSスタイリングに使用してください
- SVGファイルはレンダリングごとにサニタイズされます。多くのSVGを使用するパフォーマンス重視のサイトでは、ファイルの事前サニタイズを検討してください
- Mediaエンティティと併用する場合は、メディアタイプのImageフィールドでSVG拡張子を許可するように設定してください
Technical Details
Hooks 6
hook_field_widget_info_alter
SVGアップロードサポートを有効にするために、コアのImageウィジェットクラスをSvgImageWidgetに置き換えます
hook_field_formatter_info_alter
コアのImageおよびImage URLフォーマッタクラスをSVG対応バージョンに置き換えます
hook_config_schema_info_alter
画像フォーマッタの設定スキーマにSVG固有の設定を追加します
svg_image_preprocess_image_style
画像スタイルが適用されている場合でもSVG画像を表示できるようにするプリプロセッサ。CSSターゲティング用に「no-image-style」クラスを追加します。
svg_image_is_file_svg
MIMEタイプに基づいてファイルエンティティがSVG画像かどうかをチェックするヘルパー関数
svg_image_get_image_file_dimensions
ファイルから画像の寸法を取得します。SVGファイルの場合、XMLを解析してwidth/height属性を抽出します。指定されていない場合はデフォルトで64x64になります。
Troubleshooting 6
Imageフィールド設定の許可されるファイル拡張子に「svg」が追加されていることを確認してください（フィールド編集時のフィールド設定タブ）。モジュールはSVGサポートを追加しますが、既存のフィールドに拡張子を自動的に追加しません。
フォーマッタ設定の「SVG画像の寸法（属性）」で明示的な幅と高さを設定するか、SVGファイルのルート要素にwidthとheight属性が定義されていることを確認してください。
SVGファイルは画像スタイル（リサイズ、クロップなど）で変換できません。モジュールは「no-image-style」CSSクラス付きでオリジナルのSVGを表示します。SVGの寸法を制御するにはCSSを使用するか、フォーマッタ設定で寸法を設定してください。
SVGファイルが過度にサニタイズされていないか確認してください。外部参照、スクリプト、特定のフィルターエフェクトを含む複雑なSVGは削除される場合があります。よりシンプルなSVGを試すか、サーバーログでエラーを確認してください。
フォーマッタ設定で「SVG画像を<img>としてレンダリング」を無効にして、SVGをインライン展開してください。IMGタグレンダリングはSVGをカプセル化し、SVG要素への直接的なDOMアクセスを妨げます。
モジュールのアンインストールフックはフィールド拡張子から「svg」を自動的に削除し、設定をクリーンアップします。アンインストール後にキャッシュをクリアしてください。問題が続く場合は、フィールド設定を手動で確認してください。
Security Notes 5
- すべてのSVGファイルはenshrined/svg-sanitizeライブラリを使用してサニタイズされ、XSS攻撃を防止します
- サニタイザはJavaScript、外部参照、および潜在的に危険な要素をSVGファイルから削除します
- セキュリティカバレッジはDrupal.orgのセキュリティアドバイザリーカバレッジにより確認されています
- セキュリティ修正を受け取るために、enshrined/svg-sanitize依存関係を最新に保ってください（最小バージョン0.22が必要）
- インラインSVGレンダリングはSVGコンテンツをDOMに直接公開します。ソースSVGが信頼できるものであるか、サニタイズが十分であることを確認してください