5568 sujets

Sémantique web et HTML

Sprite SVG externe

Bonjour,
J'ai un sprite d'icone svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="icon-angle-down" viewBox="0 0 24 24">
             <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
             <path fill="none" d="M0 0h24v24H0V0z"/>
        </symbol>
</svg>

J'appelle l'icone ( et cela fonctionne) :

<svg class="svg-icon">
    <use href="img/icons-sprite.svg#icon-angle-down">
</svg>

J'aurai préferé le sprite directement dans le head:

<link rel="preload" as="image" href="img/icons-sprite.svg" type="image/svg+xml">

et appeler l'icone

<svg class="svg-icon">
    <use href="#icon-angle-down">
</svg>

Mais cela ne fonctionne pas
Bonsoir,

Cet appel correspondrait à un SVG intégré directement dans le HTML :
<svg class="svg-icon">
    <use href="#icon-angle-down">
</svg>

Le fait de faire un preload d'une ressources ne change rien à l'emplacement de son fichier, cet appel reste donc d'actualité :
<svg class="svg-icon">
    <use href="img/icons-sprite.svg#icon-angle-down">
</svg>
Meilleure solution
Effectivement si je mets le sprite directement après le <body> avec 

<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>

L'appel de l'icone ainsi fonctionne.

<svg class="svg-icon">
    <use href="#icon-angle-down">
</svg>

J'avais mal compris l'usage du preload.
Par contre en php, mon idée fonctionne

<?php
	ob_start();
	include('icons-sprite.php');
	$icons = ob_get_contents();
	ob_end_clean();
?>



<body>
    <?php echo $icons; ?>
cpalo a écrit :
Par contre en php, mon idée fonctionne.

Oui, car vous avez configuré votre PHP pour qu'il injecte directement le SVG source dans le HTML et non plus à partir d'un fichier externe. Tout dépend comment on souhaite rendre son HTML.
Personnellement je fais appel à un fichier externe pour mes SVG (exemple en ligne), c'est mieux pour la mise en cache.
Modifié par Olivier C (14 Oct 2023 - 12:45)
Prévenir un modérateur
Répondre au sujet
Aller à