[解決済み] Do I use <img>, <object>, or <embed> for SVG files?

Question

を使用する必要があります。 <img> , <object> または <embed> を読み込むのと同じように、SVG ファイルをページに読み込むために使用します。 jpg , gif または png ?

できるだけうまく動作させるために、それぞれどのようなコードにすればよいでしょうか。 (私の調査では、mimetypeを含めるか、フォールバックSVGレンダラーを指すかの言及があり、良い状態のリファレンスを見ていない)。

でSVGをサポートしているかどうかをチェックしているとします。 モダナイザー で置き換え、フォールバックする（おそらく、プレーンな <img> タグを使用することで、SVG非対応のブラウザでも使用できます。

解決方法は？

SVG Primer (W3C発行) がこのトピックを扱っているので、お勧めできます。 http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

を使用する場合 <object> の場合、ラスターフォールバックは無料*です。

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*ブラウザによっては、両方のリソースをダウンロードするものがあるからです。

2014年更新

• 非インタラクティブなsvgが必要な場合は、以下のようにします。 <img> スクリプトフォールバック付き をpng版に変換する（古いIEやandroid <3用）。1つのきれいでシンプルな という方法があります。

  <img src="your.svg" onerror="this.src='your.png'"> .

  これはGIF画像と同じように動作し、もしあなたのブラウザが宣言的アニメーション（SMIL）をサポートしているならば、それらは再生されるでしょう。

• インタラクティブなsvgが必要な場合は、以下のいずれかを使用します。 <iframe> または <object> .

• 古いブラウザでもsvgプラグインを使えるようにする必要がある場合は <embed> .

• cssでsvgを使用する場合 background-image と同様のプロパティがあります。 モダナイザー は、フォールバック画像に切り替えるための一つの選択肢であり、もう一つは、それを自動的に行うために複数のバックグラウンドに依存することです。

  div {
      background-image: url(fallback.png);
      background-image: url(your.svg), none;
  }
  
  

  備考 Android 2.3 は複数の背景をサポートしていますが、svg はサポートしていないため、複数の背景を使用する戦略は機能しません。

このほかにも、以下のような読み物があります。 このブログ記事 svgフォールバックについて。