603

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

それが可能な限り機能することを保証するためのそれぞれのコードは何ですか？（私の研究では、mimetypeを含めたり、フォールバックSVGレンダラーをポイントしたりする参照があり、最新の優れた参照が表示されていません）。

ModernizrでSVGのサポートを確認し、SVG <img>非対応のブラウザーでフォールバック（おそらくプレーンタグでの置換を行う）をしていると仮定します。

html svg vector-graphics

— Artlung
ソース

3

ただの表情取るgithub.com/jonathantneal/svg4everybodyを

— マチャド

2

理論的には、<svg>他のSVGを参照するfrom も使用できます。これは、たとえばを使用して実現できます<image>。

— 2017

636

このトピックをカバーするSVGプライマー（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>

*）まあ、無料ではありません。一部のブラウザは両方のリソースをダウンロードするため、その回避方法については以下のラリーの提案を参照してください。

2014年の更新：

非インタラクティブsvgが必要な場合は、<img>pngバージョンへのスクリプトフォールバックと共に使用します（古いIEおよびandroid <3の場合）。それを行うためのクリーンでシンプルな方法の1つ：

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

これはGIF画像のように動作し、ブラウザが宣言型アニメーション（SMIL）をサポートしている場合は、それらが再生されます。
インタラクティブsvgが必要な場合は、<iframe>またはを使用します<object>。
古いブラウザにsvgプラグインを使用する機能を提供する必要がある場合は、を使用してください<embed>。
CSS background-imageでのsvg や類似のプロパティの場合、modernizrは代替画像に切り替えるための1つの選択肢です。別の選択肢は、複数の背景に依存して自動的に行われます。
```
div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}
```
注：複数の背景をサポートしていますがsvgをサポートしていないため、複数の背景の戦略はAndroid 2.3では機能しません。

追加の良い読みは、svgフォールバックに関するこのブログ投稿です。

— エリック・ダールストロム
ソース

7

サイズを設定する正しい方法は何ですか？高さと幅の属性を含めますか、それともCSSを使用しますか？

— artlung

5

cssの使用は問題ありません、または埋め込み要素（つまり、iframe、embed、object、imgのいずれか）にサイズを設定します-後者は、サイズを定義するスタイルシートの前にflash-of-unstyled-contentを回避できる場合がありますが読み込まれます。また、svgにviewBox属性があることを確認し、svgルート要素からwidth / height属性を削除します。それは私の経験の中で最高のクロスブラウザ動作を提供します。

— ErikDahlström2010

8

この方法では、常にラスターファイルがダウンロードされます。この回答は、フォールバックがレガシーIEブラウザーでのみ要求されることを保証します。

— Larry

3

上記はAdobe SVGプラグインでは機能しないことに注意してください。ただし、タグ<param name="src" value="your.svg" />内に追加すると、すべてを動作させることができます（最新のブラウザー+ ASV + MSIE）<object>。私は非常に長い時間をかけてすべての方法を理解しようと努めてきましたが、ついにそれを手に入れました。

— クリストファーシュルツ

5

人々が古いブラウザのサポートを止める速度が速ければ速いほど、ブラウザを最新の状態に保つ社会が速くなると思います。それは2012年のブラウザでも自動的に行われます。唯一の言い訳は、最新のブラウザに無料でアクセスできないことですが、Firefoxたとえば、まだWindows XPをサポートしています（おそらくバージョン52まで）。常に最新の無料の代替手段があります。

— Neonit 16

117

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

https://caniuse.com/svg-img

<img src="/static/image.svg">

— クリスチャンランドグレン
ソース

35

SVGが他のリソースをロードする必要がある場合、これは機能しません。（フォント、画像、...）

— TheHippo 2013年

11

ロゴやアイコンについては、意味上の理由からIMGタグを使用することをお勧めします。また、SVGが単なるベクトルイラストであることを確認してください。

