Vous êtes dans la zone de contenu principal de la page

Media Queries et SVG

Images SVG et media queries…

L'utilisation des images SVG est de plus en plus fréquente sur les sites internet. Ces sites sont également conçus en design « responsive » grâce à l'utilisation des media queries.
Et si on utilisait les media queries dans les sources SVG ? Aller, c'est parti !

Dans le principe, un fichier SVG peut être considéré comme une « page dans la page ». Abus de langage s'il en est, mais il s'agit d'expliquer le comportement des media queries appliquées à un document SVG.
Le principe est tout simple car totalement équivalent à ce qui se pratique dans une feuille de styles appliquée à un document HTML.

Le code SVG

Ici, on peut voir que les media queries sont intégrés dans le style du document SVG. Pour l'exemple, des formes simples ont été intégrées (un carré à angles arrondis et un cercle posé sur le carré).

L'affichage du svg

C'est au moment de l'affichage que la prise en compte des media queries se fait.
IL suffit d'appeler le même fichier en ne modifiant que les attributs width et height ou de gérer par ces tailles par une feuille de style.

Les media queries internes au SVG vont s'appliquer sur la dimension intrinsèque de l'image sans tenir compte des media queries du document principal.

Exemples

Dans ce dernier exemple, le radius défini par les attributs rx et ry sont surchargés pour arrondir la balise rect. Voir la CSS interne ci-dessus.

In fine, il ne reste plus qu'à appliquer sur différents path, g ou autres au sein du SVG… Le tout associé à un peu de javascript interne au SVG et voilà matière à bien s'amuser !

Utilisation des sources
Les sources de « Media Queries et SVG » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec