Tutoriel SVG-editor

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Introduction

Ce petit tutoriel a pour but de compléter le mini-tutoriel SVG-editor du Tutoriel_SVG_statique, chapitre 10. SVG-editor est un logiciel de dessin SVG en ligne qui permet une édition simultanée du dessin par les outils de dessin ou par la modification du code.

Voir aussi

• L'article SVG (lire d'abord)
• Tutoriel SVG dynamique avec SMIL (suite)
• Tutoriel SVG/SMIL animations interactives (suite)
• Tutoriel SVG interactif et animé avec DOM (suite)

Prise en main

Tout d'abord, rendez-vous sur la page SVG-editor. Voici la page qui vous permettra de créer des images SVG. L'outil des paramètres généraux (SVG-Edit) en haut à gauche de la page vous permet de créer une nouvelle image (ouvrir une page blanche), d'ouvrir une image (.SVG), d'importer un objet SVG (inclure une image .gif, .png, .jpeg dans le dessin SVG en cours), d'enregistrer l'image (ouvre l'objet dans une nouvelle fenêtre afin qu'on puisse faire "clic droit> enregistrer sous"), de faire appel à une bibliothèque d'images (IAN Image Library), d'exporter son dessin SVG en .png, .jpeg, .bmp, .webp ou d'accéder aux propriétés du document et ainsi lui donner un titre (lors de l'enregistrement le dessin sera nommé par défaut Layer1.SVG sauf si un titre a été donné) ou changer les dimensions du canevas.
A chaque création d'objet, le logiciel lui donne un identifiant par ordre de création sous la forme <id=svg_nb>. Puisque cela a lieu à chaque création d'objet, nous ne le rappellerons pas ci-dessous.

Palette d'outils

Nous verrons dans cette rubrique les différents outils à notre disposition, leur emplacement, leur raccourci clavier et l'effet de leur manipulation sur le code SVG.

A gauche

Outil de sélection

L'outil de sélection est représenté par une flèche de curseur noire. Le raccourci clavier est V. Il permet de sélectionner les objets présents sur le canevas par groupe et ainsi d'appliquer des changements communs à tous en même temps. La répercussion sur le code SVG est nulle car il s'agit d'un outil de sélection et non de modification. Cependant, la modification faite aux objets sélectionnés se répercute dans le code de chacun d'eux.

Crayon à main levé

Le crayon à main levé est représenté par la pointe d'un crayon faisant un trait ondulé et permet à l'utilisateur de laisser libre cours à sa fibre d'artiste. Le logiciel adoucira ses traits mais ne les transforme pas en lignes. Le raccourci clavier est Q. La répercussion sur le code SVG est la création d'un <path d="x"> où x est un ensemble de coordonnées permettant de réaliser le dessin. A chaque relevé de crayon un nouveau <path> est créé. Cet outil est donc l'un des plus pratiques car il permet de créer un dessin vraiment trop complexe à réaliser en codant.

Tracer des lignes / Connecter deux objets

Cet outil est représenté par la point d'un feutre faisant un trait droit. Il permet au dessinateur de faire des lignes. Le raccourci clavier est L. Utiliser cet outil créera un objet <line> et définira les coordonnées de départ et d'arrivée de la ligne.
L'utilisateur peut sélectionner la fonction "connecter deux objets". La ligne ainsi créée suivra l'objet s'il en déplace un des deux mais uniquement depuis l'interface graphique du logiciel. Dans le code, cette ligne est annoncée comme suit : <polyline se:connector="svg_n1 svg_n2">, elle prend aussi en considération les coordonnées des points reliés : <points="coordonnées 1, coordonnées 2">.

Rectangle / Carré / Rectangle à main levée

Cet outil est représenté par un rectangle bleuté. Le raccourci clavier est R. Si l'utilisateur souhaite que son rectangle soit un carré, il peut sélectionner l'option "Carré", ce qui revient au même que de faire un rectangle et d'en changer les propriétés par la suite. L'option "Rectangle à main levée" permet au dessinateur de dessiner son rectangle en suivant un autre dessin par exemple et le logiciel transformera ses traits en rectangle. Dans tous les cas, la répercussion sur le code SVG est la création d'un objet <rect> suivi de ses propriétés.

Ellipse / Cercle / Ellipse à main levée

(<ellipse>)

Dessiner un tracé

(<path>)

Bibliothèque d'images

(plein de dessins intéressants classés par thématique à décrire !)

Outil image

(importe une image depuis une URL à donner)

Polygone

(par défaut : pentagone)

Pipette

