0

インライン SVG を使用して、リソースの多い Web サイトに画像を表示し始めたところです。ただし、switch およびforeignobject タグを使用したフォールバックもあるため、古いブラウザーではその場所に png 画像が表示されるだけです。

これが要点です - htmlのインライン svg に詳細があります- 優雅に劣化させる方法は?

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xml:space='preserve'
  width="100" height="100">
<switch>
<g>
<!-- the svg goes here -->
</g>
<foreignObject width="100" height="100">
<img src="/some_image.png"/>
</foreignObject>
</switch>
</svg>

これにより、サーバーの負荷が軽減されると考えました。たとえば、4 つの画像を含むページの場合、ブラウザーは、ページに 1 回、各 img タグに 1 回、サーバーに 5 回アクセスするのではなく、1 回のヒットですべてを取得します。

しかし、このソリューションを展開した今、(サーバー ログを調べることで) ブラウザーが、SVG を処理できるかどうかに関係なく、実際には、foreignobject タグ内の img 要求を処理していることを発見しました。

つまり、ページがはるかに大きく (SVG でいっぱい)、表示されなくても画像がダウンロードされるため、サーバーの負荷が増加しています。

これはクレイジーに思えます - スイッチの考え方は、ブラウザが最初に理解したタグ (私の例では g タグ) を処理し、残り (私の例ではforeignobject) を無視することだと思いました。

私は Firefox 17.0.1、Chrome 23.0.1271.95、Safari 5.1.7、Opera 12.10 でこれをテストしましたが、それらはすべてそれを行います。

画像をダウンロードする必要が本当にないことをブラウザーに納得させる方法はありますか?

ありがとう

クリス

4

1 に答える 1

1

または<switch>で使用することにより、直接表示されない子のコンテンツを参照することもできます。抑制されるのは、スイッチの子の直接レンダリングのみです。<use> <filter><clipPath>

ダウンロードを停止する唯一の方法は、必要な場合を除いて、イメージにsrc属性を設定しないことです。javascriptを使用してSVGサポートを確認できます。

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")

次に、それがtrueを返す場合は、src属性を設定します。

于 2012-12-11T07:37:52.650 に答える