Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG, format clé du responsive

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.

Pierre-Emmanuel Fringant

September 25, 2014
Tweet

More Decks by Pierre-Emmanuel Fringant

Other Decks in Design

Transcript

  1. SVG, format clé du
    responsive
    Pierre-Emmanuel Fringant
    http://www.mh-communication.fr
    @pefringant

    View full-size slide

  2. Responsive webdesign
    ● Grille flexible
    ● Media queries
    ● Images fluides

    View full-size slide

  3. Scalable Vector Graphics
    ● Formules mathématiques vs pixels
    ● Rendu calculé selon la surface
    ● Balises XML
    ● Spécifications : version 1.1

    View full-size slide

  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

    View full-size slide

  5. Pour quels usages ?
    ● Visuel animé
    ● Visuel interactif
    ● Images bitmap responsives

    View full-size slide

  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

    View full-size slide

  7. GIF
    720px * 480px : 3kb @x2

    View full-size slide

  8. PNG
    720px * 480px : 5kb @x2

    View full-size slide

  9. JPEG
    720px * 480px : 5kb @x2

    View full-size slide

  10. SVG
    535 b @x2, @x10, @x1000...

    View full-size slide

  11. Anatomie du SVG
    Prologue XML dans un fichier .svg
    Balise SVG
    Si le SVG contient des liens

    View full-size slide

  12. Anatomie du SVG
    Accessibilité
    ● ARIA role=”img”
    ● tab-index=0
    ● Attribut alt sur les images de fallback
    ● Texte descripitif entre et

    View full-size slide

  13. Anatomie du SVG
    Formes
    CaenCamp

    View full-size slide

  14. Anatomie du SVG
    Lien
    ● Prend la forme de ce qu’il contient
    Id et classes

    View full-size slide

  15. Anatomie du SVG
    Groupes
    ● Rendu au moment du
    Symboles

    View full-size slide

  16. Anatomie du SVG
    Définitions
    ● Rendu au moment du

    View full-size slide

  17. viewBox
    ● Zone visible
    ● viewBox == Artboard dans Illustrator
    ● http://jonibologna.com/svg-viewbox-and-viewport/

    View full-size slide

  18. preserveAspectRatio
    ● Facteur de taille par rapport à viewBox
    ● Homogène ou non

    View full-size slide

  19. Intégrer le SVG


    ● , (peu documenté)

    ● CSS : background-image
    Quelle que soit la méthode,
    support après IE8 et Android 2.3

    View full-size slide


  20. http://caniuse.com/#feat=svg-img

    View full-size slide


  21. ● Ancien alias entre et
    ● Sur IE 9-11 : 2 requêtes http mais la deuxième de 0 byte
    Fallback

    View full-size slide


  22. ● Javascript inline :(
    Fallback ‘onerror’

    View full-size slide


  23. ● Dépendances :(
    Fallback Modernizr + jQuery 1.x

    View full-size slide


  24. ● Pas standard : ne pas l’utiliser.

    View full-size slide


  25. http://caniuse.com/#feat=svg

    View full-size slide


  26. Fallback html

    View full-size slide


  27. Fallback Modernizr + CSS

    View full-size slide


  28. http://caniuse.com/#feat=svg-html5

    View full-size slide


  29. Fallback html

    View full-size slide


  30. Fallback Modernizr + CSS

    View full-size slide

  31. CSS background-image
    http://caniuse.com/#feat=svg-css

    View full-size slide

  32. CSS background-image
    ● Supports du SVG et des backgrounds multiples équivalents
    ● Pas de requête http inutile
    Fallback backgrounds multiples

    View full-size slide

  33. CSS background-image
    Fallback Modernizr + CSS

    View full-size slide

  34. Intégrer un SVG fluide
    http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/


    View full-size slide

  35. Intégrer un SVG fluide
    ● ,

    View full-size slide

  36. Choisir la méthode
    ● et background-image : pas de contrôle
    sur l’intérieur du SVG
    ● et mis en cache navigateur
    ● pas mis en cache
    ● et : contrôle par CSS et
    Javascript externes
    ● et : same-domain policy

    View full-size slide

  37. Styles CSS
    ● En inline dans le fichier .svg
    ● En inline dans ou

    View full-size slide

  38. Styles CSS
    Import d’un fichier CSS
    ● Peut être la CSS globale
    ● Attention aux restrictions de sécurité

    View full-size slide

  39. Styles CSS
    Depuis la CSS globale
    ● Sur et
    ● Ils font partie du DOM

    View full-size slide

  40. Propriétés CSS applicables
    http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
    ● fill
    ● stroke
    ● font
    ● gradient
    ● filter
    ● ...

    View full-size slide

  41. Transformations CSS
    ● rotate
    ● scale
    ● translate
    ● opacity

    View full-size slide

  42. Pseudo-classes
    ● :hover
    ● :active
    ● :focus

    View full-size slide

  43. Media queries
    Support :
    ● et background-image : insuffisant
    ● ou : bon

    View full-size slide

  44. Media queries
    ● Clown Car Technique
    http://www.smashingmagazine.com/.../clown-car-technique...

    View full-size slide

  45. Filtres SVG
    http://caniuse.com/#feat=svg-filters

    View full-size slide

  46. Filtres SVG
    ● Exemple : Blur
    ● Et plein d’autres…
    http://tutorials.jenkov.com/svg/filters.html

    View full-size slide

  47. Animer un SVG
    ● SMIL
    http://caniuse.com/#feat=svg-smil

    View full-size slide

  48. Animer un SVG
    ● CSS
    ○ @keyframes
    ○ animation

    View full-size slide

  49. Javascript et SVG
    ● Inline : fichier externe
    ● Inline

    View full-size slide

  50. Javascript et SVG
    ● Depuis la page appelante
    sur et
    ● Librairies : Snapsvg, SVG.js, d3.js...

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  53. Où trouver des SVG ?
    ● Banques d’images vectorielles
    .svg mais aussi .ai, .eps
    ● Fichiers PDF
    ● Fontes
    ● Images assez simples > Image Trace

    View full-size slide

  54. Conclusion
    ● Gros potentiel
    ● Facile à créer
    ● Facile à intégrer
    ● Outils pour le workflow
    ● Très bon support

    View full-size slide

  55. Remerciements
    ● Frédéric Bisson @zigazou
    ● Stéphanie Walter @walterstephanie
    ● Chris Coyier - CSS Tricks
    ● Sara Soueidan @SaraSoueidan
    ● Scott Jehl @scottjehl

    View full-size slide

  56. Des questions ?
    [email protected]
    http://www.mh-communication.fr
    @pefringant

    View full-size slide