Traduction
Tutoriel Inkscape & Boxy SVG - sommaire
Inkscape & Boxy_SVG - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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 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
En haut le barre de menus et à gauche et à droite des barres d'outils.
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.
Ci-dessous le rendu de ce document ("nuit.svg") avec le navigateur :
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.
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.
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 :
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.
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 -.
Vous pouvez donc constater que j'ai créé 8 formes de nature différentes.
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
