SVG with external CSS and media queries

This page demonstrates two interesting aspects of SVG that you may not be aware of: styling the SVG with an external CSS file and amending the SVG based on media queries. Below are the four most common ways to display SVG in a browser. If both external CSS and media queries are working, you should see four green Twitter birds with FTW.

<img>

<div>

 

<iframe>

<object>

It appears that displaying SVG with the <object> tag is still the best method (assuming it doesn't have to be a background) as it honours both external CSS references and media queries in all modern browsers - plus of course it allows fallback content for browsers that don't support SVG.