Cours Stage - Images matricielles et vectorielles

Création d'un logo avec SVG

L'énoncé

Dans cet exercice, nous allons créer une image vectorielle pour le logo d'un hôtel en Egypte : l'Osiris Hotel. Comme vu précédemment, une image vectorielle est définie par une succession de formes géométriques.

Nous utiliserons le format d'image vectorielle SVG (Scalable Vector Graphics) qui est basé sur le langage de balisage XML. Nous réaliserons cette image avec l'éditeur en ligne CodePen https://codepen.io/LesBonsProfs/pen/ExYWZwR.

 LogoOsirisHotel

Utilisation de SVG

- Le SVG permet de créer des formes simples ou complexes. Chaque forme est généralement accompagnée d'attributs pour en décrire les propriétés.

Pour créer un cercle, on utilise la balise <circle>. Les attributs cx et cy décrivent les coordonnées du centre du cercle, et r le rayon.

Pour créer un rectangle, on utilise la balise <rect> en spécifiant la longueur et la largeur avec les attributs width et height. Les attributs x et y permettent de décrire la position du coin supérieur gauche.

Pour créer des formes plus complexes, on utilise la balise <path> qui n'a qu'un seul attribut obligatoire : d (pour data).

Pour écrire du texte, on utilise la balise <texte> dont on développera les attributs plus tard.

Enfin, pour gérer la couleur et la transparence de nos formes, on utilise les attributs fill et fill-opacity. Par défaut, notre forme sera noire. Dans cet exercice, nous utiliserons le codage hexadécimal des couleurs.

 

Exemple :  Voici ce que l'on obtient avec le code suivant :

<rect x="0" y="0" width="25" height="15" />
<rect x="30" y="10" width="25" height="15" fill="orange" />
 

Exemple SVG

 


Question 1

A l'intérieur des balises <svg> ... </svg>, créez deux cercles à partir des propriétés suivantes :

Prop.  cx cy rayon couleur
Cercle 1 50 50 50 #ffcc00
Cercle 2  20 20 20  #fffae6

 

Entre les balises <svg> et </svg>, on ajoute les lignes :

<circle cx="50" cy="50" r="50" fill="#ffcc00" />
<circle cx="20" cy="20" r="20" fill="#fffae6" />

L'ordre de déclaration des attributs n'a pas d'importance. A l'inverse, l'ordre des balises défini l'ordre d'affichage des formes : ici, le Cercle 2 est placé sur le Cercle 1.

Question 2

Les attributs rx et ry permettent de modifier l'arrondit des bordures d'un rectangle. Créez maintenant 4 rectangles dont les propriétés sont les suivantes :

 Prop. x y longueur largeur couleur opacité rx ry
Rect. 1 20 30 25 51 #f5993d   1 1
Rect. 2 20 78 25 2 #000000 10%    
Rect. 3 0 80 100 10 #99ccff   1 1
Rect. 4  0 80 100 2 #ffffff 20%    

 

A la suite des balises <circle> et toujours à l'intérieur de la balise <svg>, on ajoute :

<rect x="20" y="30" width="25" height="51" rx="1" ry="1" fill="#f5993d" />
<rect x="20" y="78" width="25" height="2" fill="#000000" fill-opacity="0.1" />

<rect x="0" y="80" width="100" height="10" rx="1" ry="1" fill="#99ccff" />
<rect x="0" y="80" width="100" height="2" fill="#ffffff" fill-opacity="0.2" />

L'attribut qui défini l'opacité de la forme attend un paramètre compris entre 0 et 1.


Par exemple, une opacité de 50% correspond à un paramètre de valeur 0,5.

Question 3

Pour le texte, les attributs font-size et font-family spécifient la taille et la police d'écriture. Les attributs font-weight et font-style décrivent le poids (normal ou gras) et le style (normal, italique ou oblique) de la police. On écrit le texte entre les balises <text> ... </text>.

Utilisez les instructions ci-dessus pour écrire "Osiris Hotel" avec les propriétés :

 Prop. x y taille police poids style
Osiris 50 50 13 Broadway gras normal
Hotel 50 60 11 Brush Script MT normal italique

 

A la suite des balises <rect> on ajoute :

<text x="50" y="50" fill="#ffffff" font-size="13" font-family="Broadway" font-weight="bold">OSIRIS</text>
<text x="50" y="60" fill="#ffffff" font-size="11" font-family="Brush Script MT" font-style="italic">Hotel</text>

Il n'est pas nécessaire de préciser le poids ou le style du texte lorsque celui-ci est de type "normal".

Question 4

Les éléments précédents permettent de créer des formes simples, mais SVG permet aussi de créer des formes plus complexes avec l'élément path qui peut correspondre à tout type de tracé (chemin).

Voici les commandes de l'attribut d:

- M prend comme paramètre les coordonnées du premier point du tracé ;

- L trace une ligne entre les dernières coordonnées mentionnés ; 

- Z ferme le tracé.

La syntaxe de l'attribut suit la forme : d="M x1,y1 L x2,y2 Z".

Pour créer le triangle, il faudra dont créer 3 points puis fermer le tracé. Voici les coordonnées des trois points (l'ordre importe peu) : (30, 80), (60, 50) et (90, 80).

Le code couleur du triangle est #f5b83d.

La pyramide est placée derrière le bâtiment et devant les cercles. Entre les balises <circle> et <rect>, on ajoute la ligne décrivant la forme d'un triangle :

<path d="M 30,80 L 60,50 L 90,80 Z" fill="#f5b83d" />

Pour créer le triangle, il faut donner les coordonnées du premier point du tracé (M), tracer une ligne (L) vers le deuxième point, une autre vers le troisième puis fermer le tracé (Z).

Question 5

Le gérant fait une capture d'écran du logo, quelle est le type d'image obtenu ?

L'image obtenue ne prendra plus compte des formes géométriques, mais de la couleur des pixels. Elle sera donc matricielle.

Essayez de faire la même manipulation. Regardez le format de l'image obtenue et déduisez-en son type.