136 votes

Chrome ne rend pas les SVG référencés via l'élément <img>.

J'ai des problèmes avec google chrome qui ne rend pas les svg avec un img élément. Cela se produit lors de l'actualisation de la page et lors du chargement initial de la page. Je peux faire apparaître l'image en "inspectant l'élément" puis en faisant un clic droit sur le fichier svg et en ouvrant le fichier svg dans un nouvel onglet. L'image svg sera alors affichée sur la page d'origine.

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

Je ne comprends pas du tout ce qui se passe. L'image svg s'affiche correctement dans IE9 et FF, mais pas dans Chrome ou Safari.

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

EDITAR: Voici une page html simple 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;
        }

        #image_element {
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="image_element">
        <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 un fichier img et dans css en tant qu'image d'arrière-plan. Ni l'un ni l'autre ne fonctionne lors du chargement initial de la page dans chrome ou safari. Lorsque j'inspecte l'élément, je fais un clic droit sur le svg ou je clique sur le lien pour charger le svg dans une autre fenêtre, le fichier svg s'affiche dans l'onglet d'origine.

186voto

Sharif Yazdian Points 310

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 modifier les éléments suivants

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

à :

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

ça a marché pour moi !

72voto

bang Points 1835

L'étiquette svg a besoin de l'attribut d'espace de noms xmlns :

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

30voto

MintWelsh Points 1062

Je suis venue 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 peux pas (même en utilisant localhost)

la réponse à mon problème se trouvait dans l'enregistrement du fichier SVG. Si vous l'avez sauvegardé à partir d'Illustrator, assurez-vous de cliquer sur "embed" et non sur "link", car le lien fera référence à vos fichiers locaux au lieu d'inclure les données (si j'ai bien compris). enter image description here

Je l'ai lu sur le site 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 c'est utile.

30voto

user87312 Points 395

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 du type de contenu de mon serveur de test n'était pas correct. J'ai résolu le problème en ajoutant ce qui suit à mon fichier .htaccess :

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

15voto

Essem Points 163

Utilisation <object> (bien entendu, 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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X