Chromeが<img>タグを介して参照されるSVGをレンダリングしない

Question 1

imgタグでsvgをレンダリングしないグーグルクロームに問題があります。これは、ページを更新して最初のページを読み込んだときに発生します。「要素の検査」で画像を表示し、svgファイルを右クリックして、新しいタブでsvgファイルを開きます。その後、svg画像が元のページにレンダリングされます。

<img src="../images/Aged-Brass.svg">

問題が何であるかに関して、ここで完全に途方に暮れています。svg画像は、ChromeやSafariではなく、IE9とFFで正常にレンダリングされます。

MIMEタイプも設定しています。（image / svg + xml）

編集：これ は私の問題を説明するために作成した簡単なhtmlページです。

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

ご覧のとおり、imgタグとcssの両方でsvgファイルを背景画像として使用しようとしています。どちらも、ChromeまたはSafariでの最初のページ読み込みでは機能しません。要素を検査すると、svgを右クリックするか、別のウィンドウでsvgロードへのリンクをクリックすると、svgファイルが元のタブにレンダリングされます。

Question 2

シンプルで簡単な方法。https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/によると、テキストエディタ（メモ帳など）で.SVGファイルを開いて変更する必要があります

xlink:href="data:img/png;base64,

に：

xlink:href="data:image/png;base64,

それは私のために働いた！

Question 3

svg-tagには、名前空間属性xmlnsが必要です。

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Question 4

同じ問題があったのでここに来ました。要素を調べるとファイルは表示されますが、サイトでは（localhostを使用している場合でも）表示されません。

私の問題に対する答えは、SVGファイルを保存することでした。イラストレーターから保存した場合は、「リンク」ではなく「埋め込み」をクリックしてください。リンクはデータを含めるのではなく、ローカルファイルを参照するだけです（正しく理解している場合）。ここに画像の説明を入力してください

エクスポートするための他のいくつかの便利なヒントがあるadobeのWebサイトでそれについて読みました http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

これは私にとってはうまくいきました、それが役に立ったことを願っています。

Question 5

同様の問題があり、画像がレンダリングされていなかったため、ここに来ました。私が見つけたのは、テストサーバーのコンテンツタイプヘッダーが正しくないということでした。.htaccessファイルに以下を追加して修正しました。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Question 6

<object>代わりに使用してください（もちろん、各URLを独自のものに置き換えてください）：

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

スニペットを展開

Question 7

（svgソースXMLを編集することによって）[svg]タグにwidth属性を追加することは私のために働きました：例：

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

Question 8

サンプルを使用してテストページを作成することができましたが、問題なく機能しました。私の仮定は、svgファイルに何か問題があるということです。ここにも貼り付けてもらえますか？これが私が使用したサンプルです。

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>

Question 9

Chromeのバグのように見えますが、これが原因でほとんど気が狂ったので、別のことをしました...画面に表示されるsvgオブジェクトのcssを変更する場合は、Chromデバッガーを使用します。

1.画面サイズを確認します2.SVGオブジェクトの「load」イベントをリッスンします3.要素がロードされたら、jQueryを使用してCSSを変更します4.それは私のためにトリックをしました

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}

width: 180px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>

スニペットを展開

Question 10

私も同様の問題を抱えており、これに対する既存の回答は適用できないか、機能しましたが、他の理由で使用できませんでした。そのため、ChromeがSVGについて何を嫌っていたかを理解する必要がありました。

私たちの場合、SVGファイルのタグのid属性にが含まれていることが判明しましたが、Chromeはこれを好みませんでした。私がそれを取り除くとすぐにそれはうまくいきました。symbol::

悪い：

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

良い：

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>

Question 11

.svg画像には初期の高さと幅がありません。したがって、表示されません。あなたはそれを設定する必要があります。

インラインまたはcssファイルで実行できます。

列をなして：

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

Cssファイル：

<img src="../images/Aged-Brass.svg" class="image" alt="logo">

.image {
    width: 100px;
    height: 50px;
}

Question 12

私の場合、Photoshopを使用してsvgを作成して保存したときに、この問題が解決しませんでした。助けになったのは、Illustratorを使用してファイルを開き、後でsvgをエクスポートすることでした。

Question 13

最初にPhotoshopCCからsvgをエクスポートし、手動で追加する必要がありました

version="1.1"<svg>タグ

クロームで表示するために。

Question 14

サーバーからのHTTPヘッダーのコンテンツタイプが私にとって問題でした。私はnode.jsサーバーを持っています、追加しました：

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

pageNameは、要求されたもののローカル変数です。

私の推測では、これは一般的な問題です！Chromeの現在のバージョン（2020年3月）を使用しています。

Question 15

同じ問題がありました。サーバーが正しく構成されていて、.htaccesが答えではない場合は、埋め込んでいるsvgソースを調べたいと思うかもしれません。鉱山はテキストエディタで作成され、html5コード内のChrome＆Safariで適切にレンダリングされ、埋め込まれると何も表示されませんでした。正しいバージョン、寸法などをsvgコードに追加し、チャームのように機能します。また、すべてのスタイルがインラインです。

つまり、

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>

Question 16

追加DOCTYPEした後、Chromeでも同じ問題が発生しましたが、期待どおりに機能します

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

前

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

後

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

Question 17

svg画像の遷移cssプロパティがないことに注意してください

理由はわかりませんが、Chromeのsvg画像に対して「transition：all ease 0.3s」を実行すると、画像が表示されません。

例えば：

* {
   transition: all ease 0.3s
  }

Chromeはsvgをレンダリングしません。

遷移cssプロパティを削除して、再試行してください

Question 18

問題がある場合は、最初にsvg-imagesを読み取ることができるプログラムで画像を開こうとします。
それが失敗した場合は、svg-imageが何らかの理由で破損しています。

私はそのようなケースがあり、新しいsvg-imageにsvg-pathsをコピーし、svg-tagsのすべての詳細を調整しました。

私はそれがレンダリングされなかった理由をテストしたことはありませんが、いくつかの目に見えない特別な兆候がレンダリングエラーを引き起こしたと思います。Macでファイルを編集することがあるので、すでに他のコンテキストでこの問題が発生していました。

Question 19

IMGタグを介して含まれるSVG画像でも同じ問題が発生していました。Chromeは、ファイルの先頭に直接空白行があることを好まなかったことがわかりました。

空白行を削除すると、SVGはすぐにレンダリングを開始しました。

Question 20

画像のスタイルを必ず追加します。それは私のために働いた

style= "width:320; height:240"

Question 21

Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>