(sélection d'une couleur)

Panning

(déplacement de la page de travail et non du dessin ou d'un élément)

En haut

Toujours présent

Code SVG

voir plus bas

Show/hide grid

(grillage)

Apparition par sélection d'un élément

=====Cloner l'élément=====

=====Supprimer l'élément=====

Convertir en tracer

(devient un <path> dans le code)

Créer hyperlien

(l'élément est entouré par un hyperlien dans le code)

Propriétés de l'élément modifiables par l'utilisateur

• id
• angle de rotation (rotate(x, y, z))
• flou (filter="url(#id_blur)")
• aligner l'élément sur la page (verticalement et horizontalement) par une aide ou
• aligner l'élément sur la page par les coordonnées (x et y en général, cx et cy pour une ellipse)

Propriétés changeantes selon l'élément

• rectangle : largeur et hauteur, changer le rayon des angles
• ellipse : rayon <r>
• trait droit : coordonnées de départ et d'arrivée du trait <x1, x2, y1, y2,>
• trait droit ou trait irrégulier : dessin des deux bouts et du milieu ceci a pour effet de créer l'objet <defs> et les <marker> pour chaque extrémité sélectionnée ou le milieu sous la forme suivante :

 <defs>
 <marker id="se_marker_mid_svg_9" markerUnits="strokeWidth" orient="auto" viewBox="0 0 100 100" markerWidth="5" markerHeight="5" refX="50" refY="50">
  <path id="svg_8" d="m100,50l-100,40l30,-40l-30,-40l100,40z" fill="none" stroke="#000000" stroke-width="10"/>
 </marker>
 <marker refY="50" refX="50" markerHeight="5" markerWidth="5" viewBox="0 0 100 100" se_type="triangle_o" orient="auto" markerUnits="strokeWidth" id="se_marker_end_svg_9">
  <path stroke-width="10" stroke="#000000" fill="none" d="m10,80l40,-60l30,60z"/>
 </marker>
 <marker refY="50" refX="50" markerHeight="5" markerWidth="5" viewBox="0 0 100 100" se_type="star" orient="auto" markerUnits="strokeWidth" id="se_marker_start_svg_9">
  <path stroke-width="10" stroke="#000000" fill="#000000" d="m10,30l80,0l-70,60l30,-80l30,80z"/>
 </marker>
</defs>

et de transformer un <line> droit en objet complexe <polyline>

<polyline marker-mid="url(#se_marker_mid_svg_9)" se:connector="svg_2 svg_1" id="svg_9" points="212.4,91.2572 333.4,70.0997 454.4,48.9422" stroke="#000000" stroke-width="5" fill="none" transform="rotate(8.59007, 333.4, 70.0997)" marker-end="url(#se_marker_end_svg_9)" marker-start="url(#se_marker_start_svg_9)"/>

puisqu'il connecte les deux <marker>

• gras, italique, police pour du texte
• nombre de côtés pour un polygone
• nombre de pointes et leur grosseur ainsi que leur inclinaison pour une étoile

A droite

A droite du dessin, le seul outil disponibles est l'outil "calques". Il permet de créer ou supprimer un calque, de modifier son nom. Rappelons-nous qu'en SVG l'ordre des calques est important car si l'opacité de l'objet du premier calque <g> est supérieure à celle du second, le second calque sera caché par cet objet. Renommer un calque aura pour effet de lui ajouter un titre <title> dans le code et non de renommer l'identifiant.

En bas

Paramètres de couleur

• couleur de remplissage
• couleur du contour
• opacité (en %)
• palette de couleurs

Contour

• Largeur du contour
• Montrer/cacher plus d'outils de contours
  • style
  • raccord
  • terminaison

Modification du code SVG

Si votre dessin implique des formes régulières ou avec des tailles précises, il est conseillé de passer par l'outil de modification de code SVG qui se trouve à côté des paramètres généraux. Il est certes possible de grillager le fond pour avoir une échelle de dimension (show/hide grid), mais définir soi-même les tailles reste la solution la plus sûre pour plus d'homogénéité. En cas de répétition d'une forme similaire, il peut être plus aisé de passer par le code SVG que par l'interface utilisateur (copier/coller).
Par défaut, le premier objet dessiné se retrouvera en tête du calque. L'ordre d'apparition des objets dans le code détermine leur ordre dans le plan. Ainsi, le premier objet dessiné se trouvera en arrière-plan et le dernier objet dessiné se retrouvera en premier plan. Il est possible de changer cela en copiant/collant le code relatif à l'objet et en l'insérant à la place désirée.