1. 開発者向けのウェブ技術
  2. SVG
  3. ガイド
  4. 画像としての SVG

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

画像としての SVG

SVG は、HTML、CSS、特定の SVG 要素、およびキャンバス API を通じて、画像形式として使用することができます。 このページには、SVG を画像ソースとして指定できる機能の一覧が掲載されています。

SVG に対応している機能

ブラウザーは以下の場所で SVG 画像に対応しています。

制限

セキュリティ上の理由から、一部のブラウザーでは、SVG コンテンツが画像として使用されている場合に制限がかけられています。 具体的には、次の制限が適用される場合があります。

  • JavaScript は無効になります。
  • 外部のリソース（画像やスタイルシートなど）を読み込むことはできませんが、 data: URL を使用してインライン化されていれば可能です。
  • :visited のリンクスタイルは描画されません。
  • プラットフォームネイティブのウィジェットのスタイル付け（OS のテーマに基づくもの）は無効になります。

なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または <iframe>, <object>, <embed> の何れかの要素を使用して文書として埋め込まれた場合には適用されません。

仕様書

仕様書
CSS Backgrounds and Borders Module Level 3
# the-background-image

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告