Accueil

Tutoriel Inkscape - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

Animation des documents Inkscape

Inkscape est incapable de générer du SMIL (langage d'animation de SVG).
Il faut donc générer avec Inkscape un dessin vectoriel statique puis ouvrir le document Inkscape avec un éditeur de textes tel Notepad, pour rajouter du code d'animation (JavaScript ou SMIL ou CSS).

Inkscape : une enseigne lumineuse animée

Observez attentivement quelques secondes (au moins 10) ...

La flèche (contour bleu) s'affiche durant 4 secondes puis disparaît tandis le nom de la discothèque (Saturne Dancing) apparaît durant 4 secondes. Ce cycle de 8 secondes se répète à l'infini.

image SVG

Le travail avec Inkscape

Je vous explique ma démarche avec le logiciel Inkscape.

Dans un canevas qui fait 400 par 400 j'ai produit les objets suivants :

Ouvrez ce dernier document Inkscape avec l'éditeur de textes Notepad.

Animer la flèche

Il faut repérer le groupe de formes correspondant à la flèche bleu. C'est facile ce sont deux formes ayant la valeur #0000ff (bleu) pour l'attribut stroke. Et oui vous voyez ça sert d'avoir des notions du langage SVG !
Ensuite j'ai changé la valeur de l'attribut ID de la balise G par "fleche" .
Dans ce groupe donc toujours à l'intérieur du conteneur G j'ai rajouté une instruction SVG avec le code suivant :

<animate attributeName ="visibility" attributType = "CSS" values = "visible;hidden;visible" keyTimes ="0;0.5;1" repeatCount="indefinite" begin ="0s" dur ="8s" />

Sens : La flèche est affiché 4 secondes (8 secondes * 0.5) puis masquée 4 secondes durant un cycle de 8 secondes qui se répète à l'infini.

Animer le texte

Ensuite il faut repérer la balise text (valeur de l'attribut fill : #ff0000) et insérer le code suivant à l'intérieur du conteneur :

<animate attributeName ="visibility" attributType = "CSS" values = "hidden;visible;hidden" keyTimes ="0;0.5;1" repeatCount="indefinite" begin ="0s" dur ="8s" />

Sens : le texte est masqué 4 secondes puis affiché durant 4 secondes durant un cycle de 8 secondes qui se repète à l'infini.

Donc quand la flèche est affiché "Saturne Dancing" est masqué et vice-versa.

Extraits du code du fichier SVG après modifications

... <g id ="fleche"> <rect style="fill:none;stroke:#0000ff;stroke-width:4; stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" ... <path sodipodi:type="star" style="fill:none;stroke:#0000ff;stroke-width:4; stroke-miterlimit:4;stroke-opacity:1; stroke-dasharray:none" ... <animate attributeName ="visibility" attributType = "CSS" values = "visible;hidden;visible" keyTimes ="0;0.5;1" repeatCount="indefinite" begin ="0s" dur ="8s" /> </g> ... <text ... style="font-size:45.29342651px;font-style:normal;font-weight:normal;line-height:125%; letter-spacing:0px;word-spacing:0px; ... <animate attributeName ="visibility" attributType = "CSS" values = "hidden;visible;hidden" keyTimes ="0;0.5;1" repeatCount="indefinite" begin ="0s" dur ="8s" /> </text> ...

Le groupe de formes comprenant un rectangle de contour bleu et un "path" de contour bleu est identifié "fleche" et j'ai ajouté dans ce groupe une instruction basée sur la balise animate : animation portant sur la propriété CSS visibility.

Dans le conteneur text j'ai rajouté aussi une instruction d'animation qui porte aussi sur la propriété visibility.

Insertion du fichier SVG dans la page web

Et voilà maintenant il n'y a plus qu'à incorporer le dessin vectoriel animé dans la page web. Comme ce fichier SVG ne comprend pas de JavaScript on peut utiliser la balise IMG !

<img src ="enseigne_lumineuse_bis.svg" class="grand" alt ="document inkscape animé" />

Inskscape : animation en 3D

Jusqu'à présent nos animations étaient plates. Dans cette page je vous propose une animation 3D : un jet atterrissant sur la piste.
L'avion est d'abord minuscule puis grossit de plus en plus. Donc effet 3D !
Vous allez découvrir qu'en fait c'est très simple.

Mais attention on ne peut se contenter d'utiliser le logiciel Inkscape. Il y a quelques lignes de code SVG à saisir directement dans la page Web.

à la différence d'une boite HTML et via CSS3 on ne peut pas créer sous SVG de zone 3D.
Donc on ne peut pas translater selon l'axe Z. L'effet 3D est rendu par un changement d'échelle.

Travaux avec Inkscape

Production avec Inkscape du décor : "piste.svg"

Cette image vectorielle sera le "background" du canevas SVG. document inkscape

Ce document Inkscape fait 900 pixels par 600.

Production avec Inkscape du "sprite" : "avion.png"

Toujours avec Inkscape j'ai ensuite produit le document avion.svg
Voir le rendu ci-dessous : document inkscape

Ce document Inkscape fait 260 par 110 (pixels).

Je dois insérer cette image dans un canevas SVG avec la balise image.
Or paradoxalement cette balise ne fonctionne correctement (avec tous les navigateurs) que s'il d'une image matricielle.
Mais comme vous savez il est possible sous Inkscape d'exporter au format PNG un dessin Inkscape et c'est ce que j'ai fait.

Utilisation de NotePad

Il faut maintenant animer l'avion : translation 2D et changement d'échelle (pour créer un effet 3D).
On peut utiliser le SMIL ou le CSS !

Première solution : animer avec le SMIL

Rendu de l'animation :

Actualisez la page pour redémarrer l'animation !

Le code SVG correspondant :

<svg width ="90%" height ="auto" style ="background-image :url(../images/piste.svg); background-size :cover" viewBox ="0 0 900 600"> <image xlink:href ="../images/avion.png" width ="260" height ="110"> <animateMotion begin="0s" dur="20s" fill ="freeze" path ="M10,10 l400,400" restart ="whenNotActive"/> <animateTransform attributeName="transform" type="scale" values = "0.1;0.5;1;1.2" begin="0s" dur="20s" fill ="freeze" restart ="whenNotActive"/> </image> </svg>

Le canevas SVG a pour fond l'image SVG "piste.svg".

L'image PNG "avion.png" est insérée dans le canevas.
Ce "sprite" fait l'objet de deux transformations : translation le long d'un chemin et changement d'échelle.

Si vous ne comprenez pas le code SVG ci-dessous visitez le tutoriel "dessiner avec SVG" dans le même site.

Deuxième solution : animer avec CSS

Le rendu :

Actualisez la page pour redémarrer l'animation !

Le code SVG correspondant :

<svg width ="90%" height ="auto" style ="background-image :url(../images/piste.svg); background-size :cover" viewBox ="0 0 900 600" id ="decor"> <image xlink:href ="../images/avion.png" id ="jet2" x ="0" y ="0" width ="260" height ="110" /> </svg>

Le code CSS correspondant :

@keyframes atterrir
{ 
		0% {transform : scale(0.1); }
		50% {transform : translateX(150px) translateY(200px) scale(0.5);}
		100% {transform : translateX(300px) translateY(400px) scale(1);}
}
#jet2 {animation : atterrir 20s 0s 1 linear forwards  ; }

Si vous ne comprenez le code CSS, visitez dans le même site "tutoriel CSS" et plus précisément les pages dédiées aux transitions, transformations car ici il s'agit d'une règle d'animation basée sur des transformations.