Boxy SVG : alternative à Inkscape

Google Chrome propose une interface en ligne pour produire des dessins vectoriels au format SVG : Boxy SVG.
Cette application est beaucoup plus pauvre en outils que Inkscape mais la prise en main, malgré une interface en anglais, est beaucoup plus rapide.

Si l'application est en ligne vos fichiers sont stockés en local.
Boxy SVG ne fonctionne que sous Chrome ; c'est une extension de Chrome.
Cette extension était gratuite mais désormais elle est payante : 8 €. Pour commander il faut aller sur Chrome Web Store.

Boxy SVG est une application bien utile. On ne peut que regretter que les tutos (des vidéos) soient en anglais (et sans sous-titrage).
Si vous souhaitez créer un image vectorielle avec du texte (un logo d'entreprise par exemple), je vous conseille de privilégier Boxy SVG à Inkscape. En effet le code SVG généré par Inkscape n'est pas compatible avec les navigateurs alors qu'avec Boxy SVG le texte est compris dans la balise SVG text ; tout navigateur affiche correctement le fichier boxy SVG.

L'interface de Boxy SVG

L'interface est en anglais mais si vous connaissez un peu la syntaxe SVG c'est pas un problème.
Il faut savoir traduire des mots tels "fill, stroke", shape, path, etc.". Ainsi la boîte de dialogue "fill" permet de remplir la forme sélectionnée. La boîte de dialogue "stroke" permet de définir le contour d'une forme (couleur, épaisseur, style des angles ou des extrémités pour une ligne).

Je prend un exemple. Un nouveau document Boxy SVG fait 500 pixels par 500 et le viewBox vaut "0 0 500 500".
Pour modifier les attributs width, height et viewBox vous devez ouvrir la boite de dialogue "geometry" soit en cliquant sur l'icône "geometry" dans la barre d'outils à droite de l'écran soit par menus : commande "Panels/geometry panel".

Autre exemple. Pour convertir une forme de base en chemin (transformer un rectangle en trapèze) il faut ouvrir la boite de dialogue "shape" (barre d'outils de droite) ou produire la commande Shape/Shape to Path

Ci-dessous l'interface de Boxy SVG

En haut le barre de menus et à gauche et à droite des barres d'outils. image SVG

Dans la capture d'écran ci-dessus vous voyez que l'image vectorielle créée avec Boxy SVG se nomme "maison2.svg".
Le nuage blanc (groupe d'ellipses) est l'objet sélectionné et j'ai ouvert la boîte de dialogue "fill" pour éventuellement modifier la couleur de remplissage.

Commencer avec Boxy SVG et terminer avec un éditeur de textes

Ci-dessous l'image vectorielle créée via Boxy SVG : image SVG

Le code SVG correspondant

Admettez que le code est succinct :
Notez le groupe d'objets qui correspond à la maison : murs, toiture (chemin), cheminée
un chemin ("path") correspond au croissant de lune (un "pie")
Le dernier chemin (celui avec une opacité de 50%) correspondont à l'ombre portée de la maison

Astuce

Il est facile de se retrouver dans un document Boxy SVG. Il suffit d'ouvrir la fenêtre "objects".
Pour sélectionner un objet il suffit de cliquer sur item de la liste d'objets.
Pour supprimer un objet il suffit de sélectionner un item de la liste puis tapez SUPP.
Ci-dessous une capture d'écran de l'interface avec le dernier chemin sélectionné et la fenêtre "objects" affichées. Dans la liste des objets l'objet sélectionné apparait sur fond bleu.

Dès que vous êtes satisfait du rendu d'un objet vous pouvez le verrouiller via la fenêtre "objects". Vous pouvez aussi le masquer.
En effet à côté de chaque item de la liste d'objets il y a deux commandes sous forme d'icônes. Dès qu'une commande est activée l'icône devient blanc.

Amélioration de l'image

Je veux flouter l'ombre portée de la maison et je veux aussi que l'image vectorielle deviennent responsive.
Mais je ne vois pas comment réaliser ces modifications du code SVG avec Boxy SVG.

Ce n'est pas dramatique je vais améliorer mon code en manuel.
Toutes mes connaissances de la syntaxe SVG vont alors m'être très utile ...
Ci-dessous des extraits du code du document Boxy SVG avec les modifications et ajouts via un éditeur de texte tel NotePad.

J'ai rajouté dans la balise SVG les attributs width & height.
J'ai défini un filtre : flou gaussien
j'ai appliqué ce filtre identifié "flou" au dernier "path".

Le rendu suite aux modifications : image SVG

Boxy SVG : les formes de base

Dans le document Boxy ci-dessous j'ai dessiné les formes de base grâce aux commandes de la barre d'outils "tools" située à gauche.
Pour afficher la liste des objets créés il suffit de sélectionner "objects" dans la barre d'outils "panels" située à droite de la zone de dessin.
La zone de dessin peut être zoomée ou dézoomée en appuyant sur + ou -. image SVG

Vous pouvez donc constater que j'ai créé 8 formes de nature différentes.