Chrome rendert SVG nicht, auf das über das <img> -Tag verwiesen wird


89

Ich habe Probleme mit Google Chrome, das SVG nicht mit einem IMG-Tag rendert. Dies geschieht beim Aktualisieren der Seite und beim ersten Laden der Seite. Ich kann das Bild anzeigen lassen, indem ich "Element überprüfen", dann mit der rechten Maustaste auf die SVG-Datei klicke und die SVG-Datei in einem neuen Tab öffne. Das SVG-Bild wird dann auf der Originalseite gerendert.

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

Völlig ratlos, was das Problem ist. Das SVG-Bild wird in IE9 und FF gut wiedergegeben, nur nicht in Chrome oder Safari.

Ich habe auch meine MIME-Typen eingestellt. (image / svg + xml)

BEARBEITEN: Hier ist eine einfache HTML-Seite, die ich erstellt habe, um mein Problem zu veranschaulichen.

<!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>

Wie Sie sehen können, versuche ich, eine SVG-Datei sowohl in einem IMG-Tag als auch in CSS als Hintergrundbild zu verwenden. Weder arbeiten beim ersten Laden der Seite in Chrome noch in Safari. Wenn ich das Element inspiziere, klicken Sie mit der rechten Maustaste auf svg oder klicken Sie auf den Link, um svg in ein anderes Fenster zu laden. Die svg-Datei wird auf der ursprünglichen Registerkarte gerendert.


1
Können Sie hier ein Beispiel erstellen oder einen Beispielcode veröffentlichen?
Sirko

Wir müssen dies wirklich selbst sehen und reproduzieren können, wenn Sie Hilfe benötigen.
Phrogz

Hat Ihre "Aged-Brass.svg" zufällig ein eingebettetes Bild enthalten? Ich hatte das gleiche Problem, und darauf habe ich es zurückgeführt ...
McGarnagle

Antworten:


116

Ein einfacher und einfacher Weg; Laut https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ müssen Sie die .SVG-Datei mit einem Texteditor (wie Notepad) öffnen und ändern

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

zu:

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

es hat bei mir funktioniert!


8
Dies ist eine funktionierende Lösung. Dieses Problem ist beim Exportieren eines Smart Vector-Objekts als SVG mit Photoshop aufgetreten.
Mikhail

8
Dies war ein Lebensretter, der stundenlang versuchte herauszufinden, worum es ging. Danke dir!!
mhodges

2
Ebenso löste dies mein Problem und verbrachte viel Zeit damit, herauszufinden, warum das Bild nicht angezeigt wurde.
MrEvers

2
Ich hatte diese Codezeile nicht in der SVG-Datei, und das Hinzufügen im <svg> -Tag hat nichts für mich getan.
Pete

2
Dies sollte weit oben sein. Du hast meinen Tag gerettet.
Mattia Rasulo

39

Das svg-Tag benötigt das Namespace-Attribut xmlns:

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

Dies. Und ich musste es als Hintergrundbild eines Div laden.
Casey

1
Das SVG benötigt weiterhin den Namespace. Stellen Sie einfach sicher, dass es in der SVG-Datei definiert ist, die Sie als Hintergrund verwenden.
Knall

30

Ich kam hierher, weil ich das gleiche Problem hatte, wenn ich das Element inspiziere, kann ich die Datei sehen, aber auf der Site kann ich nicht (selbst wenn ich localhost benutze)

Die Antwort auf mein Problem war das Speichern der SVG-Datei. Wenn Sie es vom Illustrator gespeichert haben, klicken Sie auf "Einbetten" und nicht auf "Verknüpfen". Als Link wird nur auf Ihre lokalen Dateien verwiesen, anstatt die Daten einzuschließen (wenn ich es richtig verstehe). Geben Sie hier die Bildbeschreibung ein

Ich habe darüber auf der Adobe-Website gelesen, die einige andere nützliche Tipps zum Exportieren enthält: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Das hat bei mir funktioniert, hoffe es war nützlich.


1
Weiß jemand, ob es eine Möglichkeit gibt, dies mit einem intelligenten Objekt in Photoshop zu tun? Das Öffnen von Illustrator und das erneute Exportieren mit dieser Option in Illustrator war das einzige, was es mir ermöglichte, SVGs nach mehreren Versuchen mit anderen Korrekturen in Chrome anzuzeigen.
Alex Podworny

2
Welche Auswirkung hat diese Option auf den tatsächlichen SVG-Code?
Jānis Elmeris

18

Ich bin hierher gekommen, weil ich ein ähnliches Problem hatte, das Bild wurde nicht gerendert. Was ich herausfand, war, dass der Inhaltstyp-Header meines Testservers nicht korrekt war. Ich habe das Problem behoben, indem ich meiner .htaccess-Datei Folgendes hinzugefügt habe:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1
Vielen Dank. Das Setzen von Content-Type auf image / svg + xml hat das Problem behoben.
samir105

Beachten Sie, dass image/svgdie Datei zum Herunterladen angeboten wird, muss es haben +xml.
Jakub Vrána

9

Verwenden Sie <object>stattdessen (natürlich ersetzen Sie jede URL durch Ihre eigene):

.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>


6

Das Hinzufügen des width-Attributs zum [svg] -Tag (durch Bearbeiten des svg-Quell-XML) hat bei mir funktioniert: z.

<!-- 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>

3

