5546 sujets

Sémantique web et HTML

[Résolu] Icon svg ne s'affichent pas

Bonjour,

J'ai un sprite avec des icones svg "icons.svg"

<svg xmlns="http://www.w3.org/2000/svg">
        <symbol id="cross" viewBox="0 0 20 20">
               <path d=".........
        </symbol>
.........
</svg>


Dans la page html:

<div class="icon">
    <svg><use href="sprite-icons.svg#play"></use></svg>
    <span class="access-label">An unstyled SVG icon</span>
</div>

J'ai aussi testé avec use xlink:href

la page html est au même niveau que le sprite

Je n'ai aucune icone qui s'affiche, par contre l'espace pris par le svg est bien pris en compte
Modifié par cpalo (23 Jul 2023 - 17:41)
Modérateur
Salut,

Je pense que ta syntaxe n'est pas juste.

Essaie ceci : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
        <title>Utilisation d’un symbole</title>
        <defs>
            <symbol id="cross" viewBox="0 0 20 20">
                <circle cx="10" cy="10" r="5" />
            </symbol>
        </defs>
    </svg>

    <p>
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>un cercle</title>
            <use xlink:href="#cross" />
        </svg>
    </p>
</body>
</html>

Modifié par niuxe (23 Jul 2023 - 13:12)
Ta proposition fonctionne.. je l'avais testé.
Mais ce que je souhaite c'est que les differents es svg ne soient pas en début de body mais bien dans un fichier externe. du genre sprite-icons.svg
Modérateur
C'est plutôt simple : [^1]
l'arborescence des 2 fichiers

sprite.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <defs>
        <symbol id="cross" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="5" />
        </symbol>
    </defs>
</svg>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg</title>
</head>
<body>

    <p>
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>un cercle</title>
            <use xlink:href="./sprite.svg#cross" />
        </svg>
    </p>
</body>
</html>


[^1]: tu peux même l'appeler en http ou https. Mais attention si tu es en https. Soit tu définies https soit tu commences la valeur de l'attribut par //. Si tu te plantes dans l'appel, tu shootes le https Smiley cligne
Modifié par niuxe (23 Jul 2023 - 18:27)
J'ai reproduit exactement tes deux fichiers et leur arborescence.
Le svg ne s'affiche toujours pas.
Par contre si j'affiche le code source et que je clique sur le lien du svg cela m'ouvre bien le fichier sprite.svg.
Modérateur
cpalo a écrit :
J'ai reproduit exactement tes deux fichiers et leur arborescence.
Le svg ne s'affiche toujours pas.
Par contre si j'affiche le code source et que je clique sur le lien du svg cela m'ouvre bien le fichier sprite.svg.


C'est normal, tu es en mode file (l'url dans le navigateur doit commencer par file://). C'est une chose qu'il vaut mieux éviter parce que tu n'iras pas bien loin avec ce protocole. Il te faut un serveur (apache, nginx, nodejs).

1. Si tu as php installé sur ta machine, il peut légèrement se substituer à un serveur. PHP a un petit serveur de développement
- Tu lances ton terminal,
- Tu te places sur ton dossier de travail 
cd /chemin/vers/dossier/de/travail/

- Tu tapes ceci : 
php -S localhost:8000

- Tu ouvres ton navigateur et tu te rends sur http://localhost:8000

2. Si tu as Python3 installé, tu as également un petit serveur :
- Tu lances ton terminal,
- Tu te places sur ton dossier de travail 
cd /chemin/vers/dossier/de/travail/

- Tu tapes ceci : 
python3 -m http.server 8000

- Tu ouvres ton navigateur et tu te rends sur http://localhost:8000

tu es sur Mac ou Linux ou Windows ?
Modifié par niuxe (23 Jul 2023 - 20:20)
Meilleure solution
l'étourdi!!
J'ouvrais le fichier à partir de l'explorateur de Windows.!!!
J'ai Xampp et en allant ouvrir le fichier à partir de 127.0.0.1 , les svg s'affichent.
Merci
Prévenir un modérateur
Répondre au sujet
Aller à