Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Ce tutoriel porte désormais non seulement sur Inkscape mais aussi sur Boxy SVG.
N'oubliez jamais que ces deux programmes ont pour objet de générer des documents encodés en SVG via une interface graphique.
La lecture attentive de ce tuto vous permettra de découvrir le langage SVG car les extraits de code sont nombreux.
Le langage SVG est un langage XML qui permet de produire des dessins vectoriels statiques voire animés.
J'espère vous démontrer au travers de ce tuto, qu'une bonne connaissance de la syntaxe SVG est utile, lorsque les
éditeurs WYSIWYG de SVG sont à la peine et qu'il faut passer à l'encodage manuel.
Je tente aussi de vous montrer que l'utilisation maladroite des éditeurs graphiques de SVG peut générer un code lourd voire
aberrant ou encore inapproprié pour une animation ultérieure.
Attention, Inkscape & Boxy SVG ne sont pas des langages du Web mais des logiciels qui permettent via un éditeur graphique de générer des fichiers encodés en SVG : des documents SVG.
Inkscape est un éditeur WYSIWYG de SVG. Le terme WYSIWYG signifie "What You See, Is What You Get".
Ce qui veut dire que l'utilisateur dessine des formes et en arrière plan le programme génère le code
correspondant au format SVG. Le format SVG est un format d'images vectorielles.
Une image vectorielle peut être agrandie à l'infini sans perte de qualité.
Avec le temps Inkscape évolue : toujours plus d'outils mais en contrepartie une interface plus complexe.
Boxy SVG est aussi un éditeur WYSIWYG de SVG.
Il s'agit en fait d'une application web ; d'une extension de Chrome. Il n'y a rien à installer sur votre PC.
L'interface de Boxy est très dépouillée par rapport à celle d'Inkscape.
Si vous n'avez jamais utilisé d'éditeur WYSIWYG de SVG, il est peut-être préférable pour vous de démarrer avec Boxy SVG.
Boxy SVG est certes plus simple d'utilisation que Inkscape mais il offre moins de fonctionnalités.
La version 4 de Boxy SVG permet de générer via son interface l'animation de certains objets.
SVG est le format préconisé par le W3C (organisme de standardisation des langages du web) concernant
les images vectorielles.
SVG est un langage de balisage (comme le HTML) : des éléments avec des attributs dont les attributs.
Comme avec HTML, en SVG natif vous ne disposez ni de variables ni de structures de contrôles (tests, boucles) ...
* La version 4.0 de Boxy SVG introduit le nouveau panneau "Animations".
Vous pouvez donc utiliser Boxy pour générer une animation écrite en SMIL.
Le langage SVG est un langage XML (comme le HTML). Il suffit de connaitre les balises et leurs attributs ...
Ci-dessous quelques exemples où les programmes Inkscape et Boxy sont à la peine ...
Dans un document j'ai importé avec liaison une image matricielle puis j'ai dupliqué 5 fois cette image.
Ensuite j'ai appliqué à chaque copie un filtre.
L'image matricielle et le document Inkscape sont dans le même répertoire !
Le chemin (valeur de l'attribut xlink:href de l'élément IMAGE) est noté en absolu alors que l'image et le document SVG sont dans le même dossier ...
Vous devez en manuel modifier la valeur de l'attribut xlink:href pour chaque élément IMAGE.
Le code modifié :
J'ai remplacé pour chaque balise IMAGE le chemin absolu par le chemin en relatif qui ici se résume au nom de l'image.
L'original de l'image en haut à gauche puis la même image avec différents filtres.
Inkscape n'est pas en mesure de produire directement un dessin vectoriel avec des objets animés.
Mais il n'est pas très compliqué (à condition de comprendre le code SVG) de rajouter dans un document Inkscape un modèle d'animation CSS
ou un script en JS ou encore des instructions en SMIL (composante animation du SVG).
Ci-dessous la croix de Lorraine change de couleurs : passe alternativement du rouge au bleu en passant par le blanc.
Animer les documents SVG
Si vous demandez à Boxy SVG d'importer N fois la même photo (image matricielle) le logiciel va la "rastériser" N fois.
Donc le document SVG sera très lourd !
Il faut demander au logiciel d'incorporer l'image 1 fois puis en manuel il faut transformer l'image "rastérisée" en modèle
et la cloner N fois.
Un des principes de l'animation de documents SVG est de jouer sur les calques.
Donc en vue de l'animation ultérieure du document pensez à créer plusieurs calques.
Seul bémol, de nombreuses plateformes de blogs et de réseaux sociaux refusent au visiteur de téléverser des fichiers SVG.
C'est le cas de Facebook. Il est impossible d'ajouter dans un article une image SVG et ce pour des raisons de sécurité.
En effet un document SVG peut contenir du JS malveillant.
Les cybercriminels exploitent de plus en plus les fichiers SVG
Autre inconvénient, le gestionnaire de fichiers de Windows est incapable de prévisualiser les fichiers SVG.
Je vous conseille donc d'installer une extension de Windows : SVG Viewer Extension for Windows Explorer.
Ci-dessous aperçu d'un dossier (contenant des fichiers SVG) lorsque cette extension est installée :
Les images vectorielles apparaissent sous forme de miniatures (à condition bien sûr de demander un affichage sous forme d'icônes).
Les dernières versions du logiciel ont apporté des innovations notables.
Attention la liste des nouveautés n'est pas exhaustive ...
Avant il fallait utiliser une application en ligne telle "SVG optimizer".
Désormais l'outil d'optimisation est intégré.
Un code SVG optimisé est plus léger et surtout plus facile à comprendre.
Dans les versions récentes on peut très bien n'afficher que les contours des formes et
chemins (sans les couleurs): mode "contour"
Ce mode d'affichage est très pratique lorsque différents objets se superposent et peuvent donc être masqués dans le
cadre du mode "normal" d'affichage.
Ci-dessous document affiché en mode "normal" :
Ce même document affiché en mode "contour" (ou "outline") :
On apprend ainsi qu'il existe un pentagone masqué par le rectangle rouge.
Un "symbole" est un modèle d'objet clonable.
Ainsi l'extension JessyInkf permet de créer des présentations web (qui tournent sur un navigateur).