SVG con media queries: dar estilo, animar y adaptar con CSS

En un documento HTML podemos mostrar, ocultar o reorganizar partes de la página según las condiciones del viewport. Si la ventana del navegador mide 480 píxeles de ancho, por ejemplo, podemos convertir la navegación de una lista horizontal en una lista vertical plegable. Con SVG y las media queries podemos hacer algo parecido.

Este artículo es un extracto del libro de Tiffany. CSS Master, 3.ª edición. Échale un vistazo si quieres dominar otras funcionalidades avanzadas de CSS3 como Flexbox y Grid.

Además de usar CSS con HTML, también podemos usarlo con SVG, es decir, gráficos vectoriales escalables. SVG es un formato de marcado que describe imágenes planas de dos dimensiones. Como es un lenguaje de marcado, tiene un modelo de objetos del documento y se puede manejar con CSS.

Con CSS podemos cambiar el aspecto de un SVG según la interacción del usuario. También podemos reutilizar el mismo documento SVG en varios sitios y mostrar u ocultar partes de él según el ancho del viewport.

Todos los motores de navegador importantes son compatibles con SVG 1.1 desde hace años. La compatibilidad con las funcionalidades de SVG 2 sigue en cambio en desarrollo. Cuando se escribió este texto, el soporte era limitado para algunos de los temas que veremos aquí, y puede haber cambiado cuando lo leas. Sigue el meta-issue de Chromium Implementación de las funcionalidades de SVG 2 para ver cómo avanzan los navegadores basados en Chromium, el meta-issue Compatibilidad con las funcionalidades de SVG 2 para el trabajo de Firefox y el meta-issue Implementación de SVG 2 de WebKit para Safari. Moverse por los issue trackers es incómodo, pero de momento es la mejor forma de seguir el soporte de SVG 2.

Antes de seguir, veamos qué es SVG y por qué te interesa usarlo.

Imágenes vectoriales frente a imágenes rasterizadas

La mayoría de las imágenes que se usan hoy en la web son imágenes rasterizadas, también llamadas mapas de bits. Las imágenes rasterizadas se componen de píxeles sobre una rejilla fija, con un número definido de píxeles por pulgada. JPEG, WebP, GIF y PNG son formatos de imagen rasterizada.

Las imágenes rasterizadas dependen de la resolución. Un PNG de 144 PPI (píxeles por pulgada) se ve muy bien en un dispositivo cuya pantalla tiene 144 PPI. En una pantalla de mayor resolución (400 PPI), esa misma imagen puede verse borrosa. Además tienen dimensiones fijas y solo lucen bien a su tamaño original: escalar una imagen de 150 por 150 píxeles a 300 por 300 la deforma.

En lugar de usar píxeles sobre una rejilla, los formatos vectoriales describen las formas primitivas (círculos, rectángulos, líneas o trazados) que componen la imagen, junto con su lugar en el sistema de coordenadas del documento. Por eso las imágenes vectoriales son independientes de la resolución y conservan su calidad sea cual sea la resolución o el tamaño de la pantalla.

La independencia de la resolución es la mayor ventaja de SVG: podemos ampliar o reducir las imágenes sin perder calidad, y la misma imagen se ve bien en dispositivos de PPI alto y bajo. Dicho esto, SVG encaja mal con la cantidad de información de color que exige una fotografía. Va mejor para dibujos y formas: úsalo en lugar de PNG y GIF, y como sustituto más flexible de las fuentes de iconos.

Otra ventaja de SVG es que se diseñó para convivir con los demás lenguajes de la web. Podemos crear, modificar y manipular imágenes SVG con JavaScript o, como veremos más adelante, darles estilo y animarlas con CSS.

Asociar CSS a los documentos SVG

Usar CSS con SVG se parece mucho a usarlo con HTML. Podemos aplicar los estilos con el atributo style de un elemento SVG, agruparlos dentro del documento con el elemento <style> o enlazar una hoja de estilos externa. Las ventajas y los inconvenientes de cada método son las mismas que con HTML.

Usar el atributo style

Este es un documento SVG sencillo cuyo código dibuja un círculo negro:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
➥enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>

La imagen de abajo muestra cómo lo renderiza un navegador.

Vamos a darle a nuestro círculo un relleno rosa con CSS y el atributo style:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
➥enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" style="fill: #f9f" />
</svg>

