SVG Image Field

DrupalでSVG（スケーラブルベクターグラフィックス）画像をアップロード・表示するための専用フィールドタイプ、ウィジェット、フォーマッターを提供します。

svg_image_field
24,862 sites
56
drupal.org
field theme
svg image vector graphics field media scalable vector graphics file upload inline svg sanitization
Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10, 9 v2.3.7
composer require 'drupal/svg_image_field:^2.3'

概要

SVG Image Fieldモジュールは、DrupalコアのImageフィールドがSVGファイルをサポートしていないという重要な制限に対応しています。このモジュールは、「Vector image」という新しいフィールドタイプと、専用のウィジェットとフォーマッターを導入することで、SVG画像を扱うための完全なソリューションを提供します。

標準のFileフィールドアプローチとは異なり、SVG Image Fieldはデータベースレベルでalt属性とtitle属性を適切にサポートし、直感的なユーザーエクスペリエンス（フィールドタイプとして「Vector image」を選択するだけ）を提供し、有効なSVGファイルのみがアップロードされることを保証するビルトインのMIMEタイプ検証、そしてファイルアップロード時のプレビュー画像を備えています。

このモジュールは、インラインSVGレンダリング（CSSとJavaScriptによる操作が可能）と標準のimgタグ出力の両方をサポートしています。インラインレンダリングを使用する場合、モジュールはenshrined/svg-sanitizeライブラリを使用してSVGコンテンツをサニタイズし、XSS攻撃を防ぐことができます。追加機能として、動的なカラーリングのためにfillをcurrentColorに強制する機能、画像をコンテンツまたはファイルURLにリンクする機能、カスタム寸法を適用する機能があります。

SVG Image Fieldは、専用のメディアソースプラグインを通じてDrupalのMediaシステムともシームレスに統合され、SVGファイルをメディアエンティティとして管理できます。オプションのサブモジュール（SVG Image Field - Media Bundle）は、Media Libraryですぐに使用できる事前設定済みのメディアタイプを提供します。

Features

  • データベースレベルで適切なalt属性とtitle属性をサポートする、SVGファイル専用に設計された「Vector image」フィールドタイプ
  • 設定可能なプレビュー画像寸法（最大幅と高さ）とファイルアップロード検証を備えたSVG専用ウィジェット
  • CSS/JavaScript操作のためのインラインSVGレンダリングと標準imgタグ出力を含む複数の表示オプション
  • XSS攻撃を防ぐためのenshrined/svg-sanitizeライブラリを使用したビルトインSVGサニタイズ機能（オプションでリモート参照の削除も可能）
  • 出力に適用される設定可能な画像寸法（幅と高さ）
  • fill属性をcurrentColorに強制するオプションにより、SVGがリンクなどの親要素から色を継承可能
  • SVG画像をコンテンツエンティティまたはファイルURLにリンク
  • フィールドストレージレベルとフィールドインスタンスレベルの両方でのデフォルト画像設定
  • DrupalコアのMediaモジュールと統合するためのメディアソースプラグイン（SVG）
  • 開発環境向けのStage File Proxyモジュールとの互換性
  • SVGサムネイルの適切なスタイリングによるMedia Library統合
  • アップロードされたファイルが正しいMIMEタイプ（image/svg+xml）と有効なSVG XML構造を持つことを確認する包括的なファイル検証

Use Cases

ロゴとアイコンの管理

あらゆるサイズで完璧にスケールする必要があるサイトロゴやアイコンにSVG Image Fieldを使用します。インラインレンダリングオプションにより、アイコンがCSSから色を継承できるため、複数の画像ファイルを作成することなく、ホバー効果やテーマカラーのバリエーションを実現できます。

Media LibraryでのSVGアセット

Media Bundleサブモジュールを有効にして、Vector imageメディアタイプを作成します。コンテンツ編集者はMedia Libraryを通じてSVGをアップロードし、サイト全体で再利用し、画像や動画などの他のメディアアセットと一緒に一元管理できます。

レスポンシブグラフィック

インフォグラフィック、図、イラストをSVGとして保存します。フォーマッターで寸法を設定することで、同じSVGを異なるビューモード（ティーザーとフル）で異なるサイズで表示しながら、鮮明な品質を維持できます。

アクセシブルなベクター画像

