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>
5 * ligne 1: Déclaration XML obligatoire au début du fichier
6 * ligne 2: Début du code svg, avec (option) les dimensions du canevas de dessin
7 * ligne 3: Code pour un cercle
8 * 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

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/
• Ajout d'extensions 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 en ligne:

• https://framavectoriel.org/svg-editor.html
• https://svg-edit.github.io/svgedit/editor/svg-editor.html