Lab Widgets, wotsits & what-not
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.
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.
|Opera 11.5||Safari 5.1||Firefox 5||Chrome 13|
|SVG file is displayed||All methods||All methods||All methods||All methods|
|External CSS works||All methods|
|Media queries work||All methods|