Valeur de cette activité : 5 points
Compétence :
02- Les formes SVG

A-Module 05 : SVG : 5 points - difficulté : 2

SVG - Les formes

Présentation

Le langage SVG permet de dessiner différentes formes : cercles, rectangles, lignes, ovales, polygones et des tracés.
Consultez ce site (cliquez ici) afin d'obtenir des informations détaillées concernant les formes SVG.



Pour consulter des exemples SVG, cliquez ici.

Pour consulter un cours d'introduction au langage SVG : Cours ESI Montréal.
ou
Cours SVG Euroclid

Description


Dans cette exercice. vous dessinerez à l'aide du code SVG un personnage en utilisant les différentes formes SVG disponibles.
Vous devez obligatoirement utiliser un minimum de 4 formes différentes.
Vous devez obligatoirement utiliser un minimum de 4 couleurs différentes.


Voici un exemple du résultat attendu:






  1. Ajoutez une page à votre portfolio en affichant la directive 10787.

  2. Inscrivez les informations suivantes
    - dans le champ titre : Les FORMES SVG
    - un titre de niveau 1 : Les FORMES SVG
    - Dans le champ section : Module SVG


  3. Cliquez le bouton SVG afin d'afficher les assistants SVG
  4. D'abord cliquez le bouton SVG afin d'effectuer la déclaration XML.
    Notez que dans ce code vous devez spécifier la taille de l'affichage : <svg width="200" height="200"></svg>
    Pour insérez les différentes formes, utilisez les boutons suivants de votre barre de boutons
    - SVG_CERCLE afin de dessiner des cercles.

    - SVG_LIGNE afin de dessiner des lignes.

    - SVG_RECTANGLE afin de dessiner des rectangles.

    - SVG_LIGNES_MULTIPLES afin de dessiner des tracés.

    - ...
    Afin de vous aider à trouver les coordonnées exactes de vos formes, je vous suggère :

    Méthode 1 (suggéré)
    Inscrivez directement dans votre code les valeurs des propriétés :
    x : position à partir de la gauche de l'écran y : position à partir du haut de l'écran
    cx : position du centre à partir de la gauche de l'écran
    cy : position du centre à partir du haut de l'écran
    rx : rayon en x
    ry : rayon en y
    fill : couleur de remplissage
    stroke : couleur de la bordure

    ....

    ou
    Méthode 2

    Dessinez sur une feuille de papier votre personnage et indiquez sur cette feuille les coordonnées utilisées pour les différentes formes.
    Servez-vous de ce papier au besoin (à imprimer ou à télécharger et à utiliser avec GIMP)

    Exemple:

    ou
    Méthode 3

    1- Créez votre déclaration SVG en indiquant la dimension désirée
    2- Enregistrez votre page
    3- Affichez cette page
    4- Utilisez GIMP et faites une capture d'écran de votre zone de travail
    5- Dessinez avec GIMP vos formes
    6- Vous pourrez ainsi connaître avec exactitudes les coordonnées à utiliser.
    Exemple de capture d'écran avec GIMP :



  5. Cochez la case à cocher de correction du travail

  6. Enregistrez cette page, visualisez votre travail et apportez les corrections au besoin.

    Cette page servira à la correction de votre travail et à transmettre mes commentaires concernant ton travail.