Présentation de Boxy SVG

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.

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

Ci-dessous l'interface de Boxy SVG

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

<?xml version="1.0" encoding="utf-8"?> <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(7, 20, 10);"/> <g> <rect x="272" y="247" width="316" height="187" style="fill: rgb(39, 6, 6);"/> <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(39, 6, 6);"/> <rect x="477" y="97" width="47" height="84" style="fill: rgb(39, 6, 6);"/> </g> <rect x="346" y="264" width="40" height="60" style="fill: rgb(216, 216, 216);"/> <rect x="346" y="264" width="40" height="60" style="fill: rgb(228, 230, 146);"/> <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.02459, 0, 0, 1.02459, -186.88524, -88.04771)" bx:shape="pie 275 180 0 66 121 360 1@611802b9"/> <path d="M 276 434 L 585 434 L 610 564 L 299 564 L 276 434 Z" style="fill: rgb(50, 36, 36);"/> </svg>

Admettez que le code est succinct.
Le premier "path" (dans le conteneur G) correspond à un rectangle converti en chemin.
Le deuxième chemin correspond au croissant de lune.
Le troisième chemin correspond à l'ombre de la facade.

Amélioration de l'image

Je veux flouter la lune et ombrer la silhouette lugubre de la maison. Il suffit de définir des filtres et de les appliquer à certains objets SVG.

Ajouts via NotePad :

... <defs> <filter id="flou1"> <feGaussianBlur stdDeviation="4" /> </filter> <filter id="flou2"> <feGaussianBlur stdDeviation="8" /> </filter> </defs> ... <path filter ="url(#flou1)" ... <path filter ="url(#flou2)"... </svg>

Il faut ajouter des définitions de filtres : deux flous gaussiens.
Il faut applique l'un des flous au clair de lune et l'autre à l'ombre.

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

La barre d'outils "panels"

Pour supprimer une forme il suffit de la sélectionner dans la liste proposée par la commande "objects" et de produire la commande Edit/delete
Mais toujours avec le menu "objects" vous pouvez verrouiller et/ou masquer une forme. Même masquée la forme apparaitra toujours dans la liste.

Grâce à la commande "view" de la barre d'outils "panels" j'avais au préalable modifié les valeurs par défaut du "viewBox" qui sont : 0 0 500 500.
Ainsi j'ai réglé le troisième paramètre à 800.

Le code SVG correspondant (généré par l'application)

<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <defs> <bx:grid x="0" y="0" width="50" height="50"/> </defs> <rect x="50" y="50" width="100" height="100" style="fill: rgb(96, 235, 69);"/> <ellipse style="fill: rgb(123, 63, 226);" cx="294" cy="100" rx="56" ry="50"/> <path d="M 450 100 m -50 0 a 50 50 0 1 0 100 0 a 50 50 0 1 0 -100 0 Z M 450 100 m -31 0 a 31 30 0 0 1 62 0 a 31 30 0 0 1 -62 0 Z" style="stroke-width: 1; fill: rgb(238, 212, 15);" bx:shape="ring 450 100 31 30 50 50 1@6449e635"/> <path d="M 884 286 A 48 48 0 1 1 836 238 L 836 286 Z" style="fill: rgb(236, 16, 16);" transform="matrix(1.02459, 0, 0, 1.04167, -232.99179, -197.91666)" bx:shape="pie 836 286 0 48 90 360 1@4e6e9d6b"/> <path d="M 166 200 L 166 300 L 50 300 L 166 200 Z" style="fill: rgb(59, 211, 235);" transform="matrix(0.99998, -0.00658, 0.00658, 0.99998, -1.64412, 0.71664)" bx:shape="triangle 50 200 116 100 1 0 1@0fa1bc0f"/> <path d="M 294 197 L 350 236 L 329 300 L 259 300 L 238 236 Z" style="fill: rgb(224, 235, 21);" bx:shape="n-gon 294 254 59 57 5 0 1@d46d8e0b"/> <path d="M 527 211 L 527 270 L 598 252 L 527 270 L 571 318 L 527 270 L 483 318 L 527 270 L 456 252 L 527 270 Z" style="fill: rgb(238, 212, 19);" bx:shape="star 527 270 75 59 0 5 1@2a3540a4"/> <path style="fill: rgb(55, 26, 5);" transform="matrix(-0.64179, 0.79868, -0.79868, -0.64179, 1160.41333, -9.96418)" d="M 618 309 L 636 309 L 640 335 A 48 48 0 0 1 651 339 L 672 324 L 684 336 L 669 357 A 48 48 0 0 1 673 368 L 699 372 L 699 390 L 673 394 A 48 48 0 0 1 669 405 L 684 426 L 672 438 L 651 423 A 48 48 0 0 1 640 427 L 636 453 L 618 453 L 614 427 A 48 48 0 0 1 603 423 L 582 438 L 570 426 L 585 405 A 48 48 0 0 1 581 394 L 555 390 L 555 372 L 581 368 A 48 48 0 0 1 585 357 L 570 336 L 582 324 L 603 339 A 48 48 0 0 1 614 335 Z M 627 357 A 24 24 0 0 0 627 405 A 24 24 0 0 0 627 357" bx:shape="cog 627 381 24 48 72 0 8 1@6b8de4ce"/> <line style="stroke: rgb(0, 0, 0); stroke-width: 19; stroke-linecap: round;" x1="598" y1="250" x2="773" y2="250"/> </svg>

Analyse du code généré

Remarquez que le code généré n'est pas verbeux. Bien au contraire il est un peu trop succinct. Ainsi les formes n'ont pas l'attribut ID. Or si vous envisagez d'animer en CSS3 il faudra les identifier.
Comme le code SVG est succinct il est facile de savoir où insérer le code SVG basé sur la balise animate. Voir chapitre suivant.

La balise SVG a l'attribut viewBox mais ni l'attribut width et height ...

Dans le conteneur defs vous trouvez la définition d'une grille.

Dans le code de chaque chemin une partie n'est pas du standard SVG. Par exemple pour l'étoile on peut lire : ... bx:shape="star 527 270 75 59 0 5 1@2a3540a4"

Remarquez que les paramètres width, height, x, y, cx, cy, rx, ry des formes sont exprimés sous forme d'entiers ! En effet j'ai réglè les "préférences".
Commande : Edit/préférences/geometry precision = 0

Le rendu ce document Boxy dans la page web

image SVG

Animer certains objets de ce fichier

J'ai ouvert le fichier créé par l'application Boxy SVG avec NotePad et j'ai rajouté du code au sein du conteneur rect

Extrait du code après amendements

... <rect x="50" y="50" width="100" height="100" style="fill: rgb(96, 235, 69);"> <animate attributeType ="XML" attributeName="width" values = "100;300;100" begin="click" dur="10s" repeatCount="indefinite"/> <animate attributeType ="XML" attributeName="height" values = "100;300;100" begin="click" dur="10s" repeatCount="indefinite"/> </rect> ...

Commentaires

La balise simple rect devient une balise double (conteneur) pour contenir deux instructions animate
Notez qu'il faut cliquer sur le carré vert pour démarrer l'animation.
Si vous ne comprenez pas ce code, visitez (dans le même site) le tuto "animer des objets SVG !
J'aurais pu animer le rectangle avec CSS ou avec JavaScript. Mais ici j'ai préféré animer avec le SMIL.

Rendu du document Boxy SVG modifié dans la page web

Cliquez sur le carré vert pour démarrer l'animation le concernant !

Pour que l'animation fonctionne dans la page web j'ai du insérer le fichier SVG avec la balise object alors que pour la version non animée l'insertion pouvait se faire avec la balise img.

Attention il ne faut plus désormais modifier ce fichier avec Boxy SVG car vous perdriez le code relatif aux animations !
Retour menu