El resultado es el siguiente.

Aquí aparece una diferencia entre usar CSS con HTML y usarlo con SVG: los nombres de las propiedades. Muchas propiedades CSS que empleamos en los documentos HTML no son compatibles con SVG, y al revés. Volveremos sobre ello más adelante en el capítulo.

El atributo style no es, desde luego, la mejor manera de aplicar CSS: limita la reutilización de esos estilos en varios elementos o documentos. Es preferible incrustar el CSS en el documento o enlazarlo.

Incrustar CSS en los documentos SVG

En lugar del atributo style, podemos usar el elemento <style>:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<style type="text/css">
circle {
fill: #0c0;
}
</style>
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>

Incrustar el CSS en un documento SVG permite reutilizar esos estilos en varios elementos del mismo documento, pero impide compartirlos entre documentos. Para logos e iconos va perfecto. Si estás montando algo parecido a una biblioteca de estilos de gráficos, es mejor un archivo CSS externo.

Con un editor de texto normal también puedes añadir CSS a las imágenes SVG creadas con programas como Sketch, Inkscape o Illustrator. Eso no te impide seguir editando la imagen con la aplicación de dibujo, pero si guardas el archivo desde ella, puede reescribir o eliminar tu CSS.

Enlazar un SVG con un archivo CSS externo

Igual que en HTML, enlazar un archivo CSS externo permite compartir los estilos entre varios documentos SVG. Para enlazarlo, añade <? xml-stylesheet ?> al principio de tu archivo SVG:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://www.gekkode.com/es/style.css" type="text/css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>

Usar el elemento <link>

También puedes usar el elemento <link> de HTML. Con este método tendrás que incluir el atributo xmlns, como se ve abajo:

<link href="style.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml" />

Nota: algunos navegadores antiguos necesitan que <link> esté envuelto en una etiqueta <defs> o <g>.

<link> no es un elemento SVG: pertenece a HTML y a XHTML. XHTML es una variante de HTML que se analiza con las reglas del marcado XML. Y las reglas de XML permiten tomar prestados elementos y su comportamiento de otros dialectos XML, como XHTML. Para hacerlo, eso sí, hay que indicarle al navegador a qué espacio de nombres pertenece el elemento con el atributo xmlns.

Usar @import

También podemos enlazar una hoja de estilos externa con @import dentro de las etiquetas <style> y </style>:

<style type="text/css">
@import("https://www.gekkode.com/style.css");
</style>

Este método funciona de forma parecida al de <link>.

SVG y el elemento <img>: límites

Enlazar recursos externos desde un archivo SVG, archivos CSS incluidos, no funciona con el elemento <img>. Es una limitación de seguridad del elemento <img> integrada en los navegadores.

Si quieres usar CSS enlazado con tus imágenes SVG, tienes que hacer una de estas dos cosas:

• usar el elemento <style> dentro del documento SVG para poner el CSS en línea,
• usar un elemento <iframe> u <object> (mira la nota de abajo).

Por lo general conviene usar <iframe> antes que <object>. Ahora bien, <object> puede ser hijo de un elemento <a> y <iframe> no. Tanto <iframe> como <object> exponen además el árbol del documento SVG al árbol del documento padre, así que podemos interactuar con él desde JavaScript (por ejemplo, con document.querySelector('iframe').contentDocument).

SVG en línea y recursos externos

Cuando añades SVG en línea dentro de HTML, el navegador no carga los recursos externos que referencia el documento SVG. Sí podemos, en cambio, enlazar el CSS de nuestro documento SVG desde el <head> del documento HTML:

<head>
    ⋮
<link href="svg.css" type="text/css" rel="stylesheet" />
</head>

Los elementos SVG incluidos en un documento HTML forman parte del árbol del documento HTML. Si usas SVG en línea, puedes combinar sin problema en la misma hoja de estilos las reglas que afectan al HTML y las que afectan al SVG.

Diferencias entre SVG y HTML

Aunque SVG y HTML son lenguajes de marcado, hay dos diferencias importantes entre ellos que cambian su relación con CSS:

• SVG no sigue el modelo de cajas de CSS,
• SVG no tiene esquema de posicionamiento.

SVG no sigue el modelo de cajas de CSS

Con HTML, la maquetación CSS sigue las reglas del modelo de cajas. SVG usa coordenadas: se rige por lo que se entiende mejor como un « modelo de formas ».

Las formas SVG no se limitan a cajas rectangulares, así que la mayoría de las propiedades ligadas al modelo de cajas no se aplican a los elementos SVG. No puedes, por ejemplo, cambiar el padding ni el margin de un elemento SVG. Tampoco puedes usar box-sizing, box-shadow, outline ni las propiedades border-*. Grid, los floats y Flexbox tampoco funcionan.

Lo que sí puedes hacer es usar CSS para definir o modificar toda una serie de propiedades y valores de atributos SVG. La lista completa está en la especificación de SVG 2, aunque el soporte de la mayoría de los navegadores sea incompleto. Algunas propiedades CSS, como filter, sirven tanto para SVG como para HTML. Veremos varias en este capítulo, dentro de técnicas concretas.

SVG no tiene esquema de posicionamiento

Cuando se usa CSS con HTML, las cajas de los elementos pueden:

• existir en el flujo normal,
• salir del flujo normal con la propiedad float,
• salir del flujo normal con la propiedad position.

La especificación CSS los llama esquemas de posicionamiento. En SVG no existen: position no tiene ningún efecto sobre los elementos SVG. Lo mismo vale para propiedades como top, left o bottom, que dependen del posicionamiento. Tampoco puedes hacer flotar elementos dentro de un documento SVG.

SVG usa en su lugar un sistema de coordenadas para colocar los elementos. Para dibujar un <circle>, por ejemplo, defines las coordenadas de su centro con los atributos cx y cy, y la longitud del radio con el atributo r. Un polígono es una serie de coordenadas de puntos con segmentos trazados entre ellas. Dicho de otro modo: puedes decidir dónde se dibuja un elemento en el lienzo SVG, pero no « posicionarlo » en el sentido que CSS le da a esa palabra.

Ligado a los esquemas de posicionamiento, SVG tampoco tiene la noción de z-index ni de contextos de apilamiento.

Nota: la especificación de SVG 2 define un comportamiento para z-index y los contextos de apilamiento en los documentos SVG, pero la mayoría de los navegadores todavía no lo implementan.

Los elementos SVG se apilan según su orden en el código fuente: los que aparecen más tarde quedan encima. Si quieres cambiar ese orden, tendrás que moverlos en el código o reordenarlos en el árbol del DOM con JavaScript.

De hecho, la mayoría de las propiedades de CSS 2.1 no se aplican a los documentos SVG. Las excepciones son las animaciones y las transformaciones, display, overflow, visibility, filter y unas cuantas propiedades de fuente y de texto. En su lugar tendrás que usar las propiedades de estilo específicas de SVG. La mayoría también se pueden expresar como atributos de los elementos SVG.

Dar estilo a los elementos SVG

Este es un ejemplo sencillo de cómo dar estilo a elementos SVG con CSS. Partimos de nuestro documento SVG, un archivo independiente:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://www.gekkode.com/es/styles.css" type="text/css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=
➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497
➥ 184" enable-background="new 0 0 497 184" xml:space="preserve">
<polygon id="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,
➥106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,
➥66.6 "/>
<circle id="circle" cx="245" cy="88.9" r="67.5"/>
</svg>

Este marcado produce la imagen de abajo.

Aunque no podamos usar la mayoría de las propiedades CSS con documentos SVG, sí podemos cambiar el color de un elemento. Vamos a poner amarilla nuestra estrella:

#star {
fill: hsl( 44, 100%, 50% );
}

Verás a menudo fill usado como atributo en las etiquetas SVG, por ejemplo <circle fill="rgb( 255, 185, 0 )" cx="3" cy="10" r="100">, pero también es una propiedad que se puede usar desde CSS.

También podemos ajustar con CSS el stroke de un elemento, es decir, el contorno de una forma SVG. Ese contorno existe aunque no se defina ningún stroke. Vamos a darle a nuestro círculo un borde punteado azul oscuro de diez píxeles de ancho y a poner su propiedad fill en cornflowerblue:

circle {
fill: cornflowerblue;
stroke: darkblue;
stroke-width: 10;
stroke-dasharray: 10, 15;
stroke-linecap: round;
}

Todo junto da el resultado de abajo.

Usar los atributos SVG como propiedades CSS

También podemos usar CSS para definir las coordenadas de algunos elementos de forma: <rect>, <circle> y <ellipse>. Lo habitual sería usar atributos SVG en estos elementos:

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="200" width="300" height="300" fill="#f60" />
</svg>

Pero SVG 2 redefinió algunos atributos como propiedades geométricas, así que podemos fijar sus valores desde CSS:

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
      rect {
x: 20px;
y: 50px;
width:  300px;
height: 300px;
fill: #f60;
}
    </style>
    <rect />
</svg>

Las propiedades de coordenadas (x e y), las de coordenadas del centro (cx y cy) y las de radio (rx, ry y r) se pueden definir con CSS. Lo mismo vale para width y height. En los atributos SVG las unidades son opcionales, en CSS, en cambio, los valores exigen unidades. Tanto las longitudes como los porcentajes son válidos para estas propiedades, pero ten en cuenta que las longitudes funcionan de otra manera en un documento SVG. Recuerda que la S de SVG significa scalable. El tamaño calculado de un elemento SVG depende también de:

• el width y el height calculados del elemento SVG raíz,
• el valor del atributo viewBox del elemento raíz,
• cualquier transformación de escala aplicada al elemento o a sus ancestros.

Dicho de otro modo, las esquinas de nuestro elemento <rect> están en (20, 50), (20, 320), (350, 320) y (20, 350) dentro del sistema de coordenadas SVG. Pero las dimensiones reales pueden ser mayores o menores según los factores anteriores.

No todos los atributos SVG están disponibles desde CSS, al menos no en todos los navegadores. Chrome y Edge, por ejemplo, admiten la función CSS path() para definir los datos de trazado del atributo d:

path {
d: path("M 454.45223,559.21474 -304.96705,163.45948 417.4767,-296.33928 Z");
}

A día de hoy son los únicos navegadores que lo hacen. El trabajo para añadir soporte en Firefox y en WebKit todavía no ha empezado.

Para los demás elementos de forma, la especificación de SVG 2 es directamente incoherente. Hoy por hoy tienes que usar los atributos del elemento para definir las propiedades de <line>, <polyline> y <polygon>.

Dicho esto, no estamos limitados a los selectores de tipo (o de elemento) para definir las propiedades. Podríamos, por ejemplo, definir círculos pequeños, medianos y grandes con selectores de clase:

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">

.small {
cx: 20px;
cy: 20px;
r:  20px;
fill:  #0c0;
}

.medium {
cx: 80px;
cy: 80px;
r:  60px;
fill:  #fc0;
}

.large {
cx: 220px;
cy: 220px;
r:  120px;
fill: #00f;
}

</style>

<circle class="small" />
<circle class="medium" />
<circle class="large" />
</svg>

Sea cual sea el selector, usar la sintaxis CSS para especificar las propiedades también facilita animarlas. Veremos cómo en la sección siguiente.

Animar y hacer transiciones de las propiedades CSS en SVG

Usar CSS con SVG se pone más interesante cuando entran en juego las transiciones y las animaciones. El proceso es el mismo que para animar elementos HTML con CSS, pero con propiedades específicas de SVG. Vamos a crear un efecto de estrella que parpadea con este documento SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px"
➥ y="0px" viewBox="0 0 497 184" xml:space="preserve">
<defs>
<link href="twinkle.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
<polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2
➥,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5
➥ 55.8,66.6 "/>
<polygon class="star twinkle" points="77,23.7 98.2,66.6 145.5,
➥66.5 111.2,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9
➥ 8.5,67.5 55.8,66.6 "/>
</svg>

Nuestro documento contiene dos elementos polígono con forma de estrella, cada uno con la clase star. Para conseguir el parpadeo vamos a animar el primero. Este es nuestro CSS:

@keyframes twinkle {
from {
fill-opacity: .4;
}
to {
fill-opacity: 0;
transform: scale( 2 );
}
}
.star {
fill: rgb( 255,195,0 );
transform-origin: 50% 50%;
}
.twinkle {
animation: twinkle 1.5s infinite forwards ease-in;
}

Aquí hemos usado la propiedad fill-opacity, específica de SVG. Igual que en CSS, si podemos interpolar el valor de una propiedad de estilo SVG, podemos animarlo o aplicarle una transición. En la imagen de abajo ves dos momentos distintos de la animación.

Veamos otro ejemplo. Esta vez vamos a crear un efecto de dibujado haciendo una transición sobre stroke-dasharray. Este es nuestro documento SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" enable-background="new 0 0 200 200">
<circle fill="transparent" stroke-width="16" cx="101.3"
➥ cy="96.8" r="79.6"/>
</svg>

stroke-dasharray acepta una lista de longitudes o porcentajes, separados por comas, que crean un patrón de guiones. Los valores impares determinan la longitud del guion, los pares, la del hueco. Un stroke-dasharray de 5, 10 significa que el trazo medirá 5px con un hueco de 10px entre cada guion. Un valor de 5, 5, 10 alterna guiones de 5px y de 10px con 5px de separación.

Podemos usar stroke-dasharray para crear un efecto de dibujado empezando con una longitud de guion nula y un hueco grande, y terminando con un guion largo y un hueco nulo. Después hacemos la transición entre ambos estados. Nuestro CSS queda así:

circle {
transition: stroke-dasharray 1s ease-in;
fill: transparent;
stroke-dasharray: 0, 500;
}
.animate {
stroke-dasharray: 500, 0;
}

Al principio de la transición el trazo es invisible porque la longitud del guion es 0 y el hueco es de 500. Pero cuando añadimos la clase animate a nuestro círculo, llevamos la longitud del guion a 500 y eliminamos el hueco. El efecto se parece a dibujar un círculo con un compás. ¿Por qué 500? Es el valor más pequeño que producía este efecto concreto.

Un futuro con trazados animados

¿Te acuerdas del ejemplo de la sección anterior en el que definíamos un trazado con CSS? Puede que algún día podamos animar los trazados en todos los navegadores desde CSS:

path {
d: path("M357.5 451L506.889 192.25H208.111L357.5 451Z");
transition: d 1s ease-in-out;
}
.straighten {
d: path("M357.5 8871L406 -10113.75H208.111L357.5 351Z");
}

De momento, solo los navegadores basados en Chromium, como Google Chrome y Microsoft Edge, admiten animar así las definiciones de trazado. Para que funcione en los demás, usa una biblioteca JavaScript como GreenSock y su MorphSVGPlugin. Además de la compatibilidad con los navegadores, GreenSock y MorphSVGPlugin facilitan el morphing entre dos formas, tengan los puntos que tengan cada una.

Usar SVG con media queries

En los documentos HTML podemos mostrar, ocultar o reorganizar partes de la página según las condiciones del viewport. Si la ventana del navegador mide 480 píxeles de ancho, por ejemplo, podemos pasar la navegación de una lista horizontal a una lista vertical plegable. Con las media queries y los documentos SVG podemos hacer algo parecido. Tomemos un logo, como el de la empresa ficticia Hexagon Web Design & Development que ves abajo.

Sin media queries, este logo SVG se estiraría o se encogería para adaptarse al viewport o a su contenedor. Con media queries podemos hacer cosas más finas.

Conviene distinguir entre el viewport del documento HTML y el del documento SVG. Cuando el SVG está en línea, los dos son el mismo: el documento SVG se comporta como cualquier otro elemento HTML. Cuando el documento SVG está enlazado, en cambio (con <iframe>, <object> o <img>), entra en juego el viewport del documento SVG.

Las media queries funcionan en los dos casos, pero cuando el documento SVG está enlazado su viewport es independiente del documento HTML. Entonces el tamaño de la ventana del navegador no determina el del viewport SVG: lo determinan las dimensiones del elemento <object>, <iframe> o <img>. Fíjate en este documento SVG, abreviado:

<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/
➥svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="0 0 555 174" xml:space="preserve">
<defs>
<style type="text/css">
/* CSS goes here */
</style>
</defs>
<g id="hex">
<polygon id="hexagonbg" points="55.2,162 10,86.5 55.2,11
➥ 145.5,11 190.7,86.5 145.5,162  "/>
<path id="letterH" fill="#FFFFFF" d="M58,35.5h33v35.2h18.
➥4V35.5 h33.2v103.4h-33.2v-38.3H91v38.3H58V35.5z M77.5,126.5V87.
➥3h45.6v39.2h4V47.9h-4v35.6H77.5V47.9h-4v78.6H77.5z"/>
</g>