— Christian Landgren 2013年

4

今ではどこでも受け入れられます。@artlung、あなたはこれに対するあなたの答えを変えたいかもしれません。

— SteeveDroz、2015年

16

<img/>タグを使用している人は、インラインSVG定義と同じようにアスペクト比などを制御できる「」などのSVGフラグメント識別子の追加について知りたい場合が<img src="myimage.svg#svgView(preserveAspectRatio(none))" />ありますviewBox。スケーリングの詳細-css-tricks.com/scale-svg

— brichins

101

<object>また<embed>、興味深いプロパティがあります。これらは、外部ドキュメントから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");
});

— WGH
ソース

— Steve O'Connor、

5

@ SteveO'Connorわかりません。おそらく十分に文書化されていませんが、Firefox、IE11、およびChromeで確実に機能します。少なくとも外部SVGファイルでは、データURIで動作させることができませんでした。

— WGH 2014

よく働く！興味深いことに、2つのSVGファイルがある場合、「id」フィールドを追加する必要があるようです。それ以外の場合、オペラブラウザに表示されるのは1つだけですか？

— Bram、2015

このメソッドを使用すると、インラインと参照の両方を最大限に活用できます。

— Brandito 2018年

SVGがインラインでなければ、SVG 内のハイパーリンクは機能しないことに注意してください。

— メンタリスト

26

最良のオプションは、さまざまなデバイスでSVG画像を使用することです。

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

— ロバーソリス
ソース

3

面白い。しかしonerror、svgがレンダリングされない場合でも、火災は発生しますか？どのブラウザをテストしましたか？

— artlung 2015年

1

はい、モバイルAndroid OS、デフォルトのブラウザでテストします:)

— RoberthSolís2015年

24

使用する `srcset`

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

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

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

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

奇妙なハックやスクリプトに依存していません
それは簡単です
代替テキストを含めることができます
サポートsrcsetするブラウザは、必要なファイルのみをダウンロードするように、その処理方法を知っている必要があります。

— Scribblemacher
ソース

5

最近、どのブラウザーもSVGをサポートする可能性が99％を超えると考えたのはなぜですか。

— Robert Longson 2017年

5

誰もがページを正確に表示できるようにすることの一部として、Googleはあなたをもっと愛してくれます！

— Hoots '29

2

現在の時点で、フォールバックイメージをユーザーの最大10％にプッシュしていることを考えると、見た目は良くなっています。

— Volker E.

2

@VolkerE。10％？caniuseは、約2％の SVGサポートの欠如を示しています。私はまだ2％をサポートするために答えのようにsrcsetを使用しています。将来的には、ブラウザーがsrcsetなどの情報を取得し、デバイスのサイズやファイル形式のサポートだけでなく、パフォーマンスやサイズなどの要素に基づいて適切な画像を選択できるようになることを願っています。

— Scribblemacher

3

このソリューションの唯一の問題は、ブラウザーがSVGをサポートしていて、srcsetをサポートしていない場合です。IE11など、SVGをサポートしているにもかかわらずデフォルトでPNGに戻る

— Hego555

16

CSSでSVGを完全にスタイル可能にする必要がある場合は、DOMにインラインで配置する必要があります。これは<img>、ページが読み込まれた後、Javascriptを使用してHTML要素（通常は要素）をSVGファイルのコンテンツに置き換える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の共著者です

— ワルヤマ
ソース

15

あなたが<svg>タグを完全に制御できるので、私は個人的にタグを使用します。で使用すると、<img>CSSなどでSVGの内部を制御できなくなります。

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

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のヒント

— レーザーバナナ
ソース

15

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

SVGインラインを含むあらゆる種類の高度なSVGの使用に対して、はるかに柔軟性が提供されます。

Internet ExplorerとEdgeはSVGを正しくサイズ変更しますが、高さと幅の両方を指定する必要があります。

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

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

