JavaScriptを使用しないサポートに基づいてSVG/PNGを埋め込むにはどうすればよいですか？

Question

サイトにSVGイメージを埋め込みしようとしています。 SVGとの互換性を検出するためにModernizrを使用します。 私はSVGWebなどを見てきましたが、今はそれらを使いたくありません。

私がしたいことは次のとおりです。 ブラウザがSVGをサポートしている場合、SVGイメージをHTML5ページに埋め込みます。 そうでない場合は、<img>タグを使用してPNGの代替品を配置してください。

この画像をHTMLの一部にしてCSSのbackground-imageプロパティで追加しないでください。

また、Googleが簡単にイメージとメタデータ（alt for img/desc for svg）を読みやすくするために、JQueryを使用するかどうかはわかりません。

これを行う最善の方法についてのご意見はありますか？

ありがとうございました。

Answer 1

SVG images in the <img> elementを使用してみましたか？

あなたはこのサーバー側をやっている場合は、その後、もしくは動作しない場合がありcontent negotiation含めて、これを行うための方法、の束があります。

また、あなたはすべてのあなたのイメージのsrc属性によって圧縮し、このようなものでそれらを書き換えることができます：私は、サーバー側のそれをしなかった場合

var imgs = document.getElementsByTagName('img'); 
var endsWithDotSvg = /.*\.svg$/ 
var i=0; 
var l = imgs.length; 
for (; i != l; ++i) { 
    if (imgs[i].src.match(endsWithDotSvg)) { 
     imgs[i].src = imgs[i].src.slice(0, -3) + "png"; 
    } 
} 

Answer 2

JavaScriptをクライアント側で使用したくない場合は、最終的にサーバー側でJavaScriptを使用する必要があります。私が想像できるところは、訪問者がどのブラウザ（&バージョン）を使用しているかをUserAgentで確認し、それに応じてSVGまたはPNGを表示できることです。多分それはオプションですか？

編集： さて、まだJavaScriptを検討しているようです。 個人的に、私はいつもPNGを指し示すimgタグをレンダリングすることを選択します。ドキュメントの準備ができたら、私はこれらのimgタグのすべてを見て、それらをSVGを指す埋め込みタグに置き換えます。

jQueryの-例：

if(Modernizr.svg) // Wohooo SVG words: let's party 
{ 
    $('img.replace').each(function() { // Loop through all PNGs that need replacing 
    // A unique identifier for images is saved in the id-attribute: use it to append the SVG version 
    $(this).append('<embed src="' + $(this).attr('id') + '.svg" type="image/svg+xml" />'); 
    $(this).remove(); // Clean-up the unused img-tag 
    }); 
} 

は、上記の例を使用して、

<img class="replace" id="123456" src="123456.png"/> 

などのIMGタグは

<embed src="123456.svg" type="image/svg+xml" /> 

たぶんこれはあなたのために働くに置き換えられますか？ ;-)