Dessiner avec SVG - sommaire

Combiner SVG 2- Snap SVG & CSS 3

Google Chrome, le leader des navigateurs, commence à implémenter la version 2 de SVG. On peut supposer que les autres suivront ...
Parmi les innovations de cette version : les paramètres géométriques (taille et position) tels with, height, x, y, cx,cy, r, rx, ry,etc. pourront être passés sous forme de propriétés CSS.
Donc quand SVG 2 sera implémenté par tous les navigateurs populaires, il n'y aura plus de "prise de tête" : tous les paramètres pourront être passés sous indifféremment sous forme d'attributs ou de propriétés CSS.
Or cette innovation change tout quant à l'animation d'une forme ; on pourra se passer de JavaScript et du SMIL. En effet dans un modèle d'animation CSS ("keyframes") on pourra désormais manipuler les paramètres géométriques comme ceux de mise en forme.

Donc les exemples qui suivent (basés sur SVG version 2) ne fonctionnent que sous Google Chrome pour l'instant !

Dessins statiques et SVG 2

Exemple 1

Un canevas SVG contenant un rectangle aux coins arrondis.

Le code correspondant

J'ai passé en propriétés (via l'attribut "style" de la balise) tous les paramètres géométriques et de mise en forme.

Exemple 2

Insertion d'une image dans un canevas SVG.

Le code correspondant: <svg width ="50%" viewBox ="0 0 400 400" style ="background : pink; " > <image href="../images/jolie_fille.jpg" height="200" x ="50" y ="50" /> </svg>

Nouveauté SVG 2 : l'attribut "xlink:ref" peut être remplacé "href" tout simplement.

Animations avec SVG 2, Snap SVG & CSS 3

C'est surtout au niveau des animations SVG qu'on apprécie les nouveautés apportées par la version 2 de SVG.
Le SMIL de SVG (balise animate, animateMotion, animateTransform, etc.) devient obsolète.

Exemple 1 : animation 3D réalisée en 5 minutes

Un carré ombré et violet se transforme en rond transparent puis le cycle reprend en sens inverse.

Le code correspondant

Le code est très simple : un zest de SVG conventionnel, un peu de CSS et un court script en Snap SVG.

Le code SVG : <svg width ="50%" viewBox ="0 0 400 400" id ="canevas" style ="background : pink ; box-shadow : 10px 10px 10px gray;" > </svg>

La zone de dessin est identifiée "canevas" et elle est ombrée.

La feuille de style : @keyframes transformer { from {rx : 0 ; ry : 0 ; fill-opacity : 1 ; } to {rx : 100 ; ry : 100 ; fill-opacity : 0 ; } } #carre {animation : transformer 8s 0s infinite ease alternate;}

Le modèle d'animation ne comporte que deux étapes ; donc on peut remplacer les pourcentages par les mots clés "from" et "to".
Pour transformer un carré en rond il suffit de créer des coins arrondis : paramètres rx & ry.
Nouveauté : les paramètres géométriques peuvent être manipulés dans le cadre d'un "keyframes". Plus besoin de devoir utiliser le SMIL ou JavaScript.
On applique ce "keyframes" à l'élément SVG identifié "carre" ; le rythme de la transformation ne sera pas constant mais "ease" (rapide au départ et lent à la fin).

Le script Snap SVG : <script> var zone = Snap("#canevas"); var ombre = zone.filter(Snap.filter.shadow(10, 10, .5)); var carre = zone.rect(100,100,200,200).attr({fill : "purple", id : "carre",filter : ombre}); </script>

J'utilise le framework Snap SVG car la définition des filtres est beaucoup plus simple qu'en SVG standard.
La variable "zone" référence la zone de dessin SVG identifiée "canevas" par HTML.
On crée ensuite un filtre de type "shadow" (ombre portée).
On dessin un carré et on lui applique une couleur de remplissage, un identifiant et le filtre.

Il ne faut pas, bien sûr, oublier de charger la librairie Snap SVG.
Pour revoir les filtres avec ce framework SVG : filtres avec Snap SVG

Une autre animation 3D

Des boules ombrées se déplacent sur le tapis d'un billard également ombré.

Au départ la boule rouge est positionnée en haut à gauche et la boule blanche en bas à droite.
Chaque boule parcourt un chemin en forme de V (V inversé pour la boule blanche).

Le code

Je vous laisse l'imaginer.
Vous devez être capable de le reconstituer en lisant bien les consignes ci-dessous et en vous inspirant de vos connaissances acquises en CSS, SVG et Snap SVG.

Code HTML : balise SVG avec règle de style en ligne pour bordurer et ombrer le canevas SVG.

Code CSS : deux "keyframes" : un qui anime la boule rouge et l'autre qui déplace la boule blanche.
Dans ces modèles d'animation on modifie les valeurs des paramètres cx & cy.

Script : dans ce script je définit un filtre de type "shadow".
Puis je dessine deux cercles auxquels on applique le filtre, une couleur (rouge ou blanc) et un ID.

Je vous communique cependant quelques extraits de CSS, HTML et du script. CSS : @keyframes deplacer1 { 0% {cx : 10 ; cy : 10; } 50% {cx : 450 ; cy : 290 ; } 100% {cx : 890 ; cy :10;} } #rouge {animation : deplacer1 10s 0s infinite linear alternate ;} @keyframes deplacer2 ... HTML : <svg width ="100%" viewBox ="0 0 900 300" id ="canevas2" style ... ></svg> ... Script Snap SVG : var zone2 = Snap("#canevas2"); var ombre = zone2.filter(... var cercle1 = ... var cercle2 =zone2.circle(890,290,10) .attr({fill : "white", id : "blanche",filter : ombre}); ...

Dans le cadre du modèle d'animation, il n'est plus besoin de programmer une translation X,Y. On peut modifier les valeurs des paramètres géométriques des cercles. C'est beaucoup plus simple !