La stylisation des SVG avec CSS offre de nombreuses possibilités créatives, mais nécessite de comprendre les différences entre les méthodes d'intégration. En choisissant l'approche adaptée à vos besoins spécifiques et en suivant les bonnes pratiques, vous pouvez créer des graphiques vectoriels attrayants, accessibles et parfaitement intégrés à votre interface utilisateur.
Le format SVG peut paraître parfois un peu intimidant, et l'associer à des transitions ou des animations CSS semble encore plus audacieux pour bon nombre de personnes.
Cependant, dans certains cas, l'alchimie entre SVG et CSS est aussi bénéfique qu'extrêmement simple à mettre en oeuvre. Dans ce tutoriel, nous allons suivre étape par étape comment animer un bouton burger simple avec SVG et CSS.
Faire un bouton SVG accessible : tout un art !
Etape 4 : Remote SVG Symbol§
Notre nouvelle solution devrait donc ajouter les contraintes suivantes :
qui évite des tonnes de requêtes
qui ne passe pas par une font pour des questions de poids et d’accessibilité
qui soit facile à changer lors d’une interaction
- qui puisse être téléchargé à la demande (ex : à l’ouverture d’une modale)
- qui puisse être mis en cache entre chaque page
Pour régler ces nouvelles contraintes, la solution est de faire en sorte que les icones soient récupérés de manière externe. En effet, si nous reprenons la manière dont on a écrit le SVG à l’endroit où on veut afficher l’icone, nous avions une balise use:
<use href="#icon-home"></use>
Celle-ci passe par un attribut href parce qu’en réalité on n’est pas obligé de définir une ancre dans la page courante. On peut aller chercher la définition SVG à une autre URL.
Ainsi plutôt que de mettre votre SVG qui contient la liste de <defs> au sein de la page, nous allons l’enregistrer dans son propre fichier:
<!-- /images/icon-defs.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<defs>...</defs>
</svg>
A ce moment là, nous pourrons changer notre balise use afin qu’elle utilise la nouvelle URL:
-<use href="#icon-home"></use>
+<use href="/images/icon-defs.svg#icon-home"></use>
Grâce à cela, la liste d’icone se retrouve en dehors de la page HTML et pourra donc être téléchargé et mis en cache au même titre que n’importe quel asset externe.
⚠️ Attention toutefois, il y a une contrainte forte : votre SVG distant doit impérativement être hébergé sur le même nom de domaine. Si ce n’est pas le cas, les navigateurs vont considérer que c’est une faille de sécurité et votre icone ne marchera pas.
Beaucoup d'icones téléchargeables au format SVG
Ce document propose quelques recommandations pour les éléments graphiques (icônes SVG) utilisées dans l’interface SPIP.
Et voici comment afficher les SVG en miniatures dans l'explorateur de Windows.
Bonnes pratiques pour intégrer des images SVG dans une page web de manière accessible.
Un outil en ligne d'optimisation des SVG
Redimensionner un .svg qui n'a pas été prévu pour n'est pas possible dans tous les cas :(
Quelles sont les différentes méthodes pour insérer un SVG dans une page web ?
Quand un intégrateur de talent explique en détail comment il a réalisé sa page web... Ça décoiffe !
SVG et accessibilité. Bonnes pratiques et mise en œuvre.
Comment intégrer SVG dans ses productions web d'une manière qui fonctionne !
Comment gérer correctement les icones SVG dans un site web.
Des arguments pour ne pas utiliser les polices d'icones (en particulier, l'accessibilité)
Un Générateur d'avatar produisant du SVG
SVG comme vecteur de XSS ?
FireFox ne fera jamais 100 à ACID 3 parce que ce serait stupide et contre productif !
Sozi est un petit programme qui permet de jouer des présentations animées.
Contrairement aux outils de présentation classiques, un document Sozi n'est pas organisé comme un diaporama. Il s'agit plutôt d'un poster où la disposition du contenu est entièrement libre. Le déroulement de la présentation consiste en une succession de translations, zooms et rotations permettant de focaliser l'attention sur les éléments que vous voulez montrer.