サポートされていないブラウザへのScalable Vector Graphics（SVG）の追加
この連載の以前の投稿で、SVGが古いブラウザを使用した場合の落とし穴について説明しました。また、Raphael.jsを使用してグラフィックを代替ソリューションとして提供しました。この記事では、この問題をさらに詳しく見ていきます。.
考えは簡単です、私達はまだ私達のウェブページにグラフィックスを提供するための主な方法としてSVG要素を使用しますが、同時にフォールバック機能も提供します サポートされていないブラウザでもレンダリングできるようにする.
確かに、私達が取ることができる多くの道があります、しかし私達は私がよりよい一般的な解決策であると思う2つの解決策にだけ調べるでしょう。それでは、それがどのようにできるのか見てみましょう。.
オブジェクト要素の使用
HTMLドキュメントに直接配置する以外にも、SVGを埋め込むにはいくつかの方法があります。たとえば、グラフィックを .SVG ファイル、私達は使用できます 素子.
デモンストレーションの目的で、私達は私達のWebページにSVGと一緒にAppleロゴを追加しました。ただし、サポートされていないブラウザは空のままになります。この問題を解決するために、次のようにビットマップグラフィックを提供できます。
このように、サポートされているブラウザはまだ .SVG, しながら サポートされていないブラウザはビットマップグラフィックを持ちます。. 我々は追加しました “PNG” 配信されているグラフィックを追跡するには、Appleロゴの下にマークを付けます。.
しかし、他の記事で述べたように, ビットマップグラフィックはSVGほど柔軟でスケーラブルではありません. それでは、別の解決策を見てみましょう.
Modernizrを使う
私たちが使用できるもう一つの方法は Modernizr. このJavaScriptライブラリーに慣れていないあなた方のために、私達がそれについてカバーするために専用の投稿をすることを心配しないでください。今のところ、ちょうど私達に追いつく.
まずはじめに、必要なJavaScriptライブラリーをいくつか用意しましょう。, Modernizr.jsとRaphael.js. それから、私達はまた私達の私達の物を変える必要があります .SVG このツールReadySetRaphael.jsを使ってRaphaelがサポートする形式にファイルを作成し、出力を別のファイルに保存します。 .js ファイル;名前を付けましょう svg.js.
次のように、Modernzr.jsをHTML文書に含めます。
そして他の二つのファイルのために, raphael.js そして svg.js, 条件付きでロードします, サポートされていないブラウザで表示されている場合のみ.
Modernizrを使用すると、ブラウザの機能を検出できます。この場合、ブラウザがSVGをレンダリングできるかどうかを検出し、そうでない場合はスクリプトを提供します。
if（！Modernizr.inlinesvg）document.write（ ''