<g id="word-mark">
<g id="hexagon-word">
            ...
</g>
<g id="web-design-and-dev">
            ...
</g>
</g>
</svg>

Nota: hay una demostración completa de esta técnica, con el código fuente íntegro de este documento SVG.

En viewports más pequeños vamos a mostrar solo la H dentro del símbolo hexagonal:

@media (max-width: 320px) {
[id=word-mark] {
display: none;
}
}

Ahora, siempre que el contenedor de nuestro SVG mida 20em o menos, solo se verá la parte del símbolo del logo.

Para activar esta vista desde el documento HTML, define el ancho del contenedor SVG:

<iframe src="hexlogo.svg" style="width: 320px; border:0"></iframe>

Como habrás notado al mirar la imagen de arriba, nuestra imagen SVG conserva sus dimensiones intrínsecas aunque una parte esté oculta. Por desgracia, es una limitación de SVG. Para corregirlo hay que modificar el viewBox del documento SVG, pero solo cuando el viewport baja de cierto tamaño. Es un caso de uso perfecto para matchMedia.

El viewBox, como su nombre indica, determina la zona visible de un elemento SVG. Ajustándolo decidimos qué parte de la imagen SVG llena el viewport. Este es un ejemplo que usa matchMedia y una media query para actualizar el atributo viewBox:

<script type="text/javascript">
const svg = document.querySelector( 'svg' );

/* Guardar el valor original en una variable */
const originalViewBox = svg.getAttribute( 'viewBox' );

/* Definir la media query y su objeto */
const mq = matchMedia( '( max-width: 320px )' );

/* Definir el manejador */
const updateViewBox = () {
if (mq.matches) {
/* Cambiar las dimensiones del viewBox para mostrar el hexágono */
        svg.setAttribute( 'viewBox', '0 0 200 174' );
} else {
        svg.setAttribute( 'viewBox', originalViewBox );
}
}

svg.addEventListener( 'SVGLoad', updateViewBox );

/* Se dispara si cambia la condición de la media query */
mq.addEventListener( 'change', updateViewBox );
</script>

Ahora, cuando el contenedor SVG mide 320 píxeles o menos, el valor del atributo viewBox será "0 0 200 174". Por encima de 320 píxeles, viewBox vuelve a su valor inicial.

Como esta técnica se apoya en el atributo onload o en el evento SVGLoad, conviene incrustar el CSS y el JavaScript dentro del propio archivo SVG: cuando el CSS es externo, SVGLoad puede dispararse antes de que termine de cargarse.

Usar media queries con background-size

Los documentos SVG y las media queries no se limitan a las imágenes de primer plano. También podemos redimensionar el viewport SVG con la propiedad CSS background-size.

Empezamos con este documento SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="-20 -20 250 250" xml:space="preserve">
<style type="text/css">
circle {
stroke: #000;
stroke-width: 30;
fill: #009688;
}
@media ( width: 100px ) {
circle {
fill: #673ab7;
}
}
@media ( width: 300px ) {
circle {
fill: #ffc107;
}
}
</style>
</defs>
<circle cx="100" cy="100" r="100" />
<circle cx="100" cy="100" r="50" />
</svg>

El caso es sencillo: nuestros elementos <circle> reciben un fill distinto a anchos de viewport concretos. Por defecto el fill es verde azulado, a 100 píxeles de ancho pasa a violeta, y a 300 píxeles, a amarillo.

Para que funcione tenemos que usar la imagen SVG como imagen de fondo y definir el background-size del selector. Aquí la usaremos como fondo de <body> y de los elementos <li>:

body, li  {
background: url(circles.svg);
}
body  {
background-color: #9c27b0;
background-size: 300px auto;
}
li {
background-position: left center;
background-repeat: no-repeat;
background-size: 1em auto;
padding-left: 40px;
font-size: 24px;
margin: 1rem 0;
}

El resultado es el que ves abajo.

Conclusión

Usar SVG con CSS abre más posibilidades para documentos flexibles y adaptables. Ahora deberías saber cómo:

• usar CSS para dar estilo a los elementos SVG,
• animar las propiedades SVG,
• usar las media queries de CSS y la API matchMedia para mostrar y ocultar partes de un documento SVG.