12

私は現在、ウェブサイトの再設計を行っています。基本的には、より最新の外観にアップグレードし、できるだけ解像度に依存しないようにしようとしています。解像度に依存しないという名目で、使用しようと思いましたブラウザーが<img>タグ内の SVG 画像をサポートするデザイン内の SVG 画像。より野心的なソリューションを使用するのではなく、タグでSVG を使用することに固執したい理由<img>は、AFAIK Chrome、Opera、および Safari がすべて SVG をサポートしており、FF4 が最終的にそれを取得し、サイト全体が出力HTMLの変更を開始するには部分的に書き直す必要があるカスタムCMS上に構築されています（現在、各テーマのカスタムデザイン画像、カスタムCSS、およびカスタムJSインクルードをサポートしています）。

今、私はこれを行う最善の方法を見つけようとしてネットを少し調べましたが、何らかの理由で、私が見つけた提案された解決策のほとんどすべてがうまく機能していませんでした (FF3.x が<img>タグで SVG をサポートしていると検出されたので、それらはそこで正しく表示されませんでした、別のものはまったく試しませんでした、いくつかは非常に複雑で、「サポートされている場合はすべての画像を SVG に置き換える」機能もうまく機能しません。

私が探しているのは、実際には次のように呼び出すことができる小さなスニペットです (ところで、私は Web サイト用にこの新しいテーマで JQuery を使用しています):

if(SVGSupported()) {
    $('#header img#logo').attr('src','themes/newTheme/logo.svg');
    /* More specified image replacements for CSS and HTML here */
}

不正確な出力を出さない、これに対する実際の解決策を実際に持っている人はいますか? もしそうなら、私はとても感謝しています。

4

5 に答える 5

4

これが最終的な答えのようです: Javascript: img.complete の値を返すのを遅らせるにはどうすればよいですか? 誰かがすぐに正しい結果をもたらす何かを考え出さない限り。

于 2011-05-15T13:16:44.440 に答える
3

メソッドの良い議論/比較はここにあります: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

そのページに基づいて、私はこれを使用して巻き上げました：

svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
于 2013-02-25T19:04:26.173 に答える
3

<object>古いブラウザーではor<iframe>タグを使用できますが、これは適切な解決策ではありません。Firefox と IE9 (他のブラウザーについては知りません) はインライン svg を実装しており、簡単に検出できます。

// From the Modernizr source
var inlineSVG = (function() {
  var div = document.createElement('div');
  div.innerHTML = '<svg/>';
  return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();

if( inlineSVG ){
  alert( 'inline SVG supported');
}

したがって、すべての画像を svg タグに置き換えることができます。そして、インライン svg をサポートするすべてのブラウザーが画像ソースとして svg をサポートすることを願っていますが、それについてはグーグルで検索する必要があります。

于 2010-11-07T15:20:06.793 に答える
1

私はこれについてブログ投稿を書くつもりでしたが、ここにうまくいくはずのスニペットがあります:

function SVGSupported() {
    var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
    var img = document.createElement('img')
    img.setAttribute('src',testImg);

    return img.complete; 
}

Opera ブログに投稿された Alexis "Fyrd" Deveria のスクリプトに基づいています。

私は自分のブログで似たようなものを使用しています。実際にここで見ることができます: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

<img>サポートされている場合に使用します。そうでない場合、IE を使用していない場合は、通常のオブジェクト タグが使用されます。それ以外の場合は、svg-web 用に特別に作成されたオブジェクト タグを使用します。グラデーション アニメーションには、fakesmil を使用します。私がテストしたところはどこでも動作するようです。この例を実行するスクリプトは、http: //blog.echo-flow.com/media/js/svgreplace.jsにあります。

于 2010-11-07T15:25:43.290 に答える
-3

<object>-Tags を使用して SVG を表示します。http://caniuse.com/svg-imgおよびhttp://www.w3schools.com/svg/svg_inhtml.aspを参照してください。

Firefox 3.x は SVG 画像も表示できますが、埋め込まれた SVG は表示されません。他のブラウザのものについてもわかりません。FF4 では、埋め込み SVG も許可されます。

-Tag を使用<object>すると、ブラウザーが SVG の表示をサポートしていない場合に備えて、画像の代替 PNG 表示を含めることもできます。

于 2010-11-07T15:04:22.573 に答える