Valeur de cette activité : 5 points
Compétence :
05- SVG-Le stylage

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

SVG stylage

Présentation

Les formes et le texte SVG peuvent être remplis de différentes façons, avec des couleurs, des dégradés ou des motifs. Pour compléter la définition des propriétés d'une forme ou de texte, on utilise l'attribut style, qui permet de gérer l'apparence des objets.

Nous allons voir ici quelles sont les propriétés de stylage les plus courantes.

Consultez ce site : cliquez ici afin d'obtenir des informations détaillées concernant les groupes 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


Notez qu'à partir de maintenant, les directives ne seront plus présentées dans le détails.
La tâche vous sera décrite et une référence vous sera donnée.
Ainsi, vous serez en mesure d'améliorer votre autonomie dans votre processus d'apprentissage.

La tâche sera un peu plus difficile car vous aurez à :
- identifier le contenu à apprendre
- identifier et récupérer le code à utiliser
- utiliser ce code afin de produire votre travail

Le temps requis afin d'effectuer votre travail sera plus long mais cette méthode vous permettra de mieux comprendre et retenir les concepts et leur utilisation.


Notez également que vous pouvez afficher la source d'un fichier SVG en utilisant le CLIC DROIT / AFFICHER LA SOURCE.

Dans cette exercice, vous devez créer un document SVG qui contiendra :

- un rectangle ayant une couleur de fond de votre choix
- ainsi qu'une couleur de bordure de votre choix
- deux lignes horizontales ayant une épaisseur de trait différente
- deux cercles ayant une même couleur mais une opacité différentes
- deux lignes pointillés différentes
- deux textes ayant une taille et une police différentes

Consultez au besoin cette liste de propriétés SVG


  1. Ajoutez une page à votre portfolio en affichant la directive 13058.
    Complétez les informations suivantes :
  2. dans le champ titre : Le stylage SVG
  3. Dans le champ section : Module SVG
  4. un titre de niveau 1 : Le stylage SVG


    Afin de dessiner vos formes et textes, utilisez les boutons de la barre de boutons SVG.



  5. Cliquez le bouton SVG afin d'afficher les assistants SVG
  6. Cliquez ensuite 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="500" height="500"></svg>

    -Insérez ensuite dans ce code (en vous servant des exemples données sur la page :http://www.gin-ebsi.umontreal.ca/blt6336/tutorielsvg/tutorielsvg.html) chacun des éléments requis suivants :

    - un rectangle ayant une couleur de fond de votre choix : paramètre : fill:blue;
    - ainsi qu'une couleur de bordure de votre choix : paramètre : stroke:blue;

    - deux lignes horizontales ayant une épaisseur de trait différente : paramètre : stroke-width:2;

    - deux cercles ayant une même couleur mais une opacité différentes : paramètre : fill-opacity:0.8; ou stroke-opacity:0.2;

    - deux lignes pointillés différentes : paramètre : stroke-dasharray: 8 15;

    - deux textes ayant une taille et une police différentes : paramètre : font-family:Arial;



  7. Cochez la case à cocher de correction du travail

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