Last Updated: February 25, 2016
·
780
· laurentgoderre

Use CSS media queries to style SVG graphics

It's possible to have an SVG graphic embed in a web page display differently based on the browser's media type though media queries.

For example, you can display different color treatment for a logo depending if it's displayed on screen or print.

Code example:

https://github.com/wet-boew/wet-boew/blob/master/src/theme-wet-boew/images/logo.svg

In action (use print preview):

http://wet-boew.github.io/wet-boew/demos/index-eng.html

Note! for this to work, the SVG has to either be embed with an object tag or included in the HTML5 markup. Image tag and background images currently don't work.