ビルトインのaltおよびtitleフィールドサポートを活用して、すべてのSVG画像に適切なアクセシビリティメタデータを持たせます。アクセシビリティ基準に準拠するため、フィールド設定でaltテキストを必須に設定できます。

安全なユーザー生成SVG

信頼性の低いユーザーからのSVGアップロードを受け入れる場合、sanitizeオプションを有効にして潜在的に悪意のあるコードを除去します。sanitize_remoteを使用して、データ漏洩の可能性がある外部参照も削除できます。

CSSでテーマ設定可能なアイコン

force_fillオプションとインラインレンダリングを使用して、親要素のテキストカラーを自動的に採用するアイコンを作成します。アイコンボタンやリンクで、ホバー時にアイコンがリンクの色に合わせて変化する場合に最適です。

Tips

  • 信頼できないユーザーからのSVGアップロードを受け入れる場合、XSS攻撃とHTTPリークを防ぐために「SVGコードをサニタイズ」と「リモート参照を削除」の両方のオプションを有効にしてください
  • SVGのCSS/JavaScript操作が必要な場合はインラインレンダリングを使用し、操作が不要な場合はパフォーマンスとキャッシングを向上させるためにimgタグレンダリングを使用してください
  • force_fillオプションは、テキストカラーに合わせる必要があるアイコンに特に便利です - SVG要素にfill='currentColor'を設定します
  • 大きなSVGが編集フォームを圧迫しないように、ウィジェット設定でpreview_image_max_widthとpreview_image_max_heightを設定してください
  • Media統合のため、media_libraryフォームとビュー表示の設定を取得するには、SVG Image Field Media Bundleサブモジュールの前にMedia Libraryモジュールをインストールしてください
  • アクセシビリティのためにaltテキストが推奨されます - すべてのSVG画像に説明テキストが含まれるように、フィールド設定でaltフィールドを有効にして必須にしてください

Technical Details

Troubleshooting 5
モジュール更新後にSVGが表示されない（クラス名変更の問題）

メディアソースクラスの名前を変更したバージョン（SVG.phpからScalableVectorGraphic.phpへ）に更新した後、GitまたはComposerが大文字小文字のみの名前変更を適用できない場合があります。svg_image_field/src/Plugin/media/Source/から古いSVG.phpまたはSvg.phpファイルを削除し、ScalableVectorGraphic.phpが存在することを確認してください。または、Composerでモジュールを削除して再インストールしてください。

インラインSVGが何も表示されないか壊れて見える

SVGファイルがサーバー上に存在することを確認してください。Stage File Proxyを使用している場合、ファイルがローカルにない場合、モジュールは自動的にimgタグ出力にフォールバックします。また、SVGがsvgルート要素を持つ有効なXMLであることを確認してください。

MIMEタイプエラーでSVGアップロードが拒否される

ファイルが正しいMIMEタイプ（image/svg+xmlまたはimage/svg）を持っていることを確認してください。一部のサーバーはSVGのMIMEタイプを誤って検出する場合があります。また、ファイルは検証を通過するためにsvgルート要素を持つ有効なXMLである必要があります。

Media Libraryサムネイルにsvgが表示されない

画像プロセッサと画像スタイルの設定によっては、SVGがサムネイルとして表示されない場合があります。詳細についてはDrupalのissue #3105482を参照してください。実際のSVGファイルがサムネイルソースとして使用されます。

インラインSVGがCSSスタイリングに反応しない

フォーマッター設定でinlineオプションが有効になっていることを確認してください。SVGにCSSを上書きするハードコードされたfillやstyle属性がないか確認してください。force_fillオプションを使用してfillをcurrentColorに設定できます。

Security Notes 4
  • SVGにはJavaScriptを含めることができるため、インラインSVGレンダリングはセキュリティリスクをもたらす可能性があります。信頼できるユーザーがコンテンツをアップロードするフィールドにのみインラインレンダリングを有効にするか、常にsanitizeオプションを有効にしてください
  • sanitizeオプションはenshrined/svg-sanitizeライブラリを使用して、スクリプト、イベントハンドラー、その他のXSSベクターを含む潜在的に悪意のあるコードを除去します
  • sanitize_remoteを有効にして外部リソースへの参照を削除し、ユーザー情報を漏洩したりトラッキングに使用される可能性のあるHTTPリークを防ぎます
  • 標準imgタグレンダリング（非インライン）は、SVGがインラインHTMLではなく画像リソースとして読み込まれるため、本質的に安全です