InkStitch - bases SVG

Introduction

Cet article a pour objectif de présenter le langage SVP aux utilisateurs de Ink/Stitch.

Origine et utilisation de SVG

SVG signifie Scalable Vector Graphics (Graphiques Vectoriels Adaptables) et est un standard W3C (en XML), spécifiquement conçu pour afficher des dessins sur le web. SVG s’intègre bien aux autres formats W3C et fait partie intégrante du standard HTML5 utilisé pour créer des pages web.

Vectoriel vs Matriciel:

Différence conceptuelle entre les images matricielles (bitmap) et vectorielles.
Les images vectorielles peuvent être agrandies à l’infini.

Usages typiques:

• Partage de dessins (clipart, etc.)
• visualisation de contenus (économiques, processus, cartes, etc.)
• interfaces utilisateurs (icônes, etc.)
• dessins statiques, animés ou interactifs dans le domaine de l’éducation

Histoire:

• Crée en 1999, standardisé en 2001, peu aimé au début
• SVG 1.1 (jan 2003 / 2é édition en 2011)
• Intégration à HTML5 (2014)

Caractéristiques:

• Dimensions, structure et coordonnées d'objets sous forme numérique (code editable, sauf pour les images)
• Possibilité d'utiliser la langage CSS pour définir des styles
• Formes géométriques de base: lignes, rectangles, ellipses, etc.
• Chemins (courbes de Bézier et permettent d’obtenir presque n’importe quelle forme).
• Fontes
• Imbrication d'images matricielles

Anatomie d'un fichier SVG avec un objet simple

SVG circle - en pixels

1 <?xml version="1.0"?>
2 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
3     <circle cx="100" cy="100" r="50"  fill="aqua" />
4 </svg>

• ligne 1: Déclaration XML obligatoire au début du fichier
• ligne 2: Début du code svg, avec (option) les dimensions du canevas de dessin
• ligne 3: Code pour un cercle
• ligne 4: Fin du XML (et donc aussi fin du fichier)

La même chose en utilisant des "mm" à la place de pixels

SVG circle - en mm

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="4cm" height="4cm">
    <circle cx="20mm" cy="20mm" r="10mm"  fill="aqua" />
</svg>

Traduction du même dessin en chemin (avec un défaut / bug de InkScape). Il est presque impossible de comprendre le langage "path" qui permet de définir un chemin.

SVG circle chemin - en mm

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="4cm" height="4cm">
    <path
     style="fill:#00ffff"
     d="M 113.38583,45.354332
        A 37.795277,37.795277 0 0 1 75.590553,83.149609 
          37.795277,37.795277 0 0 1 37.795277,45.354332 
          37.795277,37.795277 0 0 1 75.590553,7.5590553 
          37.795277,37.795277 0 0 1 113.38583,45.354332 Z"
     id="circle1473" />  
</svg>

• M = positionner aux coordonnées X/Y (Move to)
• A = rx ry x-axis-rotation large-arc-flag sweep-flag x y
• Z Fermer le tout.

Vous pouvez tuer la première et la dernière ligne et le cercle est toujours là, sans points en trop. SVG corrigé à télécharger

  <path
     style="fill:#00ffff"
     d="M 113.38583,45.354332 
        A 37.795277,37.795277 0 0 1 37.795277,45.354332 
        37.795277,37.795277 0 0 1 113.38583,45.354332 Z"
     id="circle1473" />

Outils d'édition

Exploration: Avec un éditeur, créez un simple torse (tronc, tête et 2 bras).

Inkscape contient un éditeur d'arbre, pratique pour faire des petites modifications, mais difficile à utiliser pour des "grands travaux". On conseille d'installer un éditeur de programmation, par exemple Visualstudio Code (gratuit, Win/Mac/Linux).

Installation de VisualStudio code:

• Téléchargement: https://code.visualstudio.com/
• Ajoutez l'extension SVG: Fichier->Préférences->Extensions , puis entrer "SVG" et sélectionner l'extension SVG. Juste SVG, pas les autres.

Sinon, il existe des simples éditeurs SVG en ligne:

• https://framavectoriel.org/svg-editor.html
• Démo (https://svg-edit.github.io/svgedit/editor/svg-editor.html)

Le formalisme XML

XML (Angl. eXtended Markup Language) est un langage de balisage et sert à encoder/structurer des données (textes, formats vectoriels, messages entre machines, feuilles de style,...). Il existes des centaines de langages XML (par exemple les documents Office comme docx sont des fichiers zip avec du XML dedans). SVG est un langage XML obéit aux contraintes suivantes: Pour qu'un document soit bien formé, cela veut dire du véritable XML, il doit respecter les règles suivantes.

(1) Le document commence par une déclaration XML (l’attribut version est obligatoire):

<?xml version="1.0"?>

(2) Structure hiérarchique:

• begin-tags (balises d’ouverture) et end-tags (balises de fermeture) doivent correspondre
• pas de croisements de types de balises (<g>...<rect>...</g> .... </rect> : FAUX)

(3) Case sensitive, c'est-à-dire : il faut respecter la casse (majuscule, minuscule) et l'orthographe exacte d'une même balise. Exemple de non-respect de la casse : <Courses> n'est pas égal à </courses>

(4) Toutes les balises doivent être fermées Les balises de type "EMPTY" (balises sans balises de fermeture ...) nécessitent une syntaxe spéciale:

• Ces balises sans contenu utilisent la syntaxe XML "auto-fermante" (par ex.. <br/>)
• Les valeurs d’attributs sont entre guillemets (quoted), par ex:

<rect x="150" y="100" width="100" height="50" style="fill:red;stroke:blue;stroke-width:1"/>

(5) Un seul élément racine (root):

• L’élément racine se trouve au début et à la fin du fichier. Dans notre cas <svg> ....</svg>

(6) Caractères spéciaux: (qu'on ne peut pas utiliser)

<   &  >  "  '

• Il faut substituer les caractères spéciaux ci-dessus par &lt; &amp; &gt; &aquot; &apos; à la place de: <, &, >,", ’

En plus, un langage XML

• définit le jeux de balises utilisables ainsi que leurs attributs,
• spécifie leur possible imbrication (relation).