Comment optimiser les icônes SVG pour les sites Web et les systèmes de conception
Préparez des icônes et des logos SVG pour des sites Web rapides et des systèmes de conception maintenables en contrôlant viewBox, la complexité du chemin, l'accessibilité, le style et la livraison.
Réponse rapide
Conservez un viewBox valide, supprimez les métadonnées de l'éditeur, réduisez la précision inutile du chemin, utilisez des dimensions d'icône cohérentes et décidez si les couleurs doivent être corrigées ou contrôlées par CSS. Donnez aux SVG informatifs un nom accessible et masquez les icônes décoratives des technologies d'assistance. Testez le fichier optimisé à la plus petite taille prise en charge.
Choisissez d'abord le modèle de livraison
La meilleure structure SVG dépend de la manière dont elle sera utilisée.
| Modèle de livraison | Idéal pour | Principal compromis |
|---|---|---|
Externe <img> | Logos et illustrations autonomes | Impossible de styliser les chemins internes avec la page CSS |
| SVG en ligne | Icônes d'interface thématiques et diagrammes interactifs | Ajoute un balisage au HTML |
| Icône de composant | Systèmes de conception de produits | Nécessite des conventions de construction et d'API contrôlées |
| SVG-image | Grands ensembles d'icônes réutilisables | Plus de complexité de configuration et de référence de symbole |
| Arrière-plan CSS | Images décoratives | Mauvaise adéquation avec un contenu significatif |
N'insérez pas un SVG simplement parce que c'est possible. Les images externes répétées peuvent être mises en cache ; les icônes interactives ou thématiques bénéficient davantage du balisage en ligne.
Préserver la viewBox
Le viewBox définit le système de coordonnées interne et permet une mise à l'échelle réactive. Le supprimer crée souvent un comportement fragile en termes de largeur et de hauteur. Standardisez les viewBox d'icônes lors de la création d'une bibliothèque de composants, mais n'étirez pas les illustrations dans un nouveau rapport.
Vérifiez que la géométrie visible utilise efficacement le canevas. L'excès d'espace vide donne à des icônes par ailleurs identiques un aspect mal aligné ou sous-dimensionné.
Réduisez la complexité en toute sécurité
Les exportations vectorielles peuvent contenir des espaces de noms d'éditeur, des commentaires, des calques masqués, des groupes redondants, une précision décimale excessive et des styles dupliqués. Le Optimiseur SVG supprime la surcharge de sécurité, mais chaque résultat optimisé doit toujours recevoir une vérification de régression visuelle.
Comparez ces métriques avant et après :
- Taille du fichier en octets
- Nombre de chemins et de groupes
- Longueur totale des données de chemin
- Rendu à 16, 24, 32 et 64 pixels
- Apparition dans les thèmes clairs et sombres
Ne recherchez pas le plus petit fichier possible si la simplification modifie une courbe de marque ou comble un petit écart.
Définir un contrat de couleur
Les icônes de produits utilisent souvent currentColor afin que le composant environnant contrôle leur couleur. Les marques multicolores nécessitent généralement des remplissages explicites. Documentez la règle et gardez-la cohérente.
Utilisez le Remplacement de couleur SVG pour des changements de remplissage contrôlés, puis inspectez le balisage pour vous assurer que les traits et les dégradés n'ont pas été laissés involontairement.
Rendre l'accessibilité intentionnelle
Pour une icône décorative à côté du texte visible, masquez-la de la technologie d’assistance. Pour un graphique autonome informatif, fournissez un nom accessible via le code HTML environnant ou les relations de titre et d'étiquetage SVG appropriées.
Évitez de placer le texte important uniquement à l'intérieur des chemins vectoriels décrits. Les utilisateurs ne peuvent pas sélectionner ou traduire les lettres décrites comme du texte normal, et les moteurs de recherche reçoivent moins d'informations sémantiques qu'ils ne le feraient à partir du HTML.
Sécurité pour les SVG téléchargés
SVG est un contenu XML actif. Les fichiers fournis par l'utilisateur peuvent contenir des scripts, des références externes ou des éléments inattendus. Nettoyez les fichiers SVG non fiables avant le rendu en ligne ou diffusez-les via un chemin de rastérisation/téléchargement contrôlé.
Exécutez Vérificateur de conception SVG en tant que contrôle en amont structurel, puis appliquez un désinfectant dédié dans l'application qui accepte les téléchargements publics.
Liste de contrôle du système de conception
- Utilisez une viewBox documentée et une grille d’alignement optique.
- Gardez la cohérence des noms et des accessoires des composants.
- Définissez le comportement des couleurs fixes par rapport aux couleurs thématiques.
- Testez le comportement du clavier, du lecteur d'écran et du contraste élevé, le cas échéant.
- Mesurez l’impact réel des bundles et des pages plutôt que de supposer que chaque SVG est léger.
Un système d'icônes optimisé est une interface produit, pas seulement un dossier de fichiers exportés.