html - Web ページでの SVG のレンダリング

Question

SVGロゴを表示する必要がある Web ページがあります。これは、最新のブラウザーでは非常に簡単に可能ですが、古いブラウザーにも対応させる必要があります。ブラウザーが SVG をサポートしていない場合に、ユーザーに代替画像を表示する必要がある方法。というメソッドに出くわしましたHTTP-content negotiationが、それを実装して目的の結果を得るにはどうすればよいですか? タグを試してみました<object>が、IE では機能しないようで、Firefox で試すとスタイルが非常に難しくなります。

Answer 1

Modernizrの助けを借りて、このクライアント側を実装します。次のようなマークアップを指定すると...

<!-- Start with bitmaps because 
they will show up in all browsers even 
if javascript is not enabled -->
<img src="logo1.png" class="logo" />
<img src="logo2.png" class="logo" />
<img src="logo3.png" class="logo" />
<img src="logo4.png" class="logo" />

できるよ...

$(document).ready(function(){
  if (Modernizr.svg){
      $('.logo').each(function(){
         var src = $(this).attr("src");
         var svg = src.substr(0, src.lastIndexOf('.')) + ".svg";
         $(this).attr("src", svg)
      })
  }
})