SVG, format clé du responsive

L’affichage de visuels adaptables à la largeur et la résolution d’écran est l’un des trois piliers du responsive design, avec la grille flexible et les media queries.

Le format SVG, pour Scalable Vector Graphics, enregistre non pas une grille de pixels comme les formats GIF, JPG ou PNG mais seulement les formules mathématiques qui correspondent aux tracés. Ainsi, l’affichage de ce format passe par une phase de rendu en fonction de la surface d’affichage, garantissant un résultat parfait quel que soit l’écran.

Le format SVG est fait de balises XML parfaitement lisibles et manipulables, il est donc très facile de les générer par un langage de programmation, à partir de données dynamiques.

La présentation commence par énumérer les situations pour lesquelles le format SVG est adapté, cas réels à l’appui. Nous étudions ensuite les différentes manières de l’intégrer dans une page, et le support correspondant sur les navigateurs. Nous voyons enfin comment manipuler le SVG avec les feuilles de styles CSS et le Javascript.

Liens utiles

Exemples d’utilisation

Logo

• http://www.inpixelitrust.fr/demos/SVG_tests/

Icônes

• http://www.restoready.com/themes-restoready/
• Pourquoi Lonely Planet est passé d’une webfont à SVG pour ses icônes

Graphiques, infographies

• http://www.highcharts.com/demo/

Cartes

• http://www.inafon.fr/stages
• http://www.rouen.fr/videosurveillance

Images bitmap responsives

• Clown Car Technique

Intégrer un SVG

• viewBox
• preserveAspectRatio
• Making SVG responsive

Manipuler SVG avec CSS

• http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties

Filtres SVG

• http://tutorials.jenkov.com/svg/filters.html

Manipuler SVG en Javascript

• SnapSVG
• SVG.js
• D3
• Générer du SVG en JS

Animer SVG

• SMIL
• En CSS

Outils

• Adobe Illustrator
• Inkscape
• Sketch
• Grunticon

La présentation au Forum Digital