Chrome ne rend pas SVG référencé via la balise <img>

95

Je rencontre des problèmes avec Google Chrome qui ne rend pas svg avec une balise img. Cela se produit lors de l'actualisation de la page et du chargement initial de la page. Je peux faire apparaître l'image en "Inspecting Element" puis en cliquant avec le bouton droit sur le fichier svg et en ouvrant le fichier svg dans un nouvel onglet. L'image svg sera ensuite rendue sur la page d'origine.

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

Totalement perplexe ici quant à la nature du problème. L'image svg rend bien dans IE9 et FF mais pas dans Chrome ou Safari.

J'ai également mes types MIME définis. (image / svg + xml)

EDIT: Voici une simple page html que j'ai créée pour illustrer mon problème.

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

Comme vous pouvez le voir, j'essaie d'utiliser un fichier svg à la fois dans une balise img et en css comme image de fond. Aucun des deux ne fonctionne sur le chargement initial de la page dans Chrome ou Safari. Lorsque j'inspecte l'élément, cliquez avec le bouton droit sur svg ou cliquez sur le lien pour charger svg dans une autre fenêtre, le fichier svg sera rendu dans l'onglet d'origine.

google-chrome svg Jason Van Vuren
la source
1
Pouvez-vous mettre un exemple ou publier un exemple de code ici?
Sirko
Nous devons vraiment être capables de voir et de reproduire cela nous-mêmes si vous voulez de l'aide.
Phrogz
Par hasard, votre "Aged-Brass.svg" contenait-il une image intégrée? J'ai eu le même problème, et c'est ce à quoi je l'ai retracé ...
McGarnagle

Réponses:

125

Un moyen simple et facile; selon https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Vous devez ouvrir le fichier .SVG avec un éditeur de texte (comme le bloc-notes) et le modifier

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

à:

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

cela a fonctionné pour moi!

Sharif Yazdian
la source
9
C'est une solution de travail. J'ai rencontré ce problème lors de l'exportation d'un objet vectoriel intelligent au format SVG à l'aide de Photoshop.
Mikhail
10
Cela a sauvé la vie, passé des heures à essayer de comprendre quel était le problème. Merci!!
mhodges
2
De même, cela a résolu mon problème, j'ai également passé beaucoup de temps à essayer de comprendre pourquoi l'image ne s'affichait pas.
MrEvers
3
Je n'avais pas cette ligne de code dans le fichier SVG, et l'ajouter dans la balise <svg> n'a rien fait pour moi.
Pete
2
Cela devrait être très haut. Tu as sauvé ma journée.
Mattia Rasulo le
42

La balise svg a besoin de l'attribut namespace xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>
coup
la source
Ce. Et j'ai dû le charger comme image d'arrière-plan d'un div.
casey
1
Le svg a toujours besoin de l'espace de noms. Assurez-vous simplement qu'il est défini dans le fichier SVG que vous utilisez comme arrière-plan.
coup
30

Je suis venu ici parce que j'ai eu le même problème, lorsque j'inspecte l'élément, je peux voir le fichier, mais sur le site je ne peux pas (même en utilisant localhost)

la réponse à mon problème était de sauvegarder le fichier SVG. Si vous l'avez enregistré à partir d'illustrator, assurez-vous de cliquer sur «incorporer» et non sur «lien». comme lien se référera simplement à vos fichiers locaux plutôt que d'inclure les données (si je comprends bien). entrez la description de l'image ici

J'ai lu à ce sujet sur le site Web d'Adobe qui contient d'autres conseils utiles pour l'exportation http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Cela a fonctionné pour moi, j'espère que cela a été utile.

MentheWelsh
la source
1
Quelqu'un sait-il s'il existe un moyen de le faire avec un objet intelligent dans Photoshop? Ouvrir illustrator et réexporter avec cette option dans illustrator était la seule chose qui me permettait d'afficher des svgs dans chrome, après plusieurs tentatives d'autres correctifs.
Alex Podworny
2
Quel effet cette option a-t-elle sur le code SVG réel?
Jānis Elmeris
19

Je suis venu ici parce que j'avais un problème similaire, l'image n'était pas rendue. Ce que j'ai découvert, c'est que l'en-tête de type de contenu de mon serveur de test n'était pas correct. Je l'ai corrigé en ajoutant ce qui suit à mon fichier .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
user87312
la source
1
Merci. La définition de Content-Type sur image / svg + xml l'a corrigé.
samir105 le
Notez que image/svgpropose le fichier pour le téléchargement, il doit avoir +xml.
Jakub Vrána
10

Utilisez à la <object>place (bien sûr, remplacez chaque URL par la vôtre):

.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>
Développer l'extrait

Essem
la source
6

L'ajout de l'attribut width à la balise [svg] (en éditant le XML source svg) a fonctionné pour moi: par exemple:

<!-- 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
la source
3

J'ai pu utiliser votre exemple pour créer une page de test, et cela a très bien fonctionné. Mon hypothèse est qu'il y a quelque chose qui ne va pas avec votre fichier svg. Pouvez-vous coller cela ici aussi? Voici l'exemple que j'ai utilisé.

 <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>
ReposRobot
la source
3

ressemble à un bug Chrome, j'ai fait autre chose car je suis presque devenu fou à cause de cela ... en utilisant le débogueur Chrom si vous modifiez le css de l'objet svg qu'il montre à l'écran.

donc ce que j'ai fait était: 1. vérifier la taille de l'écran 2. écouter l'événement "load" de mon objet SVG 3. quand l'élément est chargé je change son css en utilisant jQuery 4. ça a fait l'affaire pour moi

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>
Développer l'extrait

Yossi Ben-david
la source
2

J'avais un problème similaire et les réponses existantes à cela n'étaient pas applicables ou fonctionnaient, mais nous ne pouvions pas les utiliser pour d'autres raisons. J'ai donc dû comprendre ce que Chrome n'aimait pas dans nos SVG.

Dans notre cas, il s'est avéré que l' idattribut de la symbolbalise dans le fichier SVG contenait un :, ce que Chrome n'aimait pas. Dès que j'ai retiré le: cela a bien fonctionné.

Mal:

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

Bien:

<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
la source
2

.svgl'image n'a pas sa hauteur et sa largeur initiales. Par conséquent, ce n'est pas visible. Vous devez le définir.

Vous pouvez le faire en ligne ou dans un fichier css:

En ligne:

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

Fichier CSS:

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

.image {
    width: 100px;
    height: 50px;
}
Krzysztof Janiszewski
la source
2

Dans mon cas, ce problème a persisté lorsque j'ai créé et enregistré le svg à l'aide de Photoshop. Ce qui a aidé, c'est d'ouvrir le fichier à l'aide d'Illustrator et d'exporter le svg par la suite.

Niels Vanhorenbeeck
la source
Qu'est-ce qui a changé dans le code SVG actuel? Je n'utilise ni Photoshop ni Illustrator, je dois réparer un fichier SVG existant.
Jānis Elmeris
Dans ce cas, essayez la réponse @Sharif!
Mattia Rasulo le
1

J'ai initialement exporté mon svg de Photoshop CC et j'ai dû ajouter manuellement

version="1.1" dans le <svg> tag

pour l'afficher sur chrome.

Andy Nguyen
la source
1

Le type de contenu dans l'en-tête HTTP du serveur était le problème pour moi. J'ai un serveur node.js, ajouté:

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

pageName est ma variable locale pour ce qui est demandé.

Je suppose que c'est un problème courant! J'utilise la version actuelle de Chrome (mars 2020).

Badman Goodman
la source
0

Avait le même problème. Si le serveur est configuré correctement et que .htacces n'est pas la solution, vous pouvez rechercher la source svg que vous intégrez. Les miens ont été créés avec un éditeur de texte, bien rendu sur Chrome & Safari à l'intérieur du code html5, une fois intégré, rien n'était visible. Ajout de la version correcte, des dimensions, etc. au code svg et fonctionne comme un charme. En outre, tous les styles en ligne.

C'est à dire

<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
la source
0

J'ai également eu le même problème avec chrome, après l'ajout, DOCTYPEcela fonctionne comme prévu

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

Avant

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

Après

    <?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
la source
Quelle est la différence entre ces deux extraits de code? Je ne le vois pas.
rgilligan
@rgilligan mon mauvais, le premier était censé se passer de doctype
Madan Bhandari
0

Attention à ne pas avoir de transition propriété de css pour vos images svg

Je ne sais pas pourquoi maintenant, mais si vous faites: "transition: toute facilité 0.3s" pour l'image svg sur Chrome les images n'apparaissent pas

par exemple:

* {
   transition: all ease 0.3s
  }

Chrome ne rend pas svg.

Supprimez toute propriété css de transition et réessayez

wilo087
la source
0

En cas de problème, essayez d'abord d'ouvrir les images avec un programme capable de lire des images svg.
Si cela échoue, alors l'image svg est en quelque sorte corrompue.

J'ai eu ce cas et j'ai copié les chemins svg dans une nouvelle image svg et ajusté tous les détails des balises svg.

Je n'ai jamais testé la raison pour laquelle il ne rendait pas, mais supposons que certains signes spéciaux invisibles ont causé l'erreur de rendu. Obtenir parfois des fichiers modifiés sur Mac J'ai déjà eu ce problème dans un autre contexte.

David
la source
0

J'avais le même problème avec une image SVG incluse via la balise IMG. Il s'est avéré pour moi que Chrome n'aimait pas qu'il y ait une ligne vide directement en haut du fichier.

J'ai supprimé la ligne vide et mon SVG a immédiatement commencé le rendu.

pwbred
la source
0

Je m'assure d'ajouter le style de l'image . Ça a marché pour moi

style= "width:320; height:240"

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

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