Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
Comment les images SVG peuvent faciliter l’intégration Web ?

Comment les images SVG peuvent faciliter l’intégration Web ?

12 novembre 2014Par Patrick Colbert
Catégories :

Qu’est-ce qu’une image SVG?

Le terme SVG signifie « Scalable Vector Graphics ». Une image SVG est une image vectorielle basée sur le langage XML permettant l’agrandissement et l’animation de celle-ci. Les images SVG, qui sont en fait des fichiers textes, peuvent être indexées par le fureteur. Elles peuvent aussi être créées ou modifiées avec un éditeur de texte, mais cela reste encore beaucoup plus facile d’utiliser un logiciel vectoriel pour le faire.

Tous les navigateurs supportent ce format d’image, à l’exception d’IE8, Android 2.3 et les versions antérieures. (À noter qu’il y a moyen d’avoir un « fallback » avec une autre image pour l’utilisateur qui utilise IE8.)

Pourquoi utiliser une image SVG ?

  • La qualité d’une image vectorielle n’est pas altérée à l’agrandissement.
  • Une image SVG reste belle, même sur les écrans Retina.
  • Vous avez beaucoup plus de contrôle sur une image SVG.
  • Une image SVG permet l’animation et la modification CSS (couleur, hover, etc.).

Comment l'utiliser ?

Il y a plusieurs façons d’utiliser une image SVG.

La première façon est assez simple puisqu’il suffit d’utiliser la balise <img> traditionnelle puis d’inscrire la source de l’image. La balise <img> permet seulement d’agrandir ou de réduire l’image SVG. Il est néanmoins possible de l’agrandir à l’infini, elle restera toujours claire et net. C’est un avantage important par rapport aux autres formats d’images, surtout pour les sites Web adaptatifs (conçu en responsive).

[img]tag-img.jpg|||||[/img]

La deuxième façon consiste à utiliser en CSS la propriété background-image  ou le raccourci background. Cette façon est très semblable à la première mais reste très limitée puisque là encore, elle n’offre pas la possibilité de modifier l’image.

[img]tag-css.jpg|||||[/img]

Les deux précédentes méthodes sont beaucoup moins intéressantes puisqu’elles ne permettent pas de modifier l’image comme bon nous semble, contrairement à la suivante qui laisse davantage de liberté.

Cette troisième façon consiste à mettre le code SVG directement dans votre page HTML. Pour obtenir le code SVG, vous pouvez :

  • Ouvrir l’image avec un éditeur de texte,
  • Utiliser, au moment de sauvegarder votre image, l’option pour avoir le code SVG.

[img]inline.jpg|||||[/img]

Avant de copier/coller votre code SVG, vous pouvez l’optimiser afin d’économiser du temps de chargement et des données pour votre serveur et l’utilisateur.

Cliquez ici pour optimiser votre code

Une fois votre code optimisé, vous pouvez faire ce que vous voulez avec votre image. Beaucoup de développeurs utilisent les images SVG pour réaliser les icônes ou les boutons de leur site : cela leur permet d’avoir une image responsive modifiable qui reste de qualité.

Plus d'exemples, plus de fonctionnalités

Prenons l’exemple des icônes de réseaux sociaux en SVG. Le code HTML ressemblerait à ceci :

[img]icone-facebook.jpg|||||[/img]

Ensuite, vous pouvez utiliser la classe de chaque image pour lui assigner les couleurs, les couleurs de survol, les transitions voulues, les animations, etc.

[img]icone-css1.jpg|||||[/img]

Le fill permet de modifier la couleur de l’icône. Le transform permet la rotation de l’icône. La transition fait l’animation ou la transition entre le hover et la classe normale.

Les SVG peuvent aller très loin, comme le démontre l’exemple avec un site responsive, sur le site Web de DESIGNMODO.

Sur le site de CSS-TRICKS, vous trouverez une liste assez complète des fonctionnalités relatives aux images SVG.