Accueil
Mes tutoriels sur la programmation


Tutoriel Inkscape - sommaire

Les filtres avec Inkscape

Les filtres prédéfinis Les filtres - suite

Inkscape - divers

Optimiser le code - extensions Insérer un document Inkscape dans une page web

Animations avec Inkscape

Intégration de "sprites" dans un document Inkscape Animer un document Inkscape avec le SMIL ou CSS

Boxy SVG

Présentation de Boxy SVG Animation de documents Boxy SVG

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

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 cependant 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 le rendu de ce document ("nuit.svg") avec le navigateur :

Le code SVG correspondant

... <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <rect y="2" width="800" height="400" style="fill: rgb(20, 15, 166);"/> <rect y="402" width="800" height="198" style="fill: rgb(79, 111, 86);"/> <g> <rect x="272" y="247" width="316" height="187" style="fill: rgb(102, 71, 109);"/> <path d="M 299 142 C 299 143 567 145 567 145 L 610 247 L 249 247 L 299 142 Z" style="stroke-width: 1; fill: rgb(102, 71, 109);"/> <rect x="477" y="97" width="47" height="84" style="fill: rgb(102, 71, 109);"/> </g> <rect x="346" y="264" width="40" height="60" style="fill: rgb(216, 216, 216);"/> <rect x="488" y="264" width="40" height="60" style="fill: rgb(228, 230, 146);"/> <rect x="346" y="264" width="40" height="60" style="fill: rgb(228, 230, 146); stroke-width: 1;"/> <rect x="414" y="264" width="40" height="60" style="fill: rgb(228, 230, 146); stroke-width: 1;"/> <path d="M 332 214 A 66 66 0 1 1 275 114 L 275 180 Z" style="fill: rgb(222, 236, 113);" transform="matrix(1, 0, 0, 1, -132, -78.93395)" bx:shape="pie 275 180 0 66 121 360 1@611802b9"/> <path d="M 276 434 L 585 434 L 610 531 L 300 530 L 276 434 Z" style="fill: rgb(199, 154, 154);"/> </svg> </svg>

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 (paraléllogramme) correspondont à l'ombre 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.
Le floutage c'est un filtre : flou gaussien
Il suffit d'ouvrir la boite de dialogue compositing puis de sélectionner "gaussian blur" et de règler le curseur "radius" à 9. Il faut aussi règler "opacity" à 0.5.
J'ai aussi appliquer un flou gaussien au clair de lune.

Pour exprimer la largeur du document en pourcentage j'ouvre ce dernier avec NotePad et je rajoute deux attributs à la balise SVG.
Observez le rendu de "nuit.svg" suite aux améliorations :

Extrait de code :

... <svg viewBox="0 0 800 600" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <defs> <filter id="gaussian-blur-filter-0" color-interpolation-filters="sRGB" x="-500%" y="-500%" width="1000%" height="1000%" bx:preset="gaussian-blur 1 8.6"> <feGaussianBlur stdDeviation="8.6 8.6" edgeMode="none"/> </filter> <filter id="gaussian-blur-filter-1" color-interpolation-filters="sRGB" x="-500%" y="-500%" width="1000%" height="1000%" bx:preset="gaussian-blur 1 5"> <feGaussianBlur stdDeviation="5 5" edgeMode="none"/> </filter> </defs> ... <path d="M 332 214 A 66 66 0 1 1 275 114 L 275 180 Z" style="fill: rgb(222, 236, 113); filter: url(#gaussian-blur-filter-1);" transform="matrix(1, 0, 0, 1, -132, -78.93395)" bx:shape="pie 275 180 0 66 121 360 1@611802b9"/> <path d="M 276 434 L 585 434 L 610 531 L 300 530 L 276 434 Z" style="fill: rgb(199, 154, 154); fill-opacity: 0.5; &#10; filter: url(#gaussian-blur-filter-0); opacity: 0.57;" /> </svg>

Ce qui est intéressant avec BOXY SVG c'est que le code SVG est toujours succinct et conforme aux standards.

Dans la balise SVG j'ai rajouté les attributs width & height.
Boxy SVG a rajouté une partie DEFS avec deux définitions de filtres (flou gaussien). Chaque filtre défini a un identifiant.
Remarquez que chaque PATH a désormais dans l'attribut STYLE la propriété FILTER.
Si je voulais animer le clair de lune il suffirait de l'identifier (rajouter l'attribuer ID) puis de rajouter un script ou une feuille de style ou du SMIL.

Boxy SVG : les formes de base

Dans le document Boxy ci-dessous ("formes_base.svg") 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.