Valeur de cette activité : 5 points
Compétence :
08- SVG Les liens

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

SVG Les liens

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 et des animations.

Nous allons voir ici qe nous pouvons utiliser les liens web dans un fichier SVG.

Pour consulter des exemples SVG, cliquez ici.

Pour consulter un cours d'introduction au langage SVG :
Cours SVG Euroclid



Description


Notez que 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, en utilisant l'exemple offert sur la page :http://w3schools.com/svg/tryit.asp?filename=trysvg_text5 créez un document SVG qui contiendra :

- Un lien web sur une forme circulaire



Étape 1 : Création de votre fichier SVG



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




  5. Affichez cet exemple de lien SVG afin de comprendre la structure d'un lien SVG
    http://w3schools.com/svg/tryit.asp?filename=trysvg_text5

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

  7. 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="500" height="500"></svg>

    -Insérez ensuite dans ce code en vous servant de vos boutons SVG_LIEN et SVG_ELLIPSE
    - Un cercle de couleur ayant un contour d'une autre couleur
    - Un lien sur ce cercle vers un site traitant du langage SVG (trouvez un site en utilisant le moteur de recherche Google)

  8. Ajoute maintenant un rectangle de couleur ayant un contour d'une autre couleur.
    - Insère un lien sur ce rectangle vers un autre site traitant du langage SVG
  9. Cochez la case à cocher de correction du travail

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