Lors du 23ème CaenCamp, Pierre-Emmanuel Fringant présente le format vectoriel SVG et les atouts qu’il apporte à l’heure du responsive webdesign.
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
Icônes
Graphiques, infographies
Cartes
Images bitmap responsives
Intégrer un SVG
Manipuler SVG avec CSS
Filtres SVG
Manipuler SVG en Javascript
Animer SVG
Outils
