web-dev-qa-db-fra.com

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

Je rencontre des problèmes avec Google Chrome qui ne rendent 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 obtenir l'image à afficher en cliquant sur "Inspecting Element", puis en cliquant avec le bouton droit de la souris sur le fichier svg et en l'ouvrant dans un nouvel onglet L'image svg sera alors rendue sur la page d'origine.

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

Totalement à perte ici quant à quel est le problème. L'image svg rend bien dans IE9 et FF mais pas dans Chrome ou Safari.

Mes types MIME sont également définis. (image/svg + xml)

EDIT: Voici une simple page html que j’ai construite 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 constater, j'essaie d'utiliser un fichier svg dans une balise img et dans css en tant qu'image d'arrière-plan. Ni travailler sur le chargement de la page initiale en chrome ou safari. Lorsque j'inspecte l'élément, faites un clic 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-chromesvg
55
Jason Van Vuren

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

la réponse à mon problème était de sauvegarder le fichier SVG . Si vous l'avez sauvegardé depuis illustrator, assurez-vous de cliquer sur "incorporer" et non sur "lien". en tant que lien, vous vous référez simplement à vos fichiers locaux plutôt que d'inclure les données (si je le comprends bien) .enter image description here

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

Cela a fonctionné pour moi, espérons que cela a été utile.

25
MintWelsh

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

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

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 (même bloc-notes) et changer 

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

à:

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

cela a fonctionné pour moi!

18
Sharif Yazdian

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

Source: http://kaioa.com/node/45

13
user87312

Utilisez plutôt <object> (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>

5
Essem

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

Dans notre cas, il s'est avéré que l'attribut id de la balise symbol du fichier SVG contenait un :, ce que Chrome n'a pas aimé. Dès que j'ai enlevé 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>
2
Mike Willis

J'ai pu utiliser votre exemple pour créer une page de test, et cela a 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'échantillon 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>
2
Jlange

ressemble à un bug de Chrome, J'ai fait quelque chose d'autre 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érifiez la taille de l'écran 2. écoutez 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>

2
Yossi Ben-david

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

1
Niels Vanhorenbeeck

J'ai d'abord exporté mon fichier svg à partir de Photoshop CC et je devais ajouter manuellement 

version="1.1" dans la balise <svg> 

pour le montrer sur chrome. 

1
Andy Nguyen

Ajouter l'attribut width à la balise [svg] (en modifiant le code source svg) a fonctionné pour moi: 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>
1
Silas Palmer

Vous vous assurez d’ajouter le style de l’image 

style= "width:320; height:240"
0
Emma

L'image .svg n'a pas sa hauteur et sa largeur initiales. Donc ce n'est pas visible. Vous devez le définir.

Vous pouvez faire en ligne ou en 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;
}
0
Krzysztof Janiszewski

Avait le même problème. Si le serveur est configuré correctement et que .htacces n'est pas la solution, vous voudrez peut-être consulter la source svg que vous intégrez. Les miens ont été créés avec un éditeur de texte, rendu bien sur Chrome et Safari dans le code html5, une fois incorporé, rien n’était visible . La version correcte, les dimensions, etc.

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

J'ai également le même problème avec Chrome. Après avoir ajouté DOCTYPE, cela 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>
0
Madan Bhandari

Veillez à ne pas avoir la propriété transition css pour vous svg images

Je ne comprends pas pourquoi, mais si vous faites: "transition: all eas 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 toutes les propriétés de transition css et réessayez

0
wilo087

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

J'ai eu ce cas et 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 s'agissait pas d'un rendu, mais supposons que des signes spéciaux invisibles aient causé l'erreur de rendu. Obtenir parfois des fichiers édités sur Mac J'ai déjà eu ce problème dans un autre contexte.

0
David