Valeur de cette activité : 5 points
Compétence :
01- Débuter avec SVG

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

Débuter avec SVG

Présentation

Qu'est-ce que SVG.
C'est un acronyme pour Scalable Vector graphic.


ATTENTION, les directives des activités de ce module sont écrites pour utiliser le langage SVG conjointement avec le navigateur FIREFOX.

Ce langage rend possible la création d'images ou même d'animations intéressantes.

Voyez par vous-même une illustration des possibilités avançées : Le Puzzle Vidéo

Définition
SVG est une recommandation du W3C, basée sur XML, qui permet de décrire des dessins vectoriels en 2D. Le SVG permet de gérer trois types d'objets graphiques :
les formes vectorielles (courbes, lignes, polygones, etc.)
les textes
les images.

J'ai participé à un concours de création d'un logo pour lequel le logo présenté devait être au format SVG. Je n'ai pas gagné le coucours mais je vous présente ci-dessous le logo que j'ai présenté :


Société des rhododendrons du Québec
Pour télécharger le plug-in, cliquez ici
Pour consulter un cours d'introduction au langage SVG :


Cours SVG Euroclid

ou
Cours SVG KevLinDev

Passons à la pratique maintenant!
Cet exercice consiste à insérer un fichier SVG dans une page web.

Description




  • Cliquez ici afin de voir un exemple complet (et complexe) de l'utilisation du langage SVG.


    1. IMPORTANT : Ajoutez une page à votre portfolio en affichant la directive 10285 qui contiendra :
      A- dans le champ titre : Débuter avec SVG
      B- un titre de niveau 1 : Débuter avec SVG
      C- Dans le champ section : Module SVG
      D- Numéro de directive : 10285


    2. Cliquez le bouton SVG afin d'afficher les assistants SVG

    3. Cliquez le bouton SVG de la barre de bouton SVG afin d'effectuer la déclaration XML.

      Notez que dans ce code vous pouvez spécifier la taille de l'affichage : <svg width=200 height=200></svg>

    4. Modifiez selon vos besoins les valeurs des paramètres width et height

    5. Placez votre curseur entre les balise SVG et /SVG et cliquez le bouton SVG_RECTANGLE de la barre de bouton SVG afin d'insérer le code de création d'un rectangle ( ou insérez une forme de votre choix).



    6. Modifiez les différents paramètres à votre goût.
      Les différents paramètres sont :
      Position en x ou position horizontale
      Position en y ou position verticale
      Largeur
      Hauteur
      Largeur de trait (ligne)
    7. Ajoutez deux autres rectangles de positions, tailles et couleurs différentes

    8. Cochez la case à cocher de correction du travail

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