Pourquoi devriez-vous utiliser SVG sur votre site Web
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 à utiliser SVG, ainsi que des solutions de rechange pour les anciens navigateurs 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 variété de tailles d’écran et d’appareils. Vous pouvez agrandir ou réduire les fichiers SVG pour s’adapter aux besoins changeants de taille et de mise en page des sites Web réactifs sans affecter leur qualité de quelque manière que ce soit.
En général, SVG a une apparence plus lisse et plus nette que les images dans d’autres formats, quelle que soit leur taille.
Taille du fichier
L’un des défis de 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 comme les images vectorielles, vous devez fournir des images basées sur des pixels à leur taille maximale pour qu’elles s’affichent. En effet, vous pouvez toujours réduire une image et conserver sa qualité, mais pas la mettre à l’échelle. Le résultat est que la taille des images est beaucoup plus grande qu’elles ne sont vues, obligeant le navigateur à télécharger des fichiers volumineux.
En revanche, les graphiques vectoriels sont évolutifs, vous pouvez donc utiliser une très petite taille de fichier, quelle que soit la taille de l’image à afficher. Cela optimise finalement les performances globales et la vitesse de téléchargement du site Web.
Styles CSS
Vous pouvez facilement ajouter du SVG directement au code 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 réellement dessinés par le navigateur, aucune requête HTTP n’est requise pour obtenir le fichier image.
Autre bonus : vous pouvez utiliser CSS pour styliser les SVG en ligne. Besoin de changer la couleur d’une icône SVG ? Au lieu de modifier l’image dans un logiciel d’édition graphique, puis d’exporter et de télécharger à nouveau le fichier, vous pouvez modifier le fichier SVG avec seulement quelques lignes de CSS. Vous pouvez également utiliser CSS pour modifier le SVG pour les états de survol et d’autres besoins de conception.
animation
Parce que vous pouvez utiliser CSS pour styliser les fichiers SVG en ligne, vous pouvez également utiliser des animations CSS sur ceux-ci. Les transformations et transitions CSS sont deux moyens simples d’ajouter de la vie à SVG. Vous pouvez obtenir une expérience riche de type Flash sur vos pages sans utiliser Flash, qui n’est plus pris en charge sur l’iPad. En fait, Adobe supprimera progressivement Flash d’ici la fin de 2020.
Utilisations du SVG
Aussi puissants que soient les SVG, ils ne remplacent pas tous les autres formats d’image. Les photos qui nécessitent une profondeur de couleur riche doivent toujours être au format JPG ou PNG, mais les images simples comme les icônes fonctionnent bien pour être exécutées en tant que SVG.
SVG convient également à certaines illustrations complexes, telles que les graphiques, les graphiques et les logos d’entreprise. Tous ces graphiques bénéficient de l’extensibilité et de la possibilité d’ê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 (qui ne sont plus prises en charge par Microsoft) et certaines anciennes versions d’Android. Dans l’ensemble, un petit pourcentage de navigateurs utilisent encore ces navigateurs, et ce nombre continue de diminuer. Cela signifie que vous pouvez utiliser SVG sur votre site Web en toute confiance.
Si vous voulez vraiment un repli pour SVG, utilisez un outil comme Grumpicon de Filament Group. Cette ressource crée des PNG à partir de vos fichiers image SVG.
Merci de nous en informer!
Dites-nous pourquoi !
D’autres détails ne sont pas assez difficiles à comprendre
