SVG, format clé du responsive

Le format SVG est en plein essor depuis l’avènement du responsive design. Nous verrons les situations pour lesquelles ce format est adapté, et les différentes manières de l'intégrer dans un layout responsive.

Transcript

1. SVG, format clé du responsive Pierre-Emmanuel Fringant http://www.mh-communication.fr @pefringant
2. Responsive webdesign • Grille flexible • Media queries • Images fluides
3. Scalable Vector Graphics • Formules mathématiques vs pixels • Rendu calculé selon la surface • Balises XML • Spécifications : version 1.1
4. Pour quels usages ? • Logo http://www.inpixelitrust.fr/demos/SVG_tests/ • Icones http://www.restoready.com/themes-restoready/ http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/ • Graphique, infographie http://www.highcharts.com/demo/ • Carte http://www.inafon.fr/stages http://www.rouen.fr/videosurveillance
5. Pour quels usages ? • Visuel animé • Visuel interactif • Images bitmap responsives
6. Comparaison des formats • GIF : 256 couleurs, alpha sur 1 bit • PNG : 16,7 M de couleurs, alpha sur 8 bits • JPEG : 16,7 M de couleurs, pas d’alpha • SVG : 16,7 M de couleurs, alpha implicite
7. GIF 720px * 480px : 3kb @x2
8. PNG 720px * 480px : 5kb @x2
9. JPEG 720px * 480px : 5kb @x2
10. SVG 535 b @x2, @x10, @x1000...
11. Anatomie du SVG Prologue XML dans un fichier .svg Balise SVG Si le SVG contient des liens
12. Anatomie du SVG Accessibilité • ARIA role=”img” • tab-index=0 • Attribut alt sur les images de fallback • Texte descripitif entre <object> et </object>
13. Anatomie du SVG Formes CaenCamp
14. Anatomie du SVG Lien • Prend la forme de ce qu’il contient Id et classes
15. Anatomie du SVG Groupes • Rendu au moment du <use> Symboles
16. Anatomie du SVG Définitions • Rendu au moment du <use>
17. viewBox • Zone visible • viewBox == Artboard dans Illustrator • http://jonibologna.com/svg-viewbox-and-viewport/
18. preserveAspectRatio • Facteur de taille par rapport à viewBox • Homogène ou non
19. Intégrer le SVG • <img> • <embed> • <object>, <iframe> (peu documenté) • <svg> • CSS : background-image Quelle que soit la méthode, support après IE8 et Android 2.3
20. <img> http://caniuse.com/#feat=svg-img
21. <img> • Ancien alias entre <img> et <image> • Sur IE 9-11 : 2 requêtes http mais la deuxième de 0 byte Fallback <image>
22. <img> • Javascript inline :( Fallback ‘onerror’
23. <img> • Dépendances :( Fallback Modernizr + jQuery 1.x
24. <embed> • Pas standard : ne pas l’utiliser.
25. <object> http://caniuse.com/#feat=svg
26. <object> Fallback html
27. <object> Fallback Modernizr + CSS
28. <svg> http://caniuse.com/#feat=svg-html5
29. <svg> Fallback html
30. <svg> Fallback Modernizr + CSS
31. CSS background-image http://caniuse.com/#feat=svg-css
32. CSS background-image • Supports du SVG et des backgrounds multiples équivalents • Pas de requête http inutile Fallback backgrounds multiples
33. CSS background-image Fallback Modernizr + CSS
34. Intégrer un SVG fluide http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ • <img> • <object>
35. Intégrer un SVG fluide • <svg>, <iframe>
36. Choisir la méthode • <img> et background-image : pas de contrôle sur l’intérieur du SVG • <img> et <object> mis en cache navigateur • <svg> pas mis en cache • <svg> et <object> : contrôle par CSS et Javascript externes • <object> et <iframe> : same-domain policy
37. Styles CSS • En inline dans le fichier .svg • En inline dans <object><svg> ou <svg>
38. Styles CSS Import d’un fichier CSS • Peut être la CSS globale • Attention aux restrictions de sécurité
39. Styles CSS Depuis la CSS globale • Sur <object><svg> et <svg> • Ils font partie du DOM
40. Propriétés CSS applicables http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties • fill • stroke • font • gradient • filter • ...
41. Transformations CSS • rotate • scale • translate • opacity
42. Pseudo-classes • :hover • :active • :focus
43. Media queries Support : • <img> et background-image : insuffisant • <object><svg> ou <svg> : bon
44. Media queries • Clown Car Technique http://www.smashingmagazine.com/.../clown-car-technique...
45. Filtres SVG http://caniuse.com/#feat=svg-filters
46. Filtres SVG • Exemple : Blur • Et plein d’autres… http://tutorials.jenkov.com/svg/filters.html
47. Animer un SVG • SMIL http://caniuse.com/#feat=svg-smil
48. Animer un SVG • CSS ◦ @keyframes ◦ animation
49. Javascript et SVG • Inline : fichier externe • Inline
50. Javascript et SVG • Depuis la page appelante sur <object><svg> et <svg> • Librairies : Snapsvg, SVG.js, d3.js...
51. Flux de production Grunticon https://github.com/filamentgroup/grunticon • Input : un dossier de .svg • Output : ◦ Un fichier CSS avec les svg en data-uri ◦ Un fichier CSS avec les png en data-uri ◦ Un fichier CSS avec lien vers les png physiques ◦ Un petit loader en js async qui sert la bonne CSS • Facultatif : tâche Grunt svgmin
52. Outils • Illustrator http://www.adobe.com/fr/products/illustrator.html Payant, Win/Mac • Inkscape http://www.inkscape.org/fr/ Gratuit, Win/Mac/Linux • Sketch http://bohemiancoding.com/sketch/ 79$, Mac
53. Où trouver des SVG ? • Banques d’images vectorielles .svg mais aussi .ai, .eps • Fichiers PDF • Fontes • Images assez simples > Image Trace
54. Conclusion • Gros potentiel • Facile à créer • Facile à intégrer • Outils pour le workflow • Très bon support
55. Remerciements • Frédéric Bisson @zigazou • Stéphanie Walter @walterstephanie • Chris Coyier - CSS Tricks • Sara Soueidan @SaraSoueidan • Scott Jehl @scottjehl
56. Des questions ? pierre.fringant@gmail.com http://www.mh-communication.fr @pefringant