Balise SET du SMIL

Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform. Mais il y a aussi la balise set. Cette balise permet de fixer une valeur pendant un certain laps de temps.

Exemple 1

Le thème sera un feu tricolore qui doit successivement passer du vert à l'orange puis au rouge.
Soyez patient, comme vous l'êtes en tant que conducteur : le feu reste vert 10 secondes puis orange 3 secondes et enfin rouge durant 7 secondes.

Le code correspondant

<svg width="50%" viewBox ="0 0 400 200" style ="border : 1px solid red;">
	<rect x="40%" y="0" width="80" height="200" rx="20" ry="20" style="fill:gray;"/>
	<circle cx="50%" cy="160" r="25" style="fill:lime ; fill-opacity : 0;" >
		<set attributeName="fill-opacity"   to="1"   begin="0s;e3.end" dur="10s" id ="e1" />
	</circle>

	<circle cx="50%" cy="100" r="25" style="fill: orange ;fill-opacity : 0;" >
		<set attributeName="fill-opacity"    to="1"     begin="e1.end" dur="3s" id ="e2" />
	</circle>
	<circle cx="50%" cy="40" r="25" style="fill: red ; fill-opacity : 0; ">
		<set attributeName="fill-opacity"   to="1"    begin="e2.end" dur="7s" id ="e3" />
	</circle>

...

Pour chaque rond, je manipule la propriété fill-opacity ; j'aurai pu manipuler la propriété visibility.
J'anime d'abord le rond vert, puis le rond orange, puis le rond rouge et le cycle reprend !

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.

Mon article sur la vectorisation des photos via Inkscape

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

Ce document comprend 8 calques avec une image vectorielle incorporée (liaison) dans chaque calque.

Un calque est un groupement d'objets via la balise double G.
Un calque est visible ou masqué. En effet la balise G début a l'attribut STYLE avec pour contenu : "visibility : hidden / visible".

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 donc via un éditeur tel NotePad. En effet le code SVG est simple et surtout très répétitif.

Le code de "diaporama.svg"

<svg version="1.1" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink">

<g style="visibility: hidden">
  <image x="100" y="50" height="400" 
  xlink:href="brune_nue_vectorisee.svg"/>
	<set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="0s;a8.end" dur="3s" id ="a1" />
</g>
<g  style="visibility: hidden">
  <image x="100" y="50" width="400" 
	xlink:href="noire_vectorisee.svg"/>
	<set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a1.end" dur="3s" id ="a2" />
</g>
<g style="visibility: hidden">
  <image x="100" y="-50" width="400" 
  xlink:href="seins_nus_vectorise.svg"/>
  <set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a2.end" dur="3s" id ="a3" />
</g>
<g style="visibility: hidden">
  <image x="100" y="50" width="400" 
  xlink:href="japonaise_nue_vectorisee.svg"/>
  <set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a3.end" dur="3s" id ="a4" />
</g>
<g style="visibility: hidden">
  <image x="100" y="50" width="400"  
  xlink:href="jolie_fille_vectorisee.svg"/>
  <set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a4.end" dur="3s" id ="a5" />
</g>
<g style="visibility: hidden">
  <image x="100" y="50" width="400"  
  xlink:href="bikini_vectorise.svg"/>
  <set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a5.end" dur="3s" id ="a6" />
</g>
<g style="visibility: hidden">
  <image x="100" y="50" width="400"  
  xlink:href="bikini2_vectorise.svg"/>
  <set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a6.end" dur="3s" id ="a7" />
</g>
<g style="visibility: hidden">
  <image x="100" y="50" width="400"  
  xlink:href="bikini3_vectorise.svg"/>
  <set attributeName ="visibility" attributeType="CSS" from ="hidden" to="visible"  begin="a7.end" dur="3s" id ="a8" />
</g>
</svg>

Analyse du code

Le document SVG comprend donc 8 calques (huit fois le conteneur G).
Dans chaque calque un lien vers une image vectorielle (donc un document SVG).

élément G avec l'attribut STYLE ayant pour valeur "visibility: hidden"
lien vers une image vectorielle
un élément SET pour démasquer le calque durant 3 secondes ; chaque instruction est identifiée

Observez la valeur de l'attribut begin du premier SET : "0s;a8.end". Donc on crée une boucle d'animations.

Notez que dans chaque balise IMAGE il y a l'attribut width OU height mais pas les deux pour éviter toute déformation éventuelle.
l'attribut width / height est fixé à 400 selon que l'image est en portrait ou en paysage.
La balise SET du SMIL

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville