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.

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 Inkscape

Ci-dessous l'image vectorielle créée via Boxy SVG puis améliorée avec Inkscape. image SVG

En effet je n'ai pas trouvé la commande floutage dans l'interface de Boxy SVG (je ne dis pas qu'elle n'existe pas).
Ce n'est pas grave j'ai réouvert le fichier SVG avec Inkscape et j'ai flouté certaines formes et certains groupes pour donner à mon image un côté plus artistique ...

Boxy SVG : les formes de base

image vectorielle

Dans ce document réalisé via Boxy SVG j'ai inséré les formes de base proposées par le menu de gauche : ellispe, rectangle, anneau, triangle, étoile, pentagone, ligne à main levée.
A certains objets j'ai rajouté un contour.
J'ai aussi groupé trois formes un seul objet (un triangle + un rectangle + un rond ) pour dessiner une flèche.
Le fichier correspondant ne pèse que 3 KO.

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

<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <rect x="55.738" y="40.906" width="117.213" height="81.967" style="fill: rgb(105, 109, 46); stroke: rgb(229, 193, 190); stroke-width: 10; stroke-linejoin: round;"/> <ellipse style="fill: rgb(118, 203, 125); stroke-width: 5; stroke: rgb(177, 204, 89);" transform="matrix(-0.847998, 0.529999, -0.529999, -0.847999, 830.697408, 22.987888)" cx="404.918" cy="178.689" rx="54.129" ry="54.129"/> <path style="fill: rgb(69, 69, 220);" transform="matrix(-0.743294, 0.668965, -0.668965, -0.743294, 517.051506, 396.220521)" d="M 175 391 m -55.138 0 a 55.138 55.138 0 1 0 110.276 0 a 55.138 55.138 0 1 0 -110.276 0 Z M 175 391 m -33.083 0 a 33.083 33.083 0 0 1 66.166 0 a 33.083 33.083 0 0 1 -66.166 0 Z" bx:shape="ring 175 391 33.083 33.083 55.138 55.138 1@54cc82bc"/> <path style="fill: rgb(201, 196, 54);" transform="matrix(0.609707, 0, 0, 0.580045, 155.652069, 15.699415)" d="M 511 402 A 105.095 105.095 0 1 1 417 249.905 L 417 355 Z" bx:shape="pie 417 355 0 105.095 116.565 360 1@e3387a6a"/> <path d="M 128.689 362.863 L 175.047 443.158 L 82.33 443.158 L 128.689 362.863 Z" style="fill: rgb(142, 109, 89);" transform="matrix(0.996762, -0.08041, 0.08041, 0.996762, -87.163663, -4.697753)" bx:shape="triangle 82.33 362.863 92.717 80.295 0.5 0 1@84f7a8cd"/> <path d="M 362 459.704 L 408.883 493.767 L 390.975 548.881 L 333.025 548.881 L 315.117 493.767 Z" style="fill: rgb(93, 205, 211);" transform="matrix(0.992592, -0.1215, 0.121499, 0.992592, -195.685342, -76.123024)" bx:shape="n-gon 362 509 49.296 49.296 5 0 1@ee0beb25"/> <path d="M 526 484.332 L 543.791 535.513 L 597.965 536.617 L 554.786 569.353 L 570.477 621.217 L 526 590.267 L 481.523 621.217 L 497.214 569.353 L 454.035 536.617 L 508.209 535.513 Z" style="fill: rgb(150, 64, 64);" transform="matrix(-0.639118, 0.769108, -0.769108, -0.639118, 1162.685709, 330.404393)" bx:shape="star 526 560 75.668 75.668 0.4 5 1@12282c44"/> <path d="M 129.508 458.197 C 138.087 458.197 152.724 464.296 161.475 467.213 C 169.398 469.854 183.386 467.213 191.803 467.213 C 216.12 467.213 240.437 467.213 264.754 467.213" style="fill: rgb(216, 216, 216); stroke-width: 5; stroke: rgb(18, 39, 73); stroke-linecap: round;"/> <g style="" transform="matrix(0.967147, 0, 0, 1, 7.13431, 0.000018)"> <rect x="233.88" y="143.033" width="76.503" height="126.366" style="fill: rgb(126, 120, 54);"/> <path d="M 274.181 53.962 L 331.206 152.733 L 217.155 152.733 L 274.181 53.962 Z" style="fill: rgb(126, 120, 54);" bx:shape="triangle 217.155 53.962 114.051 98.771 0.5 0 1@cfa1f68f"/> <ellipse style="fill: rgb(126, 120, 54);" transform="matrix(-0.707106, 0.707107, -0.707107, -0.707107, 656.638259, 336.336298)" cx="228.142" cy="314.891" rx="39.245" ry="39.245"/> </g> </svg>

Remarquez que le code généré n'est pas verbeux (comme avec Inkscape). Bien au contraire il est un peu trop succinct.
La balise SVG a l'attribut viewBox mais ni l'attribut width ni height ...
Les formes n'ont pas d'attribut ID. Donc si vous envisagez d'animer certains objets il faudra au préalable les identifier.
Remarquez aussi que les couleurs (de remplissage et de contour) sont codées en RGB sous forme d'une règle de style en ligne (donc prioritaire sur une règle de style interne ...).
Les trois formes constitutives de la flèche sont groupées avec le conteneur G.

Du dessin statique à l'animation

Le code modifié (extraits)

... <style> @keyframes taille_couleur { 0%{fill : blue ; transform:scale(1);} 50%{fill : white ;transform:scale(1.5); } 100% {fill : red ; transforme :scale(2)} } #fleche{animation : taille_couleur 9s 0s infinite linear alternate ; } </style> ... <g id ="fleche"> <rect x="233.88" y="143.033" width="76.503" height="126.366" /> <path d="M 274.181 53.962 L 331.206 152.733 L 217.155 152.733 L 274.181 53.962 Z" bx:shape="triangle 217.155 53.962 114.051 98.771 0.5 0 1@cfa1f68f"/> <ellipse transform="matrix(-0.707106, 0.707107, -0.707107, -0.707107, 656.638259, 336.336298)" cx="228.142" cy="314.891" rx="39.245" ry="39.245"/> </g> ...

Le rendu

Observez bien le changement de couleur, de taille et la translation de la flèche.
Pour que le changement d'échelle ne provoque aussi une translation il faudrait rajouter dans la règle de style : #fleche { ... transform-origin : center center; } image vectorielle
Retour menu