La révolution vectorielle

La navigateurs web supportent désormais quasiment tous les dessins vectoriels (svg), qui s’affichent directement dans les pages web, comme les autres images habituelles ‘bitmap’ (jpg, png, gif).

Avec la révolution mobile, les évolutions gagnent également la gestion des images.

Plus d’aliasing !

L’aliasing est l’effet de pixellisation des images lorsqu’elles sont agrandies au point de rendre visibles les pixels qui les compose. Cet effet oblige à créer différentes versions d’images en fonction de leur utilisation, rendant plus complexe leur utilisation. A contrario, les images vectorielles sont des dessins composées de ‘vecteurs’, composant des formes librement agrandissables à l’infini sans perte de qualité. Le format vectoriel reconnu nativement par les navigateur est le SVG, pour Scalable Vector Graphics.

svg no aliasing versus bitmap aliasing
Comparaison d’aliasing entre bitmap et SVG

Le bénéfice principal des images SVG est leur capacité à être redimensionnables sans perte de qualité (aliasing).

Les bénéfices des images vectorielles
Au delà du simple redimensionnement, les images vectorielles présentent de nombreux aspects bénéfiques :

  • images responsives
  • plus besoin de décliner les images en différentes tailles pour le web
  • modifiables très facilement (fichier texte)
  • styles applicables sur les éléments constitutifs
  • animations / interactions …

Exemple d’image SVG

Quelques agrandissements d’une même image SVG. On notera l’absence d’aliasing quel que soit la résolution.



Détail / zoom

 



WebExpress développe et intègre nativement
les images vectorielles dans les créations de site web


Glossaire
Aliasing : effet mosaïque lors d’un agrandissement poussé d’une image bitmap
Bitmap : images matricielles (png, bmp, gif, jpg)
SVG : Scalable Vector Graphics

Crédit image vectorielle : tiddlywiki5 / Duarte Farrajota Ramos

En savoir plus:
SVG / Wikipedia

 

Astuce pour Office : Depuis la version 2016, la suite Office gère nativement l’inclusion d’images SVG dans les documents. En revanche pour les versions antérieures, ce format n’est pas proposé dans les formats importables. Il existe néanmoins une solution : ouvrir le fichier SVG avec le logiciel gratuit Inkscape, y copier l’image dans le presse-papier (CTRL+C), et la coller dans le document Office (CTRL+V). (Testé sous Office 2007 par exemple)

Vous pourriez aussi aimer...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *