web-dev-qa-db-ja.com

SVGファイルに<img>、<object>、または<embed>を使用しますか？

jpg、gif、pngをロードするのと同じように、SVGファイルをページにロードするのに<img>、<object>、または<embed>を使用する必要がありますか？

それが可能な限りうまく機能するようにするためのそれぞれのコードは何ですか？ （私の研究では、mimetypeを含めること、または代替SVGレンダラーを指すことへの参照を見ているが、最先端の参照が見られない）。

Modernizr でSVGサポートをチェックしていて、SVGに対応していないブラウザのために（おそらく普通の<img>タグで置き換えを）やり直しているとしましょう。

htmlsvgvector-graphics
528
artlung

私はこのトピックをカバーするSVG Primer（W3Cによって公開されている）を推薦することができます： http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

あなたが<object>を使うならば、あなたは無料でラスタフォールバックを得る*：

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*）まあ、無料というわけではありません。ブラウザによっては両方のリソースをダウンロードするため、その解決方法については、Larryの提案を参照してください。

2014年アップデート：

  • 非対話型のsvgが必要な場合は、（古いIEおよびAndroid <3の場合の）pngバージョンへのスクリプトフォールバックで<img>を使用してください。それを行うための1つのクリーンで簡単な方法：

    <img src="your.svg" onerror="this.src='your.png'">。

    これはGIF画像のように動作します。お使いのブラウザが宣言型アニメーション（SMIL）をサポートしている場合は、それらが再生されます。

  • 対話型のSVGが必要な場合は、<iframe>または<object>を使用してください。

  • 古いブラウザにsvgプラグインを使用する機能を提供する必要がある場合は、<embed>を使用してください。

  • Css background-imageおよび類似のプロパティのsvgの場合、 modernizr は代替画像に切り替えるための1つの選択肢ですが、もう1つは複数の背景に応じて自動的に行われる方法です。

    div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}

    注：複数の背景をサポートするがsvgはサポートしないため、Android 2.3では複数の背景戦略は機能しません。

追加の良い記事は このブログ投稿 svgのフォールバックについてです。

565
Erik Dahlström

IE 9以降では、通常のIMGタグでSVGを使用できます。

https://caniuse.com/svg-img

<img src="/static/image.svg">
91
Christian Landgren

<object>と<embed>は興味深い性質を持っています：それらは、（同一Originポリシーを考慮に入れて）外部文書からSVG文書への参照を取得することを可能にします。その参照は、SVGのアニメーション化、スタイルシートの変更などに使用できます。

与えられた

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

そうすればこんなことができます

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});
90
WGH

最善の選択肢は、さまざまなデバイスでSVGイメージを使用することです。

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
21
Roberth Solís

srcsetを使う

ほとんどの 現在のブラウザは現在srcset属性をサポートしています を使用して、さまざまなユーザーにさまざまな画像を指定できます。たとえば、1倍と2倍のピクセル密度に使用でき、ブラウザは正しいファイルを選択します。

この場合、srcsetにSVGを指定してもブラウザがそれをサポートしていなければ、それはsrcにフォールバックします。

<img src="logo.png" srcset="logo.svg" alt="My logo">

この方法には、他のソリューションに比べていくつかの利点があります。

  1. それは奇妙なハックやスクリプトに頼っていません
  2. それは簡単です
  3. あなたはまだ代替テキストを含めることができます
  4. srcsetをサポートするブラウザは、必要なファイルだけをダウンロードするようにそれを処理する方法を知っているべきです。
19
Scribblemacher

<img>タグを使用する場合、webkitベースのブラウザは ' t表示ビットマップ画像の埋め込み。

インラインSVGを使用する場合、ExplorerはCSSに従ってSVGのサイズを変更しません。
ExplorerはSVGのサイズを正しく変更しますが、高さと幅の両方を指定する必要があります。

すべてのブラウザで機能するのは<object>タグのみであることがわかりました。サイズを正しく変更するには、幅と高さ（SVG内）を100％に変更する必要がありました。

Svg内のonclick、onmouseoverなどをSVGの任意の図形に追加できます：onmouseover = "top.myfunction（evt）;"

通常のスタイルシートに含めることで、SVGでwebフォントを使用することもできます。

注：IllustratorからSVGをエクスポートする場合、Webフォント名は間違っています。CSSでこれを修正し、SVGでの混乱を回避できます。 。たとえば、IllustratorはArialに間違った名前を付けますが、次のように修正できます。

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

これはすべて過去2年間にリリースされたブラウザで動作します。

ozake.com （フランス語）での結果。サイト全体は、連絡フォームを除くSVGで構成されています。

警告：Webフォントは正確にサイズ変更されず、プレーンテキストから太字または斜体への移行が多数ある場合、移行時に余分なスペースまたは不足しているスペースが少しある場合がありますポイント。詳細については、 この質問 の回答を参照してください。

15
Andrew Swift

SVGをCSSで完全にスタイル設定可能にする必要がある場合は、DOMにインラインで配置する必要があります。これはSVGインジェクションによって実現できます。SVGインジェクションは、ページが読み込まれた後にJavascriptを使用してHTML要素（通常は<img>要素）をSVGファイルの内容で置き換えることができます。

これは、 SVGInject を使用した最小限の例です。

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

画像がロードされた後、onload="SVGInject(this)がインジェクションをトリガーし、<img>要素はsrc属性で提供されたファイルの内容で置き換えられます。これはSVGをサポートするすべてのブラウザで動作します。

免責事項：私はSVGInjectの共著者です

11
Waruyama

私は<svg>タグを個人的に使用します。あなたがそれを持っていればそれを完全に制御できます。<img>でそれを使用すれば、CSSでSVGの内部を制御することはできません。

もう一つは ブラウザのサポート です。

svgファイルを開いてテンプレートに直接貼り付けるだけです。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

その後、あなたのCSSであなたは単にすることができます：

svg {
  fill: red;
}

いくつかのリソース： SVGのヒント

10
LazerBanana

私の2セント：2019年現在、使用中のブラウザの93％（およびそれらのうちの最後の2つのバージョンの100％）が<img>要素でSVGを処理できます。

enter image description here

出典：を使えますか

それでcouldは<object>を使う理由はもうないと言っています。

しかし それでもまだ pros ：

  • （Chrome Dev Toolsなどで）検査するときは、少し手を加えて変更を確認したい場合に備えて、SVGマークアップ全体が表示されます。

  • お使いのブラウザがSVGをサポートしていない場合は非常に堅牢なフォールバック実装を提供します（待ってください、しかしそれらはどれでも！）SVGが見つからない場合でも機能します。これは、betamaxやHD-DVDのようなXHTML2仕様の重要な機能でした。

しかし cons もあります。

4
amenadiel

純粋なCSSと二重画像のダウンロードなしで一つの解決策を見つけました。それは私が望むほど美しくはないが、うまくいく。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

アイデアは、フォールバックスタイルの特別なSVGを挿入することです。

あなたが 私のブログ で見つけることができるより多くの詳細とテストプロセス。

2
Artru

このjQuery関数はsvg画像内のすべてのエラーをキャプチャし、ファイル拡張子を代替拡張子に置き換えます

コンソールを開いて エラー読み込み画像svgを確認してください 

(function($){
  $('img').on('error', function(){
    var image = $(this).attr('src');
    if ( /(\.svg)$/i.test( image )) {
      $(this).attr('src', image.replace('.svg', '.png'));
    }
  })  
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://jsfiddle.net/img/logo.svg">
0
Andres Separ