SVG with external CSS and media queries – Lab – Graham Bird

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.

vía SVG with external CSS and media queries – Lab – Graham Bird.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s