Tutoriel de conception Web: SVG

Qu’est-ce qu’un SVG?

Avant de commencer à parler des SVG, faisons un bref aperçu des différents types de fichiers image trouvés sur le Web. Le tableau ci-dessous présente les différents types de fichiers et le meilleur cas d’utilisation pour chaque type:

Semblable aux jpgs et aux gifs, un SVG est, par essence, une image. Plus précisément, SVG signifie «graphique vectoriel évolutif». Le mot sur lequel se concentrer vraiment ici est «évolutif». Contrairement à d’autres types de fichiers, un SVG peut s’agrandir ou se réduire sans aucune réduction de l’apparence visuelle de l’image elle-même. Les SVG sont maintenant largement pris en charge par la plupart des navigateurs à l’exception d’Internet Explorer 8, et seulement partiellement pris en charge pour les navigateurs Android 4.3 et versions antérieures.Dans l’exemple ci-dessous, vous voyez une image .png qui a été redimensionnée, par rapport à un SVG qui a été redimensionné:

L’image png devient très floue lorsqu’elle est redimensionnée au-delà de sa taille naturelle, tandis que le SVG conserve une apparence nette et claire. Cela signifie que vous pouvez charger le même fichier SVG plusieurs fois sur votre site et conserver la possibilité de manipuler les différentes dimensions à votre guise.

Pourquoi SVG?

Polyvalence

Alors pourquoi auriez-vous besoin d’une image à l’échelle comme le fait le SVG? L’évolutivité des images est cruciale pour un site réactif. Lorsqu’un site est construit de manière réactive, les images doivent s’adapter à différentes largeurs pour différents appareils tels que les téléphones, les tablettes et les ordinateurs de bureau. Avoir une image équipée pour ce faire améliore l’esthétique globale et l’expérience utilisateur d’un site.

Performance

Un autre grand avantage de l’utilisation d’un SVG est que votre navigateur n’a pas besoin de faire une requête http pour les obtenir. Avec d’autres types d’images, vous écririez quelque chose comme ceci dans le HTML:

À son tour, le navigateur dit: « Ok, laissez-moi suivre cette adresse et allez trouver cette image pour vous, puis je vais continuer et la diffuser sur cette page. » Les SVG, cependant, sont de petits extraits de code XML qui peuvent être inclus directement sur la page. Enregistrer ces requêtes http à divers endroits de votre site peut réduire le poids global de la page et accélérer le temps de chargement de vos utilisateurs.

Interaction avec CSS et Javascript

L’aspect le plus intéressant de l’utilisation des SVG est peut-être leur capacité à ajouter des améliorations de style et de fonctionnalité avec d’autres langages comme CSS et Javascript. Étant donné que les SVG ne sont que des blocs de code, ils ont des propriétés modifiables que vous pouvez manipuler pour styliser et animer. Consultez le Codepen ci-dessous pour voir cela en action:

Voir le stylo mJKeBv par Moyens I/O Services (@volusion) sur CodePen.

Comment commencer à utiliser les SVG sur votre vitrine

Le processus d’implémentation d’un SVG dans le corps HTML de votre site est un peu différent de la façon dont vous avez l’habitude d’incorporer une image standard. Il existe aujourd’hui quelques méthodes différentes, mais par souci de simplicité, nous n’en aborderons qu’une seule.

Exemple: Ajout d’une icône Facebook SVG pour créer un lien vers la page Facebook de votre boutique.

1. Copiez le code de l’icône. N’oubliez pas de changer votre lien vers l’URL de votre page Facebook.

   <a href="INSERT-URL-HERE" title="Our Facebook Page" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="50px" height="50px"><path fill="#3B5998" d="M512 0c-282.624 0-512 229.376-512 512s229.376 512 512 512 512-229.376 512-512-229.376-512-512-512zM663.552 301.056c0 0-51.2 0-71.68 0-25.6 0-30.72 10.24-30.72 36.864 0 21.504 0 63.488 0 63.488h102.4l-10.24 110.592h-92.16v330.752h-132.096v-329.728h-68.608v-112.64h68.608c0 0 0-16.384 0-88.064 0-82.944 44.032-125.952 142.336-125.952 16.384 0 91.136 0 91.136 0l1.024 114.688z"></path></svg></a>

2. Collez le code directement dans le HTML de votre site. Vous pouvez le faire dans l’éditeur de fichier HTML de modèle ou même dans une page d’article. Assurez-vous que la vue de code est sélectionnée comme illustré dans la capture d’écran ci-dessous.

Ressources

Dans Moyens I/O Creative Services, nous utilisons quotidiennement des SVG pour nos créations. Nous référençons constamment les vastes ressources SVG sur le Web, et comme cet article est un aperçu très basique, nous avons pensé partager nos outils et articles SVG préférés avec vous.