Accueil

Traduction

Tutoriel Inkscape & Boxy SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Inkscape & Boxy_SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Inkscape : les formes de base

Un conseil : pour dessiner une forme complexe, commencez par dessiner une forme de base puis transformez la en chemin.
Par exemple, pour dessiner un trapèze dessinez d'abord un rectangle ; convertissez le rectangle en chemin puis déplacez les deux noeuds supérieurs et vous obtenez un trapèze. C'est pas plus compliqué !
Autre exemple, pour dessiner une banane dessinez d'abord une ellipse puis transformez cette forme en chemin.
Il vous faudra parfois rajouter des noeuds au chemin.
Il est donc très important de savoir créer et manipuler les formes de bases avant d'aller plus loin.

L'outil "rectangle"

Ci-dessous un document Inkscape contenant différentes formes. image SVG

Les formes de ce document

Le code SVG optimisé de ce document

Propriétés du document

Il s'agit d'une boite de dialogue importante pour obtenir un code SVG propre.
Observez bien le code SVG plus haut et en particulier celui de la balise SVG.
Notez bien les valeurs respectives des attributs width, height & viewBox de la balise SVG.
Quand vous créez un nouveau document Inkscape, il a par défaut le format A4 (exprimé en millimètres).
Ici j'ai remplacé l'unité de mesure "mm" par "px" et j'ai modifié la hauteur et la largeur (600 pixels par 500).
J'ai aussi renseigné "zone de vue" (viewBox en anglais).
Ci-dessous la boite de dialogue "propriétés du document" :

Transformer une forme de base

Incliner des rectangles

Il est utile d'indiquer le code SVG optimisé généré par Inkscape :

Notez comme le code est succinct. Au lieu d'utiliser la fonction skew l'attribut transform utilise la fonction matrix.
Par contre j'ai "oublié" de personnaliser les propriétés du document. Et donc ici les attributs width, height & viewbox de la balise SVG ont leur valeur par défaut. Donc la taille du document est le format A4 (210 par 297 mm).

Rotation de carrés

Avec la boite de dialogue "Objet/transformer" vous pouvez aussi appliquer une rotation à l'élement sélectionné. Ainsi un carré peut devenir un losange.
Attention l'inclinaison OU rotation paramétrée n'est appliquée que si vous cliquez sur le bouton "appliquer" de la boite de dialogue.

Ci-dessus un document Inkscape avec rotation de deux carrés.

Le code optimisé est aussi remarquable par sa simplicité.

L'outil "ellipse"

Pour créer une ellipse autour de la position du curseur appuyez sur la touche MAJ tout en dessinant la forme.
Pur créer un cercle appuyez sur la touche CTRL tout en dessinant la forme.
Pour créer un cercle autour de la position du curseur appuyez simultanément sur les touches CTRL et MAJ tout en dessinant la forme. image SVG

Dans le document ci-dessous deux cercles et deux ellipses.
Les formes du base ont une couleur de contour différente de la couleur de fond.
Pour appliquer une couleur au contour il suffit de la sélectionner dans la palette tout en appuyant sur la touche MAJ.

Le code SVG optimisé du document

Comme pour les documents précédents j'ai personnnalisé les propriétés du document.

Arcs de cercle

Grâce à la commande "créer cercles, ellipses et arcs" vous pouvez créer non seulement des cercles ou des ellipses mais aussi des arcs de cercle (ou d'ellipse) et des "camemberts".

En effet dès que vous avez cliqué sur cet icône l'interface de Inkscape change : la barre de contrôle de l'outil "ellipse" apparaît sous la barre de menus.

Attention on dessine un arc (de cercle ou d'ellipse) dans le sens contraire des aiguilles d'une montre.

Cercles transformés en arcs ou camemberts

Donc vous pouvez transformer un cercle en arc ou en camembert. Même remarque pour une ellipse. image SVG

Dans le document Inkscape ci-dessus un cercle a été dupliqué 3 fois.
Les trois copies ont été transformées en camembert, arc et corde.
Pour ces trois portions de cercle j'ai réglé la liste "début" à 0° et la liste "fin" à 270°
Voyez vous la différence entre un camembert et une corde ?
Il s'agit de formes fermées (alors qu'un arc et une forme ouverte) mais dans le cas d'une corde les extrémités de l'arc sont reliées par un segment alors que pour un camembert les extrémités sont reliées par une ligne brisée passant par le centre.

Le code SVG généré (et optimisé) devient un peu plus complexe (extrait) :

Inkscape génère des chemins (balise path) et plus précisément des arcs de cercle.
Cette fois on apprécie l'outil Inkscape car encoder soi-même ce genre de code devient chronophage.

Arcs d'ellipse

image SVG

Dans le document Inkscape ci-dessus une ellipse a été dupliquée 3 fois.
Les trois copies sont transformées en arcs d'ellipse fermés en jouant sur les listes "début" et "fin".
Premier arc d'ellipse : début :0 , fin : 180
Deuxième arc d'ellipse : début :180 et fin : 0
Troisième arc d'ellipse : début : 90 et fin : 270

En effet on dessine de la droite vers la gauche.

Si l'angle de l'arc vaut 180% (ce qui est le cas ici) la demande d'une corde ou d'un camembert donne le même résultat.

Le code SVG généré:

Dans la valeur de l'attribut path, le "z" final veut dire "fermer la forme !"

Outils "polygones et étoiles

C'est la même commande de la barre d'outils pour produire des polygones et des étoiles.
Pour créer des polygones il faut cliquer sur l'icône "polygones réguliers" de la barre de contrôle des outils.
Et pour créer des étoiles il faut cliquer sur l'icône "étoiles" de cette même barre.

Polygones

Pour les polygones il faut préciser uniquement le nombre de sommets. Vous pouvez donc dessiner des triangles, des losanges, des pentagones, des hexagones, etc.

Pour dessiner une forme autour de la position initiale du curseur il faut maintenir la touche Maj enfoncée lors de la création de la forme.

Ci-dessous un document inkscape avec différents polygones réguliers (côtés égaux). image SVG

Pour le dernier polygone (hexagone) il y a un contour vert de 4px et la forme est à demi opaque.
J'ai réalisé ces mises en forme uniquement via la barre d'état !

Je rappelle que pour appliquer une couleur au contour il faut sélectionner ladite couleur dans la palette tout en appuyant sur la touche MAJ ; cette couleur s'applique alors au contour de l'objet sélectionné.
A gauche de la barre d'état il y a aussi une liste déroulante pour règler l'épaisseur du contour et une autre pour régler l'opacité de la forme.

Etoiles

Ci-dessous un document contenant des étoiles ! image SVG

Tout cela mérite quelques explications.
Le ratio des rayons est le rapport entre le rayon intérieur et le rayon extérieur.
Plus le ratio est faible et plus l'étoile a des bras longs. Plus le ratio est grand et plus les bras sont courts.

Pour le dernier polygone et via la boîte de dialogue "remplissage et contour" j'ai appliqué une dégradé radial basique à la forme ; il suffit de cliquer dans l'icône "dégradé radial" de l'onglet "fond".

Une très bonne vidéo sur les formes de base