Dessiner avec SVG - sommaire

Balise SET du SMIL

Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform. Mais il existe une dernière composante, l'élément set.
Cette balise permet de fixer une valeur pendant un certain laps de temps donc de créer des animations avec un effet "saccadé".

Exemple

Le thème : un feu tricolore qui successivement passe du vert à l'orange puis au rouge et de nouveau vert.

Soyez patient, comme vous l'êtes en tant que bon conducteur : le feu reste vert 10 secondes puis orange 3 secondes et enfin rouge durant 7 secondes. Le cycle complet dure donc 20 secondes et se répète à l'infini.

Le rendu

Le code correspondant

Notez que les paramètres géométriques peuvent être exprimés en pourcentage.

Puisqu'il s'agit d'un feu tricolore il y a trois ronds avec dans chaque élément circle une élément enfant set.
J'aurai pu manipulé le paramètre opacity pour les trois balises SET mais je préfère vous montrer deux autres propriétés CSS qui ont le même impact : visibility & display.
Notez la valeur de l'attribut begin du premier SET : "0s;e3.end" (deux éléments déclencheurs).

Chronologie des animations :
• le rond vert reste entièrement opaque durant 10 secondes avant de redevenir transparent
• ensuite le rond orange reste visible durant 3 secondes avant de redevenir invisible
• puis le rond rouge s'affiche durant 7 secondes avant de redevenir masqué
• de nouveau le rond vert redevient opaque.

Pour réaliser cette chronologie il suffit d'identifier chaque SET et de bien renseigner la valeur de l'attribut begin.

Animation basée sur les calques

Notion de calque

Un calque ou "couche" ('layer' en anglais) est un groupes logique d'objets d'un canevas.
Un canevas peut comprendre plusieurs "couches" qui se superposent.
Pour créer un calque il suffit de regrouper des formes dans le conteneur G et d'identifier cette balise.
En masquant / démasquant un calque on modifie l'aspect du dessin vectoriel donc on l'anime.

La nuit puis le jour

Observez ce dessin vectoriel durant au moins 11 secondes afin d'observez la succession de la nuit et du jour.

Le code correspondant

Ce dessin vectoriel comprend deux calques identifiés "jour" et "nuit".
Chaque calque est affiché 5 secondes en jouant sur le paramètre opacity mais j'aurai pu utiliser visibility / display.
Ici l'élément G comprend à chaque fois une balise rect (le ciel), une balise circle (soleil ou lune) et une balise set pour contrôler le masquage / affichage du calque.
Comme dans l'exemple précédent je crée une boucle d'animation.

Un diaporama réalisé à partir de photos vectorisées

Inkscape propose un outil très intéressant : la vectorisation.
La vectorisation de photos (images matricielles) donnent à celles-ci un aspect artistique.
La vectorisation en une seule passe donne une esquisse en noir et blanc alors que la vectorisation en N passes produit une aquarelle avec autant de couleurs (ou nuances de gris) que de passes.
Le poids de image vectorisée est fonction du nombre de passes ; léger avec une seule passe (simple esquisse) et plus lourd avec plusieurs passes. En effet le nombre de chemins de l'image vectorisée est fonction du nombre de passes demandées lors de la vectorisation.

Vectorisation des photos via Inkscape

Ci-dessous un diaporama de nus artistiques (photos vectorisées)

Ce document comprend 8 calques avec pour chaque conteneur G une image vectorielle incorporée (liaison) dans chaque calque.
L'élément parent IMAGE contient une balise SET.

Insertion du document Inkscape dans cette page web

Comme ce document comprend des liens vers des images il faut l'insérer dans la page web via l'élément object.
Le code HTML d'insertion est donc : <object type="image/svg+xml" data="diaporama.svg" style ="width : 80% ; display : block ; margin : auto"> </object>

Production du diaporama

Via Inkscape j'ai vectorisé 8 photos ; j'ai donc obtenu 8 images vectorielles.
Pour certains photos j'ai vectorisé en une passe et pour d'autres j'ai demandé plusieurs passes en couleurs ou en nuances de gris.
Ensuite j'ai encodé manuellement un document SVG via un éditeur tel NotePad. En effet le code SVG est certes un peu long mais il est très répétitif donc la saisie de ce code est rapide : copier-coller.

Le code de "diaporama.svg"

Analyse du code

Rappel : dans le cadre du SVG externe (un document SVG) des "namespaces" sont obligatoires dans la balise SVG début :
• toujours déclarer : xmlns="http://www.w3.org/2000/svg"
• ajouter xmlns xlink="http://www.w3.org/1999/xlink" si le document SVG contient des liens vers des images externes.

Le document comprend 8 calques qui ont tous la même structure :
• le conteneur G avec l'attribut STYLE ayant pour valeur "visibility: hidden"
• lien vers une image vectorielle : balise IMAGE
• un élément SET (avec un identifiant) pour démasquer le calque durant 3 secondes

Observez la valeur de l'attribut begin du premier SET : "0s;a8.end" qui est donc lancé à l'affichage de la page OU après l'animation "a8"; donc on crée une boucle d'animation.

Notez que dans chaque élément IMAGE il y a l'attribut width OU height mais pas les deux pour éviter toute déformation éventuelle de l'image insérée.