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.

google-chrome svg Jason Van Vuren
quelle
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!

Sharif Yazdian
quelle
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>
Knall
quelle
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.

MintWelsh
quelle
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
user87312
quelle
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>
Erweitern Sie das Snippet

Essem
quelle
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>
Silas Palmer
quelle
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>
RestingRobot
quelle
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>
Erweitern Sie das Snippet

Yossi Ben-David
quelle
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>
Mike Willis
quelle
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;
}
Krzysztof Janiszewski
quelle
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.

Andy Nguyen
quelle
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.

Niels Vanhorenbeeck
quelle
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>
Uku
quelle
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>
Madan Bhandari
quelle
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

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

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

pwbred
quelle
0

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

style= "width:320; height:240"

pensebien
quelle
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).

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

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