Je vous épargne la création du diagramme, si vous êtes arrivé jusqu'ici, c'est que vous connaissez un peu illustrator.

Pour la partie "enregistrer votre SVG", je vous renvoie au sujet réalisé par Michael Chaize qui détaille bien les points importants sur l'optimisation du fichier, le pourquoi du comment.

En attendant que je trouve comment placer le svg dans ce blog (trouvé : tag embed plutôt que img), n'hésitez pas à cliquer sur l'image pour voir le rendu interactif.

Ai-svg-calques.pngIci, on va s'atteler à simplement décortiquer notre fichier. première chose, pour le svg, on va décomposer les éléments pour se faciliter la vie : les groupes conserveront leur "id" identifiant qu'on pourra ensuite cibler avec le code. Le nom des calques sera traduit dans le svg. Attention, cependant, chaque id doit être unique, sinon Illustrator vous mettra des _1 _2 en supplément.

Mon fichiers comporte donc les Arches (A1, A2, A3…), les groupes (G1, G2…) et les Légendes (L1…).

Ai-svg-styles.pngPour ce qui est de la mise en forme, Illustrator génère des styles graphiques automatiquement (les classes) qu'il nomme .st1, .st2…

Si vous masquez un calque, cela fera partie des attributs de style du svg.

Ici, on utilise les styles graphiques (par exemple, un style "SansStyle", sans contour, sans fond, et un style "Noir", qui comporte le contour des arcs. A l'enregistrement du svg, il ne faudra pas oublier de demander à incorporer les styles inutilisés (il ne sait pas que vous les utilisez dans le code.

Ai-svg-interactivite.png

Enfin, la partie interactive (et donc code) vient du panneau interactivité svg, où vous pourrez ajouter des comportements selon les évènements, du type mouseOver, mouseOut.

Puisqu'on a peu de place dans cette fenêtre, je propose de faire appel à un fichier javascript externe qu'il conviendra d'appeler via son dossier. Illustrator génèrera le code nécessaire.

Ai-svg-fichiersJS.pngJ'appelle donc 2 fonctions, afficher et masquer, qui prennent le 2e caractère de ma référence (ex, on survole G1, il renvoit "1"), puis on va changer le style de L1 et A1.

A vous de jouer avec le fichier joint.

function afficher( ref, type ) {
var legende = "L"+ref.id.charAt(1);
var arche = "A"+ref.id.charAt(1);
document.getElementById(legende).classList.add("st6");
document.getElementById(arche).classList.add("Noir");
}
function masquer( ref, type ) {
var legende = "L"+ref.id.charAt(1);
var arche = "A"+ref.id.charAt(1);
document.getElementById(legende).classList.remove("st6");
document.getElementById(arche).classList.remove("Noir");
}

Pour le reste, vous avez toujours d3js ou raphaeljs qui font rêver tout amateur de data-visualisation, même s'ils demandent (plus que) des notions de programmation avancée.