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
Slide 7
Slide 7 text
GIF
720px * 480px : 3kb @x2
Slide 8
Slide 8 text
PNG
720px * 480px : 5kb @x2
Slide 9
Slide 9 text
JPEG
720px * 480px : 5kb @x2
Slide 10
Slide 10 text
SVG
535 b @x2, @x10, @x1000...
Slide 11
Slide 11 text
Anatomie du SVG
Prologue XML dans un fichier .svg
Balise SVG
Si le SVG contient des liens
Slide 12
Slide 12 text
Anatomie du SVG
Accessibilité
● ARIA role=”img”
● tab-index=0
● Attribut alt sur les images de fallback
● Texte descripitif entre et
Slide 13
Slide 13 text
Anatomie du SVG
Formes
CaenCamp
Slide 14
Slide 14 text
Anatomie du SVG
Lien
● Prend la forme de ce qu’il contient
Id et classes
Slide 15
Slide 15 text
Anatomie du SVG
Groupes
● Rendu au moment du
Symboles
Slide 16
Slide 16 text
Anatomie du SVG
Définitions
● Rendu au moment du
Slide 17
Slide 17 text
viewBox
● Zone visible
● viewBox == Artboard dans Illustrator
● http://jonibologna.com/svg-viewbox-and-viewport/
Slide 18
Slide 18 text
preserveAspectRatio
● Facteur de taille par rapport à viewBox
● Homogène ou non
Slide 19
Slide 19 text
Intégrer le SVG
●
●
● , (peu documenté)
● <svg>
● CSS : background-image
Quelle que soit la méthode,
support après IE8 et Android 2.3
Slide 20
Slide 20 text
http://caniuse.com/#feat=svg-img
Slide 21
Slide 21 text
● Ancien alias entre et
● Sur IE 9-11 : 2 requêtes http mais la deuxième de 0 byte
Fallback
Media queries
Support :
● et background-image : insuffisant
●
Slide 44
Slide 44 text
Media queries
● Clown Car Technique
http://www.smashingmagazine.com/.../clown-car-technique...
Slide 45
Slide 45 text
Filtres SVG
http://caniuse.com/#feat=svg-filters
Slide 46
Slide 46 text
Filtres SVG
● Exemple : Blur
● Et plein d’autres…
http://tutorials.jenkov.com/svg/filters.html
Slide 47
Slide 47 text
Animer un SVG
● SMIL
http://caniuse.com/#feat=svg-smil
Slide 48
Slide 48 text
Animer un SVG
● CSS
○ @keyframes
○ animation
Slide 49
Slide 49 text
Javascript et SVG
● Inline : fichier externe
● Inline
Slide 50
Slide 50 text
Javascript et SVG
● Depuis la page appelante
sur
Slide 51
Slide 51 text
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