Seconde > SNT > La photographie numérique > 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

     

  • 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%    

     

  • 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

     

  • 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.

  • Question 5

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

La correction et les astuces de cet exercice t'intéressent ?

Accède librement à l'ensemble des contenus, aux astuces et aux corrections des exercices en t'abonnant sur Les Bons Profs. Clique ici pour démarrer l'abonnement.