ACCUEIL SVG

Tutoriel SVG : Graphiques Vectoriels Évolutifs

SVG signifie **Scalable Vector Graphics** (Graphiques Vectoriels Évolutifs). C'est un langage de balisage basé sur XML pour décrire des graphiques vectoriels bidimensionnels. Contrairement aux images matricielles (comme les JPEG ou PNG), les graphiques SVG sont indépendants de la résolution et peuvent être mis à l'échelle à n'importe quelle taille sans perdre en clarté ou en qualité.

Ce que vous devriez déjà savoir

Avant de vous plonger dans ce tutoriel, une compréhension de base des éléments suivants vous sera utile :

• HTML : Compréhension de la structure et des éléments HTML.
• XML de base : Une familiarité avec la syntaxe XML (balises, attributs) est bénéfique, car SVG est un dialecte XML.

Si vous avez besoin de rafraîchir vos connaissances sur ces sujets, vous pouvez trouver des tutoriels pertinents sur notre page d’accueil ou d’autres ressources d’apprentissage comme MDN Web Docs.

Qu’est-ce que le SVG ?

• Graphiques Vectoriels Évolutifs : Définit des graphiques vectoriels qui s’adaptent parfaitement.
• Standard Graphique Web : Utilisé pour définir des graphiques pour le Web, des icônes simples aux visualisations de données complexes.
• Format XML : Les graphiques SVG sont définis en XML, ce qui les rend lisibles par l’homme et analysables par les machines.
• Qualité sans perte : Les graphiques ne perdent pas en qualité lorsqu’ils sont agrandis ou redimensionnés.
• Animable et Scriptable : Chaque élément et attribut peut être animé (en utilisant CSS, SMIL ou JavaScript) et manipulé via le Document Object Model (DOM).
• Recommandation W3C : SVG est un standard ouvert développé par le World Wide Web Consortium (W3C). La version actuelle largement supportée est SVG 1.1, avec SVG 2 offrant de nouvelles fonctionnalités et améliorations (le support navigateur pour les fonctionnalités de SVG 2 varie).
• S’intègre aux standards Web : Fonctionne en toute transparence avec HTML, CSS, DOM et JavaScript.

Versions de SVG et Recommandation W3C

SVG a évolué au fil du temps :

• SVG 1.0 : Est devenu une Recommandation du W3C le 4 septembre 2001.
• SVG 1.1 : Est devenu une Recommandation du W3C le 14 janvier 2003. Une deuxième édition a été publiée le 16 août 2011 et reste la version la plus largement implémentée.
• SVG Tiny 1.2 : Est devenu une Recommandation du W3C le 22 décembre 2008, conçue pour les appareils mobiles.
• SVG 2 : Est actuellement une Recommandation Candidate du W3C. Bien que n’étant pas entièrement finalisé ou universellement supporté, nombre de ses fonctionnalités sont progressivement implémentées dans les navigateurs modernes. Il vise à aligner SVG plus étroitement avec HTML et CSS.

Il est recommandé de consulter des ressources comme Can I use… pour vérifier le support navigateur des fonctionnalités SVG spécifiques, en particulier les plus récentes de SVG 2.

Avantages du SVG

SVG offre plusieurs avantages par rapport aux formats d’image matriciels (comme JPEG, PNG, GIF) pour de nombreux cas d’utilisation :

• Évolutivité et Indépendance de la Résolution : Les SVG sont nets et clairs à n’importe quelle taille ou résolution, parfaits pour le design réactif.
• Éditables et Modifiables : Peuvent être créés et édités avec n’importe quel éditeur de texte, ou graphiquement avec des outils de dessin vectoriel. Leur structure XML permet une modification facile des propriétés.
• Tailles de Fichier Plus Petites : Pour les graphiques avec des formes plus simples et moins de détails, les SVG peuvent souvent avoir des tailles de fichier plus petites que leurs équivalents matriciels, surtout lorsqu’ils sont optimisés et compressés (par exemple, en utilisant SVGO).
• Accessibilité : Le texte dans les SVG reste accessible, sélectionnable et consultable. L’utilisation appropriée d’éléments comme <title> et <desc> améliore l’accessibilité.
• Interactivité et Animation : Les SVG peuvent être facilement scriptés avec JavaScript et stylisés/animés avec CSS, permettant des expériences interactives riches.
• Qualité d’Impression : Impression de haute qualité à n’importe quelle résolution.
• Standard Ouvert : Non lié à des logiciels ou formats propriétaires.
• Manipulation DOM : Faisant partie du DOM, les SVG peuvent être manipulés dynamiquement par des scripts.

Alors que les images matricielles sont meilleures pour les images photographiques complexes, SVG excelle pour les logos, les icônes, les illustrations, les graphiques et l’art vectoriel interactif.

Création d’Images SVG

Vous pouvez créer des images SVG de plusieurs manières :

• Éditeur de Texte : Écrivez manuellement le code SVG dans un éditeur de texte ou un IDE (comme VS Code). C’est utile pour les graphiques simples ou lorsque vous avez besoin d’un contrôle précis.
• Logiciel de Graphiques Vectoriels : Utilisez des programmes de dessin vectoriel dédiés comme Inkscape (gratuit, open-source), Adobe Illustrator (commercial), Figma (basé sur le web, collaboratif), Affinity Designer (commercial) ou Sketch (macOS, commercial). Ces outils vous permettent de dessiner visuellement, puis d’exporter le résultat sous forme de code SVG.
• Bibliothèques JavaScript : Générez des SVG par programmation en utilisant des bibliothèques JavaScript comme D3.js (pour la visualisation de données), Snap.svg ou GreenSock Animation Platform (GSAP).

Quelle que soit la méthode de création, le résultat est un fichier SVG basé sur XML ou un extrait de code qui peut être intégré dans des pages web.