Les images vectorielles sur nos sites internet

Moins connues que les images JPEG ou PNG, que nous publions régulièrement sur nos sites internet, les images vectorielles sont bien supportées par les navigateurs modernes. Elles offrent de nouvelles possibilités d’affichage, et ont un potentiel tout à découvrir dans le dessin technique et les applications interactives.

Si vous naviguez sur internet avec un vieil ordinateur, en utilisant un navigateur de l’ancienne génération, alors cet article n’est pas pour vous. Mais c’est dommage, car vous ne pourrez pas profiter des avantages offerts par les images vectorielles.

Les images vectorielles, à la différence des JPEG et PNG que l’on appelle images « matricielles », sont composées d’un ensemble d’objets, où chaque objet est défini avec des attributs qui en précisent les caractéristiques. Finalement, ce sont des assemblages de « vecteurs » : des formes géométriques définies par des formules mathématiques adaptées à chaque type de forme.

Par exemple, un cercle sera défini ainsi :

<circle
 r="40"
 cy="45"
 cx="161"
 style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-opacity:1" />

où « r » définit le rayon, « cy » et « cx » sa position, et « style » les couleurs du cercle et de son contour.

Quel est l’avantage ? Il suffit de modifier ces paramètres pour obtenir tout type de cercles dans notre image. Et cela, on peut le faire dynamiquement, en interaction avec un mouvement de la souris, l’appui sur une touche du clavier, une information reçue par internet, un paramètre que l’on a programmé dans la configuration de notre système. Et en multipliant la valeur de « r » par un coefficient, on redimensionne immédiatement l’image.

 

Format de fichier et logiciels pour le traitement

Le format le plus utilisé pour les images vectorielles est le SVG : « Scalable Vector Graphics » (en français « graphique vectoriel adaptable »).

Un très bon logiciel Open Source permet de créer et manipuler les images SVG : c’est Inkscape, disponible pour toutes les plateformes.

Voir : https://inkscape.org/fr

On trouve aussi la version « portable » d’Inkscape, par exemple dans la Liberkey. Voir l’article « Des logiciels gratuits et portables ».

Essayez vous-même !

Dans l’exemple à côté, les différents éléments constituant l’image vectorielle sont modifiés ou déplacés de façon indépendante les uns des autres.

On pourrait programmer des séquences d’effets, qui s’exécuteraient automatiquement dès que la page est chargée dans le navigateur. Cette méthode remplace avantageusement l’ancienne technologie Flash pour les animations dans les encadrés publicitaires.

image/svg+xml
Modifiez les réglages de l'image

Réglage 1


Réglage 2


Réglage 3


Réglage 4


Réglage... ultime !

De plus, les images vectorielles évitent toute pixellisation quand elles sont agrandies (on appelle cela « l’aliasing »), gardant toujours des profils nets et des angles bien définis.

Finalement, quand on peut utiliser ce type d’images, on a que des avantages :

  • responsive : l’image s’adapte à la taille de l’écran de façon optimale. On n’a plus besoin de décliner différentes tailles d’images pour l’affichage, par exemple, d’un logo
  • modifiable facilement, même automatiquement et dynamiquement, par le code inséré dans la page
  • styles, animations et interactions gérables séparément pour chaque objet constituant l’image

Quand utiliser les images vectorielles ?

Pour les photos le format vectoriel n’est pas adapté. Les images vectorielles montrent toute leur valeur dans des applications de cartographie, dans les schémas et les plans, dans le dessin géométrique même en 3D, dans les formes stylisées et les dessins.

Elles acceptent un niveau de zoom pratiquement infini, ne provoquant pas l’effet d’aliasing qui limiterait l’agrandissement au delà d’une certaine taille (voir l’exemple plus bas).

Exemple de pixellisation, en agrandissant une image matricielle.

L’image vectorielle, par contre, garde toujours ses formes bien propres.

 


Zoom sur l'image

Où trouver des images vectorielles ?

Il est souvent nécessaire de produire soi-même les images dont on a besoin : un logo, des bandeaux d’annonce, des boutons personnalisés, des textes obliques ou courbés etc.

Mais des nombreux sites proposent des collections d’images vectorielles, que l’on peut télécharger et modifier selon ses besoins. Voilà par exemple quelques banques d’images libres de droit :

Et quelques
coups de coeur !

Quelques exemple de dessins vectoriels élaborés.

Une petite galerie de dessins bien intéressants

D’autres articles qui pourraient vous intéresser…

Cinéma et Pâques

Mars 2020… confinement à la maison à cause du COVID-19… On approche la fête de Pâques dans la perspective étonnante, pour les chrétiens pratiquants, de ne pas pouvoir se rendre à l’église. De nombreuses initiatives sont en cours pour permettre aux croyants de trouver en ligne du ressourcement, de l’accompagnement, de la spiritualité. Pour ma part, je propose une escapade cinématographique, à faire de chez soi, avec trois films qui mettent en scène la résurrection du Christ.

lire plus

Oui, j’ai réalisé un film

Oui, j’ai réalisé un film !

C’est n’est pas dans mon coeur du métier, c’est clair. Pourtant, j’ai réalisé un film !

C’était une idée, qui est devenue un rêve, puis une opportunité, et finalement un projet. Et bien sûr un sujet qui en valait la peine, des amis prêts à me soutenir, un financement, des professionnels compétents.

Et on peut le visionner sur internet.

lire plus

Les GIFs animés, cette vieillerie toujours sur la brèche

Savez-vous qu’est-ce que c’est un GIF ? C’est un fichier représentant une image, à l’instar des formats plus connus JPG ou PNG : c’est en quelque sorte leur ancêtre. Pourtant, loin de disparaître de nos pages internet au profit de standards plus modernes et performants, il bénéficie d’un regain d’intérêt grâce à une fonctionnalité qui le caractérise : l’animation.

lire plus