« Tutoriel SVG-editor » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Création de la page Tutoriel SVG-Editor)
 
Ligne 16 : Ligne 16 :
Nous verrons dans cette rubrique les différents outils à notre disposition, leur emplacement et l'effet de leur manipulation sur le code SVG.
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===
===A gauche===
Outil de sélection
Outil de sélection<br />
Crayon à main levé
 
Tracer des lignes / Connecter deux objets (la ligne suit l'objet si vous en déplacez un des deux)
Crayon à main levé<br />
Rectangle / Carré / Rectangle à main levée (le dessin à main levé devient un rectangle précis) (<rect>)
 
Ellipse / Cercle / Ellipse à main levée (<ellipse>
Tracer des lignes / Connecter deux objets (la ligne suit l'objet si vous en déplacez un des deux)<br />
Dessiner un tracé (<path>)
 
Bibliothèque d'images (plein de dessins intéressants classés par thématique à décrire !)
Rectangle / Carré / Rectangle à main levée (le dessin à main levé devient un rectangle précis) (<rect>)<br />
Texte
 
Outil image (importe une image depuis une URL à donner)
Ellipse / Cercle / Ellipse à main levée (<ellipse>)<br />
Loupe de zoom
 
Polygone (par défaut : pentagone)
Dessiner un tracé (<path>)<br />
Etoile
 
Pipette (sélection d'une couleur)
Bibliothèque d'images (plein de dessins intéressants classés par thématique à décrire !)<br />
 
Texte<br />
 
Outil image (importe une image depuis une URL à donner)<br />
 
Loupe de zoom<br />
 
Polygone (par défaut : pentagone)<br />
 
Etoile<br />
 
Pipette (sélection d'une couleur)<br />
 
Panning (déplacement de la page de travail et non du dessin ou d'un élément)
Panning (déplacement de la page de travail et non du dessin ou d'un élément)


Ligne 70 : Ligne 83 :


Palette de couleurs
Palette de couleurs


==Modification du code SVG==
==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).
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).

Version du 19 octobre 2015 à 09:58

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

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