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…

Publier sur un site internet : l’édition par objets

Une nouvelle génération d’éditeurs en ligne, déployés dans les sites internet, permet de décomposer la rédaction d’un article en plusieurs modules adaptés spécifiquement à chaque type de contenu. Cela révolutionne, à mon avis, non seulement le travail du rédacteur qui apporte du contenu au quotidien, mais aussi celui de concepteur et de réalisateur d’un site internet.

lire plus

Des logiciels gratuits et « portables »

Des logiciels qui n’encombrent et ne ralentissent pas notre ordinateur, des applications que l’on peut déplacer d’une clé USB à un disque dur comme avec nos documents de travail, et que l’on peut dupliquer d’un ordinateur à un autre aussi facilement que … le dernier film téléchargé, est-ce un rêve trop beau pour devenir réalité ? Eh bien non : les logiciels « portables » sont là pour ça !

lire plus

La vidéo en « background »

Un tendance actuelle, dans les sites internet, est de valoriser au maximum l’image pour transmettre un message explicite ou implicite. Images de grande taille, diaporamas, vidéos constituent des éléments essentiels pour une bonne « expérience utilisateur ». Encore peu utilisée, la vidéo en fond d’écran conduit le visiteur dans une ambiance toute particulière.

lire plus