1

サイトに掲載したいイラストは、PNG として保存された同じイラストよりも SVG 形式の方が 28.1 倍小さいです。

残念ながら、SVG に対応していないブラウザーに対応する必要があります。そのため、次のように代替として PNG を含めています。

<object type="image/svg+xml" data="illustration.svg">
  <img src="illustration.png" alt="alternate description">
</object>

この場合、SVG 対応ブラウザは PNG を無視しますか、それとも何らかの方法でバックグラウンドで読み込まれますか? (つまり、全体的な読み込み時間を節約できていますか?)

4

3 に答える 3

1

私はそのようなものを使用しました：

<object type="image/svg+xml" data="...">
   <!--[if lt IE 9]>
   <img src="img/circle.png" alt="" />
   <![endif]-->
</object>

Internet Explorer <9はSVGを表示できないため、PNGを取得します。他のほとんどすべてのブロワーはSVGを処理でき、フォールバックは必要ありません。

于 2012-05-08T13:31:53.367 に答える
1

Firefox v4 と Chrome v10 の両方が代替イメージをダウンロードします。PNG フォールバックで SVG 画像を使用しても、帯域幅や読み込み時間を節約することはできません。

このページを読み込んで、Firebug と Chrome の開発者ツールの Net パネルを見てテストしました: tiger.svg と tiger.png の両方のリクエストを示す Firebug tiger.svg と tiger.png の両方のリクエストを示す Chrome の開発者ツール

これは、SVG を使用することが良い考えではないという意味ではないことに注意してください。SVG は、対応する PNG よりも印刷とスケーリングが優れているため、引き続き SVG を使用する必要があります。

于 2011-03-28T16:10:56.003 に答える
0

Jquery SVGプラグインを使用する場合:

$(selector).svg({ 
loadURL: '', // External document to load 
onLoad: null, // Callback once loaded 
settings: {}}) // Additional settings for SVG element

試してキャッチし、onFail でイメージをロードします。:)

于 2011-03-28T18:59:55.920 に答える