Discussion :

[Community Management]

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

[esired]

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/.

[Kikuts]

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

[Community Management]

Chers membres du club,

J'ai le plaisir de vous présenter la deuxième partie de cette série de Maurice Chavelli qui se propose de vous apprendre à utiliser le format SVG. Ce second tutoriel tente de montrer comment le SVG a trouvé sa place dans le web et présente également le potentiel encore peu exploité qu'il recèle.

« SVG est à la fois construit avec le langage XML, donc quelque chose de bien structuré et aussi un format graphique. Ainsi, on ne peut pas séparer l'aspect graphique de la structure!
Internet pullule d'images, mais elles sont en majorité aux formats PNG, JPG… De telles images se contentent d'être une représentation pixélisée et ne comportent rien d'autre. Il en va bien différemment du SVG ! Il est structuré, stylisable et modifiable.
On peut même utiliser directement un fichier SVG pour créer une application utilisable sur le WEB.
Le souci principal avec le SVG est sa prise en charge assez aléatoire selon les navigateurs, mais c'est également vrai pour certaines fonctionnalités du CSS3.
En 2016 a été lancée la version 2 du SVG, mais combien de temps faudra-t-il avant de pouvoir l'utiliser ? Pour le moment, il faut se contenter de la version 1.1. »

Bonne lecture.

Retrouvez les meilleurs cours et tutoriels pour apprendre le XML

[Community Management]

Chers membres du club,

J'ai le plaisir de vous présenter la troisième partie de cette série de tutoriels que vous propose Maurice Chavelli pour vous apprendre à utiliser le format SVG. Dans ce tutoriel, l'auteur va plus loin et montre les belles possibilités qui nous sont offertes.

« La base du dessin c'est la ligne et SVG est bien équipé dans le domaine. On a vu qu'on dispose de la balise line. Par défaut on a stroke: none, ce qui signifie qu'une ligne n'est pas visible par défaut ! »

Bonne lecture.

Retrouvez les meilleurs cours et tutoriels pour apprendre le XML.

[Nadinette]

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