Recherche sur SVG

Bonjour,

J'aimerais savoir si vous connaissez de bons tutoriaux sur la manière d'intégrer de manière conforme du SVG au sein d'une page HTML.

On trouve pas mal d'article sur le web, mais la majorité datent déjà de plusieurs années, et sont plutôt des "retours sur expérience" que des tutoriaux à proprement dire.

Je comprend assez bien la syntaxe XML pour créer des svg. Je suis vraiment plus intéressé au niveau de l'intégration d'images SVG au sein de page web, sur les techniques pour rendre le contenu plus accessibles, et tout ce qui a un lien avec les bonnes pratiques à ce niveau !

Merci d'avance.

Bonjour,

à défaut de t'être glissé dans les valises de D. Boudreau pour venir à Paris-Web , voilà les slides et exemples de l'atelier de Jérémie Patonnier sur le sujet : http://jeremie.patonnier.net/post/2011/10/18/Paris-Web-2011-%3A-SVG-et-Typographie (assez bas dans la page, après sa euh présentation éclair enfin Lightning talk ... et sa conf')
Ça a été filmé et la vidéo sera en ligne "bientôt" c'est-à-dire décembre ou mars
Je n'ai pas vu son atelier mais les retours étaient excellents.
Modifié par Felipe (22 Oct 2011 - 21:30)

Wow vraiment intéressant tous ces liens.

À la base je voulais seulement intégrer des images vectorielles pour un site mobile, et ce faisant je n'ai pas pu m’empêcher de remarquer que SVG peut faire pas mal plus... C'est assez impressionnant !

Pour mon cas en particulier, j'ai intégré les fichiers SVG dans des balises <img/> et je lance un parceur JS qui remplace les images vectorielles par des images au format traditionnel lorsque le SVG n'est pas supporté. À prime abord, j'ai opté pour cette option puisque le fallback était simple et que l'attribut alt sera toujours disponible.

Cela dit, je me retrouve avec un petit FOUC (flash of unstyled content) avant que mon script remplace les images... Vous auriez une meilleure idée alliant accessibilité en SVG ? (Donc pas d'utilisation de background image au cas où les images ne soient pas loadés)

Et, pendant mes lectures, je me suis questionné sur le support des balises <desc> et <text> de SVG. Est-ce là une manière satisfaisante aujourd'hui pour rendre le contenu de ces images accessible ?

Heu… ce n'est pas nécessaire d'utiliser Javascript, il suffit d'utiliser svg avec object et un fallback sur img.