Imagerie numérique: Image vectorielle

Images vectorielles.

Les images de ce type sont composées de forme géométriques primitives assemblées entre elles. Il est donc plus adapté au dessin. On pourra appliquer facilement à ces formes différentes transformations: changement des couleurs, de taille, appliquer une bordure ...etc

Télécharger (SVG, 311KB)

Les formats vectoriels sont très utilisés pour des images simples, mais ne peuvent pas être utilisés pour encoder des images plus complexe (par exemple des photos...)

On manipule ce type d'image, par exemple pour dessiner dans un traitement de texte:

La barre d'outil du traitement de texte libreoffice writer: permet d'ajouter flèche, carré et autres objets vectoriels

La barre d'outil du traitement de texte libreoffice writer: permet d'ajouter flèche, carré et autres objets vectoriels

matricielle vectoriel

source: https://fr.wikipedia.org/wiki/Image_vectorielle

Logiciels et formats des images vectorielles:

Ils sont très nombreux, parmi eux:

  • Le format standard: SVG, manipulé par des logiciels comme Inkscape, Illustrator, ou encore svg-edit
  • Les logiciels de Dessin Assisté par Ordinateur manipule souvent des formats "propriétaires": EPS pour illustrator, EWG pour Autocad

Encodage des images vectorielles

Chaque objet qui constitue l'image vectorielle est encodé dans le fichier qui constitue l'image.
Un objet est défini par une "balise" qui identifie le type de forme. Les balises sont entourée de < et > Par exemple, cette instruction défini un rectangle, avec un largeur de 20 et un hauteur de 10:

<rect width=20 heigth=10>

Définition des couleurs

les couleurs sont définies par un code qui va de 000000 à FFFFFF .

Le nombre F, en hexadécimale vaut 15. Si les langages informatiques utilise des lettres pour écrire les nombres au dessus de 10, c'est parce que c'est plus pratique qu'il soit écrit sur un seul caractère

Le noir à pour code 000000
Le blanc à pour code FFFFFF
On peut utiliser les deux millions de nombre pour décrire des couleurs, ce qui correspond aux différentes couleurs que peut discerner l’œil humain.
Pour notre rectangle, si on veut que le contenu soit de couleur NOIR, il suffirait d'ajouter

<rect width=20 heigth=10 fill=000000 >

Si on veut lui ajouter une bordure de couleur Blanche:

<rect width=20 heigth=10 fill=000000 border-color=FFFFFF >

En fait les deux premiers caractéres du code décrit la quantité de Rouge (00 -> pas de rouge, FF -> Maximum de rouge). Les deux suivants, la quantité de vert et les deux derniers la quantité de bleu.

Par exemple la couleur FF00FF indique une mélange de rouge et de bleu, ce qui donne un rose-violet

De nombre site internet permettent de voir à quelle couleur correspond un code (par exemple https://htmlcolorcodes.com/fr/ )