Projet de snippets de code HTML CSS JS pour l'utilisation de SVG dans les pages web. Aide au choix en fonction des besoins ou contraintes

svg-project-desc.md

Utilisation de SVG : aide au choix

But

• Fournir des conseils, recenser des snippets, montrer des exemples d'utilisation de SVG dans les pages web ;
• Guider le choix de l'intégration (inline, object, CSS, ...) en fonction des besoins, cas d'usage et contraintes ;
• Recenser des problèmes rencontrés

Rappels

1. Rappels et ressources sur SVG ;
2. Quelques conseils et astuces sur le SVG lui même (namespaces, < use >, < pattern > etc.) ;
3. Les éditeurs SVG (illustrator, inkscape ...) et leurs différences.

Cas d'usage avec exemples de code en fonction des contraintes

Pour chaque usage essayer d'intégrer les fallbacks envisageables

Logo

• Lien vers l'article de Stéphanie Walter sur alsa (+ reprise des codes ?)
• le cas de Kozlika, avec contraintes fortes et sa solution \o/ (et solutions alternatives ?)

Icones

• Comparaison par rapport aux sprites (avec gestion des écrans HD, l'article de Nicolas Hoffmann sur sprites et écrans HD est un bon point de comparaison ;
• Comparaison avec icon fonts et solutions
  • Grunticon / Grumpicon (et avantage par rapport aux icon fonts dont support) ;
  • Iconizr (pas testé mais la génération de sprites est à voir)

images de "décoration"

• parler du "blur" avec chrome et ie sur les SVG en background CSS et voir comment le limiter (use et décalage plutôt que filtre, pattern plutôt que background-repeat en CSS)
• alternative inline au background css et mise en garde sur les conséquences (perfs, maintenabilité)

Graphiques (? avec la suivante)

Aller plus loin avec svg

SMIL, javascript, raphaeljs, snapsvg, svgjs ...

( je ne serais d'aucune utilité sur cette partie ;) )

Note :

Mes connaissances sur SVG sont limitées aux expérimentations que j'ai pu faire et aux recherches pour résoudre les problèmes rencontrés. J'ai principalement utilisé SVG pour des QR Codes générés en PHP, ce qui m'a amené à me familiariser avec rect circle path et tester les filtres, use, pattern... et découvrir que les éditeurs ne supportaient pas tous les mêmes choses ou créaient parfois un code "surprenant". Le support des navigateurs lors des tests (affichage) et création de png via js (canvas et toDataUrl) C'est donc très partiel (limité à mes besoins).

Ces expérimentations m'ont aussi amené à aimer SVG ;) et à vouloir partager le peu que j'ai appris et à aider quand c'est possible...

Je pense que tout le monde rencontre plus ou moins les mêmes "surprises" et que partager les problèmes et solutions pourrait faire gagner du temps et favoriser l'adoption du SVG.

Plus nous serons nombreux à partager, même (surtout?) les échecs, plus on avancera.

Pascal