Ich konnte Ihr Beispiel verwenden, um eine Testseite zu erstellen, und es hat einwandfrei funktioniert. Ich gehe davon aus, dass mit Ihrer SVG-Datei etwas nicht stimmt. Können Sie das auch hier einfügen? Hier ist das Beispiel, das ich verwendet habe.

 <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>

3

sieht aus wie ein Chrome-Bug, ich habe etwas anderes gemacht, da ich deswegen fast verrückt geworden bin ... mit Chrom-Debugger, wenn Sie die CSS des SVG-Objekts ändern, das auf dem Bildschirm angezeigt wird.

Also habe ich Folgendes getan: 1. Überprüfen Sie die Bildschirmgröße. 2. Hören Sie sich das "Laden" -Ereignis meines SVG-Objekts an. 3. Wenn das Element geladen wird, ändere ich sein CSS mit jQuery. 4. Es hat den Trick für mich getan

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>


2

Ich hatte ein ähnliches Problem und die vorhandenen Antworten darauf waren entweder nicht zutreffend oder funktionierten, aber wir konnten sie aus anderen Gründen nicht verwenden. Also musste ich herausfinden, was Chrome an unseren SVGs nicht mochte.

In unserem Fall stellte sich heraus, dass das idAttribut des symbolTags in der SVG-Datei ein enthält :, was Chrome nicht gefallen hat. Sobald ich das entfernt habe: , funktionierte es gut.

Schlecht:

<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>

Gut:

<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>

2

.svgDas Bild hat nicht die anfängliche Höhe und Breite. Daher ist es nicht sichtbar. Du musst es einstellen.

Sie können entweder inline oder in CSS-Datei tun:

In der Reihe:

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

CSS-Datei:

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

1

Ich habe mein SVG zunächst aus Photoshop CC exportiert und musste es manuell hinzufügen

version="1.1"in das <svg>Tag

um es auf Chrom zu zeigen.


1

In meinem Fall blieb dieses Problem bestehen, als ich das SVG mit Photoshop erstellte und speicherte. Was half, war das Öffnen der Datei mit Illustrator und das anschließende Exportieren des SVG.


Was hat sich im aktuellen SVG-Code geändert? Ich verwende weder Photoshop noch Illustrator. Ich muss eine vorhandene SVG-Datei reparieren.
Jānis Elmeris

In diesem Fall versuchen Sie @ Sharif Antwort!
Mattia Rasulo

0

Hatte das gleiche Problem. Wenn der Server richtig konfiguriert ist und .htacces nicht die Antwort ist, möchten Sie möglicherweise die eingebettete SVG-Quelle anzeigen. Meine wurden mit einem Texteditor erstellt, der in Chrome & Safari im HTML5-Code gut gerendert wurde. Nach dem Einbetten war nichts sichtbar. Dem SVG-Code wurde die richtige Version, die richtigen Abmessungen usw. hinzugefügt und funktioniert wie ein Zauber. Auch alle Stile inline.

Dh

<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>

0

Ich habe auch das gleiche Problem mit Chrom, nachdem es hinzugefügt wurde DOCTYPE, funktioniert es wie erwartet

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

Vor

    <?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>

Nach dem

    <?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>

Was ist der Unterschied zwischen diesen beiden Codefragmenten? Ich sehe es nicht.
Rgilligan

@rgilligan mein schlechtes, erstes sollte ohne doctype sein
Madan Bhandari

0

Achten Sie darauf, dass Sie keine CSS- Übergangseigenschaft für Ihre SVG-Bilder haben

Ich weiß jetzt nicht warum, aber wenn Sie Folgendes tun: "Übergang: Alle erleichtern 0,3 Sekunden" für SVG-Bilder in Chrome werden die Bilder nicht angezeigt

z.B:

* {
   transition: all ease 0.3s
  }

Chrome rendert kein SVG.

Entfernen Sie alle CSS-Übergangseigenschaften und versuchen Sie es erneut


0

Versuchen Sie bei Problemen, die Bilder zuerst mit einem Programm zu öffnen, das SVG-Bilder lesen kann.
Wenn dies fehlschlägt, ist das SVG-Image irgendwie beschädigt.

Ich hatte diesen Fall und kopierte die SVG-Pfade in ein neues SVG-Bild und passte alle Details der SVG-Tags an.

Ich habe nie den Grund getestet, warum es nicht gerendert wurde, aber angenommen, dass einige unsichtbare Sonderzeichen den Renderfehler verursacht haben. Manchmal Dateien auf dem Mac bearbeiten Ich hatte dieses Problem bereits in einem anderen Kontext.


0

Ich hatte das gleiche Problem mit einem SVG-Bild, das über das IMG-Tag enthalten war. Es stellte sich für mich heraus, dass Chrome es nicht mochte, wenn eine leere Zeile direkt oben in der Datei stand.

Ich habe die leere Zeile entfernt und mein SVG hat sofort mit dem Rendern begonnen.


0

Ich stelle sicher, dass ich den Stil des Bildes hinzufüge . Es hat bei mir funktioniert

style= "width:320; height:240"


0

Der Inhaltstyp im HTTP-Header vom Server war für mich das Problem. Ich habe einen node.js-Server, hinzugefügt:

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

Seitenname ist meine lokale Variable für das, was angefordert wird.

Ich vermute, das ist ein häufiges Problem! Ich verwende die aktuelle Version von Chrome (März 2020).


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

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.