Icônes SVG

Les icônes SVG sont des images SVG, utilisées comme icônes ou boutons d'images dans des applications Web ou mobiles. Les icônes SVG peuvent également être utilisées pour les logos. Ce tutoriel sur les icônes SVG explique comment créer vos propres icônes SVG et où télécharger des icônes SVG préfabriquées de haute qualité.

Les avantages des icônes SVG

Les avantages d'utiliser des icônes SVG sont qu'elles peuvent être facilement agrandies ou réduites proportionnellement, en fonction de l'emplacement où elles doivent être affichées dans l'application et de la taille de l'écran sur lequel l'application est affichée. Les icônes SVG ont des avantages sur les graphiques bitmap, car elles restent bien proportionnées lors de l'agrandissement ou de la réduction, tandis que les graphiques bitmap deviennent pixelisés lors de l'agrandissement et perdent en qualité lors de la réduction (pixels).

Utiliser des icônes SVG dans les applications Web

Comme mentionné précédemment, il existe plusieurs méthodes pour afficher SVG dans les navigateurs WebDans les navigateurs WebAfficher SVG, en tant que partie de la page HTML. Cependant, pour afficher l'icône SVG, utiliser l'élément img HTML est le plus simple, l'élément img HTML peut facilement agrandir ou réduire la taille de l'icône SVG.

Voici l'élément d'exemple qui affiche l'icône SVG :

<img src="svg-icon.svg">

Pour agrandir ou réduire la taille de l'icône SVG, utilisez simplement les attributs CSS width ou height. Voici un exemple d'élément img avec l'attribut CSS Height Style ajouté :

<img src="svg-icon.svg" style="height:32px">

Pour maintenir les proportions de l'icône SVG lors de son agrandissement ou de sa réduction, définissez uniquement l'une des valeurs width ou height - et ne pas pouvoir les définir en même temps. Lorsque vous définissez l'une des deux valeurs pour la largeur, le navigateur agrandit ou réduit l'icône SVG sur l'autre axe pour que l'icône SVG conserve ses proportions.

Créer vos propres icônes SVG

Parfois, vous pourriez avoir besoin de créer vos propres icônes SVG. Une icône SVG est une image SVG incluse dans son propre fichier SVG. Voici un icône circulaire très simple composé de l'élément SVG circle :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="
　　　　<circle cx="64"cy="64"r="64"style="fill: #00ccff;"></circle>
</svg>

Voici l'apparence de cet icône SVG affiché avec l'élément img :

Cependant, lorsque vous utilisez l'élément img pour afficher cet icône SVG et que vous agrandissez ou réduisez la taille de l'élément img, l'icône SVG ne s'agrandit ni ne se réduit. Au lieu de cela, il affichera plus ou moins la feuille de dessin SVG. Voici l'ajout de l'attribut CSS Height pour32Exemple :

Veuillez noter que comment ne montrer qu'une partie du cercle, plutôt que de réduire proportionnellement tout le cercle.

La cause de ce problème est que le fichier d'image SVG manque de certaines informations. Vous devez définir une valeur pour l'attribut viewBox de SVG. L'attribut viewBox de SVG spécifie combien de la feuille de dessin SVG doit être affiché (dans les directions X et Y).

Dans notre exemple, nous voulons uniquement afficher la partie de la feuille de dessin SVG contenant l'icône en cercle. Cette zone s'étend de l'origine 0,0 au point128,128le rayon du cercle est de64, avec64,64au centre). En utilisant l'attribut Viewbox SVG, nous pouvons spécifier que seule cette région du canevas SVG doit être rendue. Voici l'apparence de l'icône circulaire SVG avec la valeur de Viewbox définie :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0　128　128">
　　　　<circle cx="64"cy="64"r="64"style="fill: #00ccff;"></circle>
</svg>

C'est l'icône SVG affichée, avec des hauteurs respectives de32、48et64Pixels :