Les graphiques vectoriels évolutifs, ou SVG, jouent aujourd'hui un rôle important dans la conception de sites Web. Si vous n'utilisez pas actuellement SVG dans votre travail de conception Web, voici quelques raisons pour lesquelles vous devriez commencer à le faire, ainsi que des solutions de rechange que vous pouvez utiliser pour les navigateurs plus anciens qui ne prennent pas en charge ces fichiers.
Résolution
Le plus grand avantage de SVG est l'indépendance de la résolution. Étant donné que les fichiers SVG sont des graphiques vectoriels (par opposition aux images raster basées sur des pixels), vous pouvez les redimensionner sans perdre en qualité d'image. Ceci est particulièrement utile lorsque vous créez des sites Web réactifs qui doivent être beaux et fonctionner correctement sur une large gamme de tailles d'écran et d'appareils. Vous pouvez augmenter ou réduire les fichiers SVG pour les adapter aux besoins changeants de taille et de mise en page de votre site Web réactif sans compromettre leur qualité de quelque manière que ce soit.
Généralement, les SVG ont une apparence plus lisse et plus nette que les images d'autres formats, quelle que soit leur taille.
Taille du fichier
L'un des défis liés à l'utilisation d'images raster (par exemple, JPG, PNG, GIF) sur des sites Web réactifs est la taille du fichier. Étant donné que les images raster ne sont pas mises à l'échelle de la même manière que les images vectorielles, vous devez fournir vos images basées sur des pixels dans la plus grande taille à laquelle elles seront affichées. En effet, vous pouvez toujours réduire une image et conserver sa qualité, mais il n'en va pas de même pour agrandir des images. Le résultat est des images bien plus grandes que la taille à laquelle elles sont visualisées, ce qui oblige les navigateurs à télécharger des fichiers volumineux.
En revanche, les graphiques vectoriels sont évolutifs, vous pouvez donc utiliser des fichiers de très petite taille, quelle que soit la taille de ces images à afficher. Cela optimise finalement les performances globales et la vitesse de téléchargement d'un site.
Style CSS
Vous pouvez facilement ajouter du SVG directement au HTML d'une page. C'est ce qu'on appelle le SVG en ligne. L'un des avantages de l'utilisation de SVG en ligne est que, comme les graphiques sont en fait dessinés par le navigateur, il n'est pas nécessaire d'effectuer une requête HTTP pour récupérer un fichier image.
Autre avantage: vous pouvez styliser le SVG en ligne avec le CSS. Besoin de changer la couleur d'une icône SVG ? Au lieu de modifier cette image dans un logiciel d'édition graphique, puis d'exporter et de télécharger à nouveau le fichier, vous pouvez modifier le fichier SVG simplement avec quelques lignes de CSS. Vous pouvez également utiliser CSS pour modifier les SVG pour les états de survol et d'autres besoins de conception.
Bottom Line
Parce que vous pouvez styliser les fichiers SVG en ligne avec CSS, vous pouvez également utiliser des animations CSS dessus. Les transformations et transitions CSS sont deux moyens simples d'ajouter de la vie aux SVG. Vous pouvez obtenir des expériences riches de type Flash sur une page sans utiliser Flash, que l'iPad ne prend plus en charge. En fait, Adobe supprime progressivement Flash d'ici la fin de 2020.
Utilisations de SVG
Aussi puissants que soient les SVG, ils ne peuvent pas remplacer tous les autres formats d'image. Les photos qui nécessitent une profondeur de couleur riche doivent toujours être au format-j.webp
SVG convient également à certaines illustrations complexes, telles que des graphiques, des diagrammes et des logos d'entreprise. Tous ces graphiques bénéficient d'être évolutifs et de pouvoir être stylisés avec CSS.
Prise en charge des anciens navigateurs
La prise en charge actuelle de SVG est très bonne dans les navigateurs Web modernes. Les seuls navigateurs qui ne prennent pas en charge ces graphiques sont les anciennes versions d'Internet Explorer (que Microsoft ne prend plus en charge) et quelques anciennes versions d'Android. Dans l'ensemble, un très petit pourcentage de la population de navigation utilise encore ces navigateurs, et ce nombre continue de diminuer. Cela signifie que vous pouvez utiliser SVG sur votre site Web sans souci.
Si vous souhaitez fournir une alternative pour SVG, utilisez un outil tel que Grumpicon du groupe Filament. Cette ressource crée des-p.webp
