Tutoriel Inkscape & Boxy - sommaire

Le logiciel Boxy SVG - introduction, les formes de base, le texte.

Généralités

Boxy offre moins de fonctionnalités que Inkscape mais l'interface est fort dépouillée par rapport à celle de Inkscape. Ce logiciel est donc plus simple à prendre en main.

Par ailleurs la dernière version de Boxy SVG est capable de générer des animations ...
Générer du SMIL via Boxy SVG

L'inconvénient de boxy SVG est qu'à la différence de Inkscape il est payant.
Après une période d'essai de 15 jours, il faut s'abonner pour 9,99 € HT chaque année donc presque 12 € TTC ...

Installation du logiciel

Il n'y a rien à installer sur votre PC car Boxy SVG est un logiciel en ligne.
À partir du site https://boxy-svg.com il suffit de cliquer sur le bouton "lancer l'application".
L'interface apparait avec un canevas (zone de dessin) qui fait 500 par 500.
Vous pouvez rajouter un raccourci sur le bureau de votre ordinateur.

Interface de l'outil

L'interface est très simple.
Observez entre la zone de dessin les barres d'icônes situées à gauche et à droite.
Ces deux barres d'icônes n'ont pas de nom. Je propose de les nommer BG (G comme gauche) et BD (D comme droite).
Entre la barre de titre et la zone de dessin il y a aussi une barre de menus et en dessous une barre d'outils. Je propose de nommer cette troisième barre d'outils BH (barre haute).

On retrouve toutes les commandes de la barre de gauche dans le menu "Outil" et toutes les commandes de la barre de droite dans le menu "Fenêtre".

Dans le canevas (zone de dessin) j'ai dessiné quatre rectangles qui ont été ensuite transformés en chemins.
Vous verrez plus tard que pour créer un chemin complexe, il est plus simple de démarrer par une forme simple puis d'effectuer une conversion.

Mes premiers documents Boxy SVG

Les fichiers produits avec l'application en ligne Boxy peuvent être stockés en local OU sur le cloud.

Premier document : "rectangles.svg"

Ce document comprend cinq rectangles.

De haut en bas et de gauche à droite :
• un rectangle rempli de vert avec un large trait (bordure) en jaune
• un carré sans aucune couleur de remplissage mais une bordure noire
• un carré rempli de bleu avec coins arrondis
• un losange rempli de rouge : carré ayant subi une rotation
• un rectange rempli avec un dégradé radial et ayant subi une rotation

Les trois dernières formes n'ont pas de bordure (on parle de "traits" dans le jargon Boxy).

Ce document a un "viewBox" de 600 par 400.
Je rappelle que l'attribut "viewbox" de l'élément SVG définit le répère cartésien du canevas SVG. Les objets sont dimensionnés et positionnés en fonction du viewBox.
Pour modifier le viewBox (qui est par défaut 500 par 500) il suffit de sélectionner la commande "Vue" dans la BG (barre de gauche).

Il faut ensuite produire différents rectangles.
Pour dessiner un rectangle il suffit de cliquer sur la commande "Rectangle" dans BG.
Si vous voulez créer un carré il faut appuyer sur la touche "shift" tout en dessinant la forme avec la souris.
Si vous cliquez une deuxième fois sur l'icône "Rectangle" (avant d'entamer le dessin) un volet d'options apparait. Ainsi vous pouvez fixer un "rayon de coin" (pour que les angles soient arrondis).

Par défaut toute nouvelle forme est remplie de gris clair avec un trait de 1 pixel.

Remplissage et traits

Pour modifier le remplissage d'une forme il suffit de la sélectionner et de cliquer sur "Remplissage" dans la BD puis de choisir une couleur dans la palette de couleur.
Vous pouvez aussi supprimer tout remplissage donc rendre la forme transparente ; type : "aucun".
Vous pouvez gérer l'opacité de la couleur de remplissage ;
Vous pouvez aussi opter pour un dégradé linéaire ou radial (rubrique : "type").

Pour modifier la bordure de la forme sélectionnée, il faut cliquer sur la commande "Trait" dans la BD.
Via le panneau qui apparait, vous pouvez modifier l'épaisseur du trait, changer la couleur du trait et son opacité.

Concernant le type de "peinture" vous avez aussi le choix :
• couleur unie
• dégradé linéaire
• dégradé radial
• motif
• aucun (donc transparence)

Une bordure avec un dégradé n'a d'impact visuel que si elle est vraiment très épaisse ...

Deuxième document Boxy : "ellipses.svg"

Ce fichier comprend cinq objets :
• une ellipse
• un cercle flouté
• un "blob" (tache)
• un segment
• une ligne à main levée

Dessiner ellipse et cercle

