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:
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
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx=100 cy=100 r=50 fill="aqua" />
</svg>
Anatomie d'un fichier SVG avec un chemin simple
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'extensionSVG. Juste SVG, pas les autres.
Sinon, il existe des simples éditeurs en ligne: