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.

Palette d'outils

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

A gauche

Outil de sélection Crayon à main levé Tracer des lignes / Connecter deux objets (la ligne suit l'objet si vous en déplacez un des deux) Rectangle / Carré / Rectangle à main levée (le dessin à main levé devient un rectangle précis) (<rect>) 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 !) Texte Outil image (importe une image depuis une URL à donner) Loupe de zoom Polygone (par défaut : pentagone) Etoile 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

Mode fil de fer

Show/hide grid (grillage)

Revenir en arrière

Annuler le retour en arrière

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

Cloner l'élément

Supprimer l'élément

Déplacer vers le haut (pas compris) et Déplacer vers le bas (pas compris)

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 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 : largeur et hauteur pour un rectangle; rayon <r> pour une ellipse; x1, x2, y1, y3, dessin des deux bouts et du milieu pour un trait qu'il soit droit ou non; 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

Loupe de zoom et dézoom

Paramètres de couleur : couleur de remplissage, couleur du contour, opacité (en %)

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

Palette de couleurs

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