Apprendre à utiliser le format SVG - Les bases

Un tutoriel de Maurice Chavelli

Le 2018-06-25 22:08:47, par Community Management, Community Manager

Chers membres du club,

J'ai le plaisir de vous présenter une série de tutoriels de Maurice Chavelli qui se propose de vous apprendre à utiliser le format SVG. Dans cette première partie, nous allons en apprendre les bases.

Les images au format SVG (Scalable Vector Graphics) sont vectorisées, contrairement aux images au format JPG ou PNG par exemple. Qu'est-ce que ça implique ?

On peut donner la dimension qu'on veut à une image SVG sans perte de qualité.

Le format est basé sur XML, donc lisible et facilement modifiable, il est aussi peu encombrant.

On peut ajouter du style CSS.

On peut créer des animations de plusieurs façons.

Retrouvez les meilleurs cours et tutoriels pour apprendre le XML

Discussion forum

5 commentaires

esired
Membre averti

Cool le tutoriel. Merci beaucoup.
Je sais pas si c'est en rapport direct avec le tuto, mais il y a la bibliothèque d3.js qui permet de faire des trucs assez cool avec JS et SVG. https://d3js.org/.

le 27/06/2018 à 0:33
Kikuts
Membre éprouvé

Super tuto !

Le SVG est le deuxième langage le plus cool après le XAML :p

J'ai toujours adoré ce langage qui est loin d'être aussi utilisé qu'il ne le devrait...
Si c'était natif à l'écosystème UWP, Android et iOS, ça serait le pied.

J'utilisais la lib Velocity.js pour animer le SVG.
Exemple avec la banière sur mon site : http://krossapp.com/services.php

le 30/07/2018 à 15:00
Nadinette
Membre habitué

Bonjour,
J'ai créé un petit schéma en svg avec des cercles représentant des étapes.
J'utilise ce schéma soit sur des pages web, soit dans un power point.
Disons qu'il a 10 étapes.
Parfois, il représente plusieurs étapes (3 des 10 cercles seront remplis de rouge).
Pour le moment, j'ai créé 10 versions avec 1 cercle remplis pour chacune d'elles.
D'après toi, on pourrait créer un seul svg et lui passer un paramètre ?
Je ne parle pas d'une partie de la balise qui serait paramétrable car ça ne fonctionnerait pas dans le ppt.
Plutôt un paramètre comme un ?fillmask=0111000000 ou un truc comme ça...
Merci pour ta réponse
Bonne journée

le 07/05/2021 à 15:03