Jannah Theme License is not validated, Go to the theme options page to validate the license, You need a single license for each domain name.
Design graphique

Les avantages de l’utilisation des images SVG sur votre site web

Les graphiques vectoriels évolutifs, ou SVG, jouent un rôle important dans la conception des sites web aujourd’hui. Si vous n’utilisez pas actuellement le SVG dans votre travail de conception de sites web, voici quelques raisons pour lesquelles vous devriez commencer à le faire, ainsi que des solutions de repli que vous pouvez utiliser pour les anciens navigateurs qui ne prennent pas en charge ces fichiers.

Contenu

Résolution

Le plus grand avantage du SVG est l’indépendance de la résolution. Comme les fichiers SVG sont des graphiques vectoriels (par opposition aux images tramées basées sur des pixels), vous pouvez les redimensionner sans perdre la qualité de l’image. Cela 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 de périphériques. Vous pouvez augmenter ou diminuer la taille des fichiers SVG pour répondre aux besoins changeants de votre site web réactif en termes de taille et de mise en page sans compromettre leur qualité.

En général, les SVG ont un aspect plus lisse et plus net que les images d’autres formats, quelle que soit leur taille.

Taille du fichier

La taille des fichiers est l’une des difficultés que pose l’utilisation d’images tramées (par exemple JPG, PNG, GIF) sur des sites web réactifs. Les images tramées n’étant pas à l’échelle comme les images vectorielles, vous devez livrer vos images en pixels dans la taille la plus grande à laquelle elles seront affichées. En effet, il est toujours possible de réduire la taille d’une image et de conserver sa qualité, mais il n’en va pas de même pour les images plus grandes. Le résultat est que les images sont beaucoup plus grandes que la taille à laquelle elles sont affichées, ce qui oblige les navigateurs à télécharger de gros fichiers.

Psssssst :  Définition et caractéristiques des polices à l'ancienne

En revanche, les graphiques vectoriels sont évolutifs, ce qui permet d’utiliser des fichiers de très petite taille, quelle que soit la taille des images à afficher. Cela permet d’optimiser les performances globales d’un site et sa vitesse de téléchargement.

Stylisme CSS

Vous pouvez facilement ajouter le SVG directement au HTML d’une page. C’est ce qu’on appelle le SVG en ligne. L’un des avantages de l’utilisation du SVG en ligne est que, comme les graphiques sont en fait dessinés par le navigateur, il n’est pas nécessaire d’envoyer une requête HTTP pour récupérer un fichier image.

Autre avantage : vous pouvez styliser le SVG en ligne avec le CSS. Vous avez 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 le CSS pour modifier les SVG pour les états de survol et d’autres besoins de conception.

Animations

Comme vous pouvez styliser des fichiers SVG en ligne avec du CSS, vous pouvez également utiliser des animations CSS sur ceux-ci. Les transformations et les transitions CSS sont deux moyens faciles d’ajouter de la vie aux SVG. Vous pouvez obtenir de riches expériences de type Flash sur une page sans utiliser Flash – ce que l’iPad ne prend plus en charge. En fait, Adobe est en train de supprimer progressivement Flash d’ici la fin de 2020.

Psssssst :  Un guide rapide sur la couleur pourpre et son utilisation dans l'édition

Utilisations du SVG

Aussi puissants que soient les SVG, ils ne peuvent pas remplacer tous les autres formats d’image. Les photos qui nécessitent une riche profondeur de couleurs doivent toujours être au format JPG ou PNG, mais les images simples comme les icônes sont parfaitement adaptées pour être exécutées en SVG.

Le SVG convient également pour certaines illustrations complexes, telles que les graphiques, les diagrammes et les logos d’entreprise. Tous ces graphiques ont l’avantage d’être évolutifs et de pouvoir être stylisés avec du CSS.

Soutien aux navigateurs plus anciens

Le support actuel du SVG est très bon dans les navigateurs web modernes. Les seuls navigateurs qui ne prennent pas en charge ces graphiques sont les anciennes versions d’Internet Explorer (version 8 et inférieure) et quelques anciennes versions d’Android. Dans l’ensemble, un très faible pourcentage de la population des internautes utilise encore ces navigateurs, et ce nombre continue de diminuer. Cela signifie que vous pouvez utiliser le SVG sur votre site web sans inquiétude.

Si vous souhaitez fournir une solution de repli pour le SVG, utilisez un outil tel que Grumpicon du Filament Group. Cette ressource permet de créer des PNG à partir de vos fichiers d’images SVG.

Bouton retour en haut de la page

Adblock détecté

Veuillez désactiver votre bloqueur de publicités pour pouvoir visualiser le contenu de la page. Pour un site indépendant avec du contenu gratuit, c’est une question de vie ou de mort d’avoir de la publicité. Merci de votre compréhension! Merci