SVGに関する前のトピック：
オブジェクト要素を使用する
グラフィックが.svgファイルに保存されている場合、ページでオブジェクト要素を使用できます。
<object data='images/apple.svg'></object>
次の構成を使用すると、SVGをサポートするブラウザーはベクトル要素を正しく表示しますが、他のブラウザーは.pngファイルを表示します（ Demo ）：
<object data='images/apple.svg'> <img src='images/apple.png'/> </object>
この方法の主な欠点は、PNG画像のスケーラビリティが低いことです。
Modernizr
このメソッドは、JavaScriptライブラリModernizr.jsおよびRaphael.jsを使用します。 まず、SVGファイルをRaphaelでサポートされている形式に変換する必要があります。 ReadySetRaphael.jsツールはこれに役立ちます。 Modernizr.jsを接続します。
<script type="text/javascript" src="scripts/modernizr.js"></script>
次に、サポートされていないブラウザーの場合、Raphael.jsとsvg.js（変換後に取得したファイル）を接続する必要があります。
if (!Modernizr.inlinesvg) { document.write( '<script type="text/javascript" src="scripts/raphael.js"><\/script>', '<script type="text/javascript" src="scripts/svg.js"><\/script>' ); }
あとは、HTMLマークアップを追加するだけです。 以下のコードでは、SVGファイルはページのHTMLコードに直接含まれており、Raphaelが機能することを確認しています。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve"> <path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076 c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687 c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154 c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085 c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92 c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896 C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102 c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212 c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/> </svg> <div id="applelogo"></div>
前の記事を思い出して、SVGファイルにテキストを追加します。
<text x="210" y="250">This is SVG</text>
ここに何が起こったのか（ デモ ）：
SVGWeb
古いブラウザにSVGサポートを実装する別のツールは、 SVGWeb JavaScriptライブラリです。 ページに接続した後、次のようにSVG要素を配置できます。
<script type="image/svg+xml"> <svg ...>...</svg> </script>
XHTMLでは、CDATAを使用する必要があります。
<script type="image/svg+xml"><![CDATA[ <svg ...>...</svg> ]]></script>
おわりに
説明されているクロスブラウザSVGグラフィックの例は理想的ではありませんが、古いブラウザでのベクトルグラフィックの正しい表示に関するほとんどの問題の解決策として適しています。
使用した材料：