jpg、
gif、
pngを読み込むのと同じようにSVGファイルをページに読み込むには、
、
可能な限りうまく動作させるには、それぞれどのようなコードが必要でしょうか?(調べてみると、mimetypeを含めるとか、フォールバックのSVGレンダラーを指すとかの記述が見られますが、良い状態のリファレンスを見たことがありません).。
Modernizr]1でSVGのサポートをチェックし、SVGに対応していないブラウザではフォールバック(おそらくプレーンな<img>
タグへの置換を行う)していると仮定します。
このトピックを扱った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>
*)ただ、ブラウザによっては両方のリソースをダウンロードするものもあるので、無料とは言えませんが、それを回避する方法は以下のLarry'の提案を参照してください。
2014年のアップデート:。
<img>
とスクリプトフォールバックを併用してください。
をpngバージョンに変更してください(古いIEやandroid < 3の場合)。クリーンでシンプルな
方法があります。<img src="your.svg" onerror="this.src='your.png'">
です。
これはGIF画像のように動作し、ブラウザが宣言型アニメーション(SMIL)をサポートしていれば、それが再生されます。
インタラクティブなsvgにしたい場合は、<iframe>
または<object>
を使用してください。
古いブラウザにsvgプラグインを使用する機能を提供する必要がある場合は、<embed>
を使用してください。
css の background-image
や同様のプロパティの svg については、modernizr がフォールバック画像に切り替えるための一つの選択肢であり、もう一つは複数の背景に依存して自動的に行うものです。
div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}
注意: Android 2.3では、複数の背景がサポートされていますが、svg.はサポートされていないため、複数の背景を使用する方法は機能しません。
svgのフォールバックについては、このブログ記事も参考になります。
<object>
と <embed>
には興味深い特性があり、(same-origin ポリシーを考慮して)外部文書から SVG 文書への参照を取得することができます。この参照を利用して、SVGのアニメーションやスタイルシートの変更などを行うことができます。
与えられた
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
のようにすることができます。
document.getElementById("svg1").addEventListener("load", function() {
var doc = this.getSVGDocument();
var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
rect.setAttribute("fill", "green");
});