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

Dois je rappeler qu'il est impossible de générer via Inkscape un dessin vectoriel animé.
Il faut donc générer avec Inkscape un dessin vectoriel statique puis ouvrir le document Inkscape (fichier SVG) avec NotePad pour rajouter du code d'animation (JavaScript ou SMIL ou CSS).

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" width ="60%" alt ="image SVG" />

Attention cette animation ne fonctionne pas avec IE (ou EDGE) puisque le SMIL (balises d'animation du format SVG) n'est toujours pas implémenté par ce navigateur.

J'aurai pu aussi animer via le CSS mais là encore ça ne marche pas avec les navigateurs MicroSoft ...
Si vous voulez une page compatible avec tous les navigateurs il faut animer avec JavaScript.
Retour menu