Pourquoi apprendre le langage SVG ?

Les limites des logiciels de dessin vectoriels

Certains esprits brillants mais paresseux peuvent faire remarquer qu'il n'est peut-être pas utile d'apprendre la syntaxe SVG alors que des logiciels de dessin vectoriel génèrent du code à ce format.
Certes mais ni Inkscape, ni Illustrator ne sont capables de générer du code correspondant à une image vectorielle animée ...
Vous pouvez alors rétorquer que la bibliothèque JS Snap SVG est capable de produire le script d'une animation en SVG. Mais sachez que vous devez écrire ce script et donc connaitre toute la terminologie SVG car les méthodes de cette librairie s'inspirent directement des balises SVG.
Citons à titre d'exemple les méthodes : rect(), circle(), ellipse(), line(), path(), clone(), group(),attr(), etc.

Donc si vous avez de bonnes notions en SVG vous serez capable (avec un éditeur de textes) de compléter le code généré par Inkscape afin d'animer certaines formes OU de vous former rapidement à la programmation en SnapSVG.

Démonstration par l'exemple

Observez l'image vectorielle animée ci-dessous.
La croix de lorraine change de couleur : bleu puis blanc puis rouge et le cycle reprend dans l'ordre inverse.

Pour obtenir cette animation j'ai d'abord utilisé Inkscape en créant un document Inkscape de 400 pixels par 400 et j'ai sauvegardé ce fichier au format "svg simple".

Ensuite j'ai optimisé le code SVG du document Inkscape en utilisant l'application en ligne SVG EDITOR. J'avais pris la précaution de grouper toutes les formes constitutives de la croix de Lorraine en un seul objet.

Enfin j'ai ouvert la version optimisée avec un éditeur de textes (NotePad).

Le code SVG et CSS de l'image vectorielle est donc le suivant :

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 400 400" version="1.1"> <style> @keyframes tricolorer { 0%{fill : blue ; } 25%{fill : white ; } 50% {fill : red ; } 75% {fill : white ; } 100% {fill : blue ; } } #croix{animation : tricolorer 15s 0s infinite linear ; } </style> <g transform="translate(0,-652.36216)" id ="croix"> <path d="m234.1 693.3 19.8 14.7 1 323.1-20.8-15.7z" fill="#666"/> <rect y="692.4" x="162" height="319.6" width="70"/> <rect y="752.4" x="90" height="60" width="220" /> <rect y="872.4" x="70" height="60" width="260" /> <path d="m311 751.4 20 10.8 0 61-20-11.8zM331 870.4l21 13.8 0.4 61-21.4-9.9zM160 1012.4l80 0 12.7 19-78 1zM236.5 933.7 330 932.4l18.7 11.7-93.5 1.4zM236.5 813.7 310 812.4l22.2 12.4-85.2-0.7z" fill="#666"/> </g> </svg>

Notez que l'animation est réalisée en CSS. Si vous ignorez les principes des animations en CSS visitez "tutoriel CSS3" dans le même site.
Retour menu