L'objet SVG

L'objet svg permet de rendre une image svg interactive. Une image construite dans le logiciel Inkscape. L'image doit être construite dans ce but en respectant les règles définies ci-après. Les types d'interactivités sont les suivantes :

• Appliquer une couleur de fond sur une zone
• Déposer dans une zone un figuré ponctuel (une petite image)
• Écrire du texte dans une zone.

Dans son fonctionnement, l'élève sélectionne un élément de la légende puis l'applique sur une ou plusieurs zones réactives de l'image. Dans la conception de l'image svg, le paramétrage de l'élément de la légende détermine le type d'interactivité.

Mise en œuvre

En mode Ébauche sélectionner l'outil Image SVG dans la seconde barre d'outils «commun». Une fenêtre s'ouvre pour rechercher l'image SVG sur l'ordinateur puis cliquer sur «importer». En haut à gauche de la page se trouve alors l'objet Image SVG qu'on doit redimensionner et déplacer à l'endroit voulu.

Paramétrage

Un seul paramètre disponible. Possibilité d'afficher en plein écran pour placer l'icône permettant l'affichage en plein écran.

Correction

Interface de l'onglet Correction

Définir la note à attribuer et d'éventuels pénalités en cas d'erreur sur les différents types d'action.

Consignes sur la conception du fichier SVG

L'image SVG doit contenir deux éléments. Une carte, un schéma, un dessin... et une légende. Dans chacun des éléments, doit figurer des consignes décrivant l'interactivité souhaitée. Ces consignes sont décrites par la présence d'attribut. Un attribut possède un nom et une valeur.

Deux exemples de fichier SVG :

• Colorier deux drapeaux (allemand 1^ière année)
• L'Europe et sa construction ( histoire 3^ième )

Les attributs de légende

Il doit y avoir dans le fichier SVG un élément contenant l'attribut id avec pour valeur "legende". Cela indique la zone de la légende. Cet élément «legende» contient tous les éléments de la légende y compris une image portant l'attribut id="pencilLegende" (attention à la majuscule L après pencil). Cette image, servant de pointeur, dans l'exemple ci-dessous, représente un crayon pointant l'élément actif de la légende qui servira de modèle à appliquer.

Dans l'exemple ci-dessous la légende contient le crayon et deux rectangles dont la couleur de fond servira de modèle.

légende au départ

légende lorsque la couleur a été choisie

code SVG de l'image

<g
       id="legende"
       inkscape:label="legende"
       style="display:inline">
      <rect
         style="fill:#ffffff;fill-opacity:1;stroke:#110e0e;stroke-width:0.3;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect1408"
         width="15.572619"
         height="7.4083333"
         x="163.73927"
         y="57.905952"
         legende="fill" />
      <rect
         style="fill:#8b38c6;fill-opacity:1;stroke:#110e0e;stroke-width:0.3;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect1410"
         width="15.572619"
         height="7.4083333"
         x="163.89046"
         y="68.665672"
         legende="fill" />
      <image
         width="5.7452383"
         height="6.954762"
         preserveAspectRatio="none"
         xlink:href="data:image/png;base64,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 "
         id="pencilLegende"
         x="195.03009"
         y="41.720097"
         style="clip-rule:evenodd;display:inline;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision" />
    </g>

L'attribut des éléments actifs de la légende.

Les éléments actifs de la légende peuvent être de trois types :

• Un fond à appliquer : représenté par le mot «fill».
• Un figuré ponctuel : représenté par le mot «fp» c'est une imagette à placer.
• Un texte à écrire : représenté par le mot «text»

Pour rendre un élément actif, il suffit de rajouter l'attribut legende = "le mot correspondant au type de l'élément actif"

Dans l'exemple précédent Les éléments «rect» (élément SVG décrivant un rectangle) possède l'attribut legende = "fill"

Remarques

• L'attribut legende="fp" se place sur un élément SVG <image>.
• L'attribut legende="text" se place sur un élément SVG <text>.
• L'attribut legende="fill" se place sur un élément SVG <path>,<rect>,<circ>... ayant aussi un attribut fill défini.

Dans Inkscape

La gestion des attributs d'un élément SVG dans Inkscape s'opère en activant la fenêtre de l'éditeur XML. Ainsi on voit, sur la gauche, la structure de l'arbre du code SVG. En sélectionnant un élément de cette structure, sur la droite dans l'interface de l'éditeur on découvre les attributs de cet élément. On peut alors en modifier leur valeur, les supprimer ou en ajouter.

Éditeur XML d'Inkscape

Les attributs pour la carte, le schéma, le dessin...

Toujours grâce aux attributs, il faut définir sur cette partie de l'image l'interactivité souhaitée lors d'un clic sur cet élément ou lors de son survole avec la souris.

• Au survole de la souris, l'élément SVG doit il se mettre en évidence over="fill" Il prend la couleur complémentaire de sa couleur par défaut.
• En cliquant l'élément SVG, l'action de remplissage est-elle autorisée click="fill"
• En cliquant l'élément SVG, l'action déposer un figuré ponctuel est-elle autorisée click="fp"
• En cliquant l'élément SVG, l'action écrire du texte est-elle autorisée click="text"

Interactivité de remplissage et de survole sur l'élément sélectionné

Remarques

L'attribut «click» peut avoir plusieurs interactivités séparées par un espace.

Exemple click="fill fp text" Ainsi, lors du clic sur cet élément,

• un fond pourra être appliqué si l'élément actif de la légende est de type «fill».
• ou une image sera placée si l'élément actif de la légende est de type «fp»
• ou du texte sera placé si l'élément actif de la légende est du type «text».

Si le type de l'élément de la légende sélectionné ne correspond à aucun type indiqué dans l'attribut «click», rien ne se passe lorsqu'on clique.