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 ...

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é pour animer tel objet graphique (rajouter du CSS ou du SMIL ou encore du JS) ...
Par contre si vous êtes complètement ignorant de la syntaxe SVG vous serez complément perdu face au code généré.

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>

J'espère que maintenant vous êtes convaincu qu'il est préférable d'avoir quelques notions sur le format SVG pour utiliser intelligemment des outils comme Inkscape.

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