Dans la barre BG cliquez sur "Ellipse".
Si vous apppuyez sur "shift" tout en dessinant la forme vous obtenez un cercle (c'est à dire une ellipse dont le RX est égal au RY).
En cliquant une deuxième fois sur l'icône "Ellipse" une boite d'options apparait ; vous pouvez choisir entre ellipse et cercle. Dans le premier cas Boxy génère une instruction ELLIPSE et dans le deuxième cas une instruction CIRCLE.

Ici l'ellipse est bordurée de tirets (commande "Trait" de la BD).
Le cercle est rempli d'un dégradé radial (commande "Remplissage" de la BD) ; la forme est floutée (commande "composition" de BD puis filtre). Le floutage gaussien fait partie des filtres proposés.

Blob (tache)

Pour dessiner une tache il suffit de sélectionner la commande "blob" dans la BG.

Le segment

Pour réaliser un segment il faut sélectionner la commande "Spline" de la BG.
Le segment a une largeur de 20px et les extrémités sont arrondies (Cap : rond)

Une ligne

Pour dessiner une ligne il faut sélectionner la commande "à main levée" dans la BG.
Ici la ligne a aussi une largeur de 20px avec des extrémités arrondies.

Ajuster l'épaisseur d'un segment ou d'une ligne

La commande "remplissage" n'a aucun effet sur ces deux types de forme. Il faut utiliser la commande "Trait".

Troisième document : "autres_formes.svg"

Ce document comprend les formes suivantes :
• un triangle
• un pentagone avec angles arrondis
• un octogone
• une étoile à cinq branches
• une étoile de David (six branches)
• un cadre ayant subi une rotation
• un cadre

Production de ces différentes formes

Ici vous êtes obligé de faire une double clic gauche sur l'icône "Autre forme" afin de choisir un type d'autres formes.
Pour chaque type "d'autres formes" vous avez des options intéressantes et surtout vous avez un aperçu du rendu de ces options.

Pour créer un triangle, faites un double clic gauche sur "autre forme" et sélectionnez "triangle" dans la rubrique "type".
Vous pouvez directement faire un triangle avec des coins arrondis.

Pour produire un polygone il faut sélectionner le type "N-gone".
Le volet d'options vous propose de modifier le nombre de "bras" du polygone et de règler le "rayon de coin".

Pour produire une étoile il faut choisir le type "Étoile".Dans le volet d'options, vous pouvez règler le nombre de bras et la profondeur.

Pour créer un cadre il faut sélectionner le type "cadre" dans le volet d'options. Vous pouvez règler l'épaisseur et le rayon des coins via le volet.

Modifiez les paramètres géométriques d'une forme

Vous avez dessiné un rectangle, un triangle ou un polygone mais vous avez changé d'avis concernant son aspect géométrique.

Vous voulez maintenant :
• déplacer la forme dans le canevas
• redimensionner la forme
• effectuer une rotation de la forme
• incliner la forme
• modifier les rayons de coin
• changer le nombre de bras (pour les polygones, étoiles)
• etc.

Vous voulez donc modifier les paramètres géométriques d'une forme.
Pour tous les types de formes, ces modifications s'effectuent de la même façon ! soit via la commmande "Géométrie" soit de façon graphique.

Utilisez la commande "Géométrie"

Séléctionnez une forme (elle est alors encadrée de bleu avec 9 poignées bleues) puis produisez alors la commande "Géométrie" dans la BD ; tous les paramètres géométriques apparaissent dans des zones de texte et peuvent être modifiés.

Via la commande "Géométrie" vous pouvez vous assurer que les paramètres géométriques seront des entiers (et non pas des valeurs décimales). Il est plus facile de lire une code SVG où les valeurs des attributs sont des entiers.

Modifiez graphiquement

Vous pouvez aussi modifier graphiquement :
• sélectionnez une forme (forme dans un cadre bleu avec des poignée bleues) ; vous pouvez la déplacer et la redimensionner
• recliquez sur la forme (forme dans un cadre bleu fin avec des poignées rouges et jaunes) ; vous pouvez exercer une rotation (utiliser les poignées rouges) ou une inclinaison (utiliser les poignées jaunes).
• la forme sélectionnée, cliquez sur l'icône "Editer" dans la BG (deuxième commande) ; des poignées vertes apparaissent ; vous pouvez modifier le nombre de bras, la profondeur, le rayon de coin, etc.

Exemple

Ci-dessus un document Boxy avec six formes :
• en haut j'ai dessiné un carré que j'ai dupliqué deux fois
• en bas j'ai dessiné un hexagone que j'ai dupliqué deux fois

Pour la première copie du carré j'ai appliqué une inclinaison et pour la deuxième copie j'ai "édité" pour changer les rayons de coin. de bras. En effet pour les rectangles (ou carrés) vous pouvez définir un rayon de coin différent pour chacun des quatre angles.

Pour la deuxième copie de l'hexagone j'ai appliqué une rotation et pour la deuxième copié j'ai "édité" pour modifier le nombre de bras.

Donc vous savez désormais transformer un rectangle (ou carré) en losange ou en paraléllogramme.
Je vous invite à lire dans le tutoriel sur le langage SVG le chapitre sur les transformations : SVG : les transformations

Le fichier "autres_formes2.svg"

Dans ce document je produis :
• des anneaux avec filtres
• des tartes
• des croissants

Je pense que vous avez compris, que ces autres formes s'inscriront dans un cercle parfait si vous appuyez simultanément sur la touche "shift" du clavier tout en dessinant l'anneau ou la tarte ou le croissant.
J'ai appliqué à chaque anneau un filtre (commande "composition" de la BD) : "ombre intérieure" et "ombre portée".
J'ai édité la deuxième "tarte" pour augmenter l'angle interne et réduire la largeur du trait.
Le deuxième croissant s'inscrit dans un cercle parfait.
Le troisième croissant a été retourné horizontalement (BH) et édité.

Le fichier "autres_formes3.svg"

Il nous reste à évoquer :
• les croix
• les engrenages
• les spirales
• les flèches

La deuxième croix a été éditée afin qu'elle devienne un croix satanique : un croix chrétienne retournée.

Le premier engrenage a 12 dents et de le deuxième 24 dents.
Un engrenage c'est un nombre de dents, trois rayons, un écartement.

Il y a ensuite deux spirales : une inscrite dans une ellipse et une autre dans un cercle et sans remplissage mais un large trait.

La première flèche a été tournée à -90%.
La deuxième a été éditée pour modifier son aspect.

Affichez la grille

C'est beaucoup plus ergonomique de dessiner des formes si vous avez une trame pour vous guider, vous donner une idée précise de la taille et position de la forme.

Produisez la commande "Vue/grille".
Par défaut la grille crée de grands carreaux de 100 par 100.
Pour activer le menu "grille" cliquez sur une des poignées du premier carreau (le rond ou le carré) puis cliquez sur "Géométrie" pour paramétrer différemment la grille.
Vous pouvez aussi déplacer la poignée carrée pour ajuster la dimension des grands carreaux.

Ci-dessus j'ai demandé que chaque grand carreau (de 100 par 100) soit divisé en 10 par 10 (donc 100 petits carreaux).

Recliquez sur l'onglet "grille" (au dessus du canevas) pour fermer le menu "grille" ; le menu "SVG" redevient le menu actif.

Le texte

Production de texte dans un document SVG

Pour insérer du texte dans un canevas Boxy c'est très simple ; il suffit de cliquer sur la commande "Texte" dans la BG.

Pour styler le texte il suffit ensuite de sélectionner la zone de texte et d'afficher une boite de dialogue en cliquant sur "Typographie" dans la BD.
Vous pouvez changer la taille, la police, décorer, transformer, etc.

Pour obtenir un texte le long d'un chemin il faut double-cliquer sur "Chemin de texte" dans la BG ; tapez le texte dans la zone "contenu" puis dessiner le chemin ; le contenu s'affiche au fur et à mesure.

Exemple de document SVG avec du texte

Il y a trois textes :
• deux zones de texte simples
• un texte le long d'un chemin

Autre document Boxy avec du texte

J'ai dupliqué le même texte deux fois.
À la première copie j'ai utilisé la commande "Typographie" pour gérer la taille de police, l'espacement entre lettres et entre mots , la casse (tout en majuscules), etc.
À la deuxième copie j'ai utilisé la commande "Composition" pour ombrer le texte : ombre portée avec un faible décalage X et Y.

Syntaxe SVG relative au texte

Le code SVG optimisé correspondant à du texte dans une zone de texte ou le long d'une chemin ou encore dans une forme n'est pas très compliqué à saisir.
Aussi je vous invite à visiter le chapitre en lien dans mon tuto sur le langage SVG : Le texte avec SVG

Les filtres

Boxy SVG et les filtres

Sous Inskcape on se perd un peu dans la multitude de filtres proposés. Avec Boxy c'est beaucoup plus simple mais on trouve l'essentiel.

Grâce aux filtres on peut flouter un objet et lui appliquer une ombre portée, convertir les couleurs en nuances de gris, inverser les couleurs (négatif), etc.
Concernant les ombres portées il faut règles les décalages X et Y, le rayon de flou.

Exemple

Ci-dessous un document Boxy avec quatre objets.

J'ai appliqué :
• au cercle : un flou gaussien (rayon : 10)
• à l'ellipse : un contour (largeur : 4)
• au carré : une ombre portée (décalage X : 10 ; décalage Y : 10 et rayon de flou : 2)
• au rectangle : une ombre portée aussi (décalage X : -10 ; décalage Y : -10 et rayon de flou : 2)

Pour produire une filtre à l'objet sélectionné il faut cliquer sur "Composition" dans la BD puis dans la boite de dialogue, cliquer sur "ajouter un filtre" ; choisir un type de filtre et enfin renseigner les paramètres du filtre.
De nombreux filtres peuvent s'appliquer à une image matricielle importée : nuance de gris, négatif, rotation de teinte, etc.

L'importation d'images matricielles dans un document Boxy est abordée au chapitre suivant.

La syntaxe des filtres

Je vous invite à lire dans mon tuto sur le langage SVG le chapitre sur les filtres.
Les filtres en SVG
Vous verrez que la syntaxe n'est pas si compliquée que cela et que parfois ça vaut le coup d'encoder en manuel ...