注：SVGをIllustratorからエクスポートする場合、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;    
}

これらはすべて、2013年以降にリリースされたすべてのブラウザーで機能します。

例については、ozake.comを参照してください。お問い合わせフォームを除き、サイト全体がSVGで構成されています。

警告： WebフォントはSafariで不正確にサイズ変更されます。プレーンテキストからボールドまたはイタリックへの多くの移行がある場合、移行ポイントで少し余分なスペースまたは欠けているスペースがある可能性があります。詳細については、この質問で私の回答を参照してください。

— アンドリュー・スウィフト
ソース

ありがとうございました。3時間かけて髪を引っ張って、なぜラスター画像がimgタグに表示されなかったのかを理解しようとしました...これが公式に文書化されているかどうか知っていますか？

— ライブレッド2015年

@Andrew Swift、あなたはdev.ozake.comで本当に素晴らしい結果を得ますが、深刻なアクセシビリティの問題があります：検索エンジンはおそらくサイトのインデックスを作成するのに苦労します（SVGイベント内に隠されたリンクを取得するかどうかはわかりません） ; サイトはキーボードでナビゲートできません。スクリーンリーダーはそれで窒息するようです...

— interDist

11

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

出典：使用できますか

だから我々は可能性が使用する理由はありませんと言って<object>、もう。

しかし、それはまだその長所を持っています：

検査すると（たとえば、Chrome Dev Toolsを使用して）、SVGマークアップを少し改ざんして実際の変更を確認したい場合に備えて、SVGマークアップ全体が表示されます。
ブラウザがSVGをサポートしていない場合に備えて、非常に堅牢なフォールバック実装を提供します（待機しますが、SVGが見つからない場合にも機能します）。これは、ベータマックスやHD-DVDのようなXHTML2仕様の重要な機能でした。

しかし、短所もあります：

AMPに対応するものはありません<object>（<amp-img> これをインラインで使用しても完全に安全です）。
あなたはserviceworkerは、埋め込みのあらゆる種類のハンドラフェッチ混在させることはできませんので、持つ、<object>タグが実際にオフライン可能であることから、あなたのPWAを保つことがあります。

— ffflabs
ソース

3

純粋なCSSを使用し、二重の画像ダウンロードを使用しない1つのソリューションが見つかりました。思ったほど美しくありませんが、動作します。

<!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を挿入することです。

詳細とテストプロセスについては、私のブログをご覧ください。

— アルトル
ソース

0

この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">

スニペットを展開

— アンドレス・セパー
ソース

-1

の組み合わせをお勧めします

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

— Grv97
ソース

これらの設定を使用する理由と、他の回答と異なる理由を詳しく教えてください。

— kvantour

-1

あなたはSVGを間接的に挿入することができます <img>HTMLタグをます。これは、StackOverflowで以下の説明に従って可能です。

PCに次のSVGファイルがあります

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

この画像をhttps://svgur.comにアップロードしました

アップロードが終了した後、次のURLを取得しました。

https://svgshare.com/i/H7d.svg

次に、手動で（IMAGEアイコンを使用せずに）次のHTMLタグを追加しました

<img src="https://svgshare.com/i/Kyp.svg"/>

結果はすぐ下です

疑問があるユーザーのために、SVG画像を挿入するStackOverflowの回答に続く編集で私が行ったことを確認することは可能です

REMARK-1：SVGファイルには<?xml?>要素が含まれている必要があります。最初は、<svg>タグで直接始まるSVGファイルを作成しただけで、何も機能しませんでした。

備考-2：最初に、のIMAGEアイコンを使用して画像を挿入しようとしましたEdit Toolbar。SVGファイルのURLを貼り付けましたが、StackOverflowがこのメソッドを受け入れません。の<img>タグを手動で追加する必要があります。

この回答が他のユーザーの役に立つことを願っています。

— Schlebe
ソース

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

使用する srcset

使用する `srcset`