Last Updated: February 25, 2016
· 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:

In action (use print preview):

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.