SVG receptivo: ¿Qué es posible y qué no?

Los diseños receptivos son indispensables en el diseño web. Por un lado, hay pantallas cada vez más pequeñas en los teléfonos inteligentes y, por otro lado, está el aumento de tamaño de las pantallas de escritorio. Entre eso, hay phablets, tabletas, así como netbooks, notebooks y demás. Gracias a CSS, técnicamente optimizar un sitio web para todas las diferentes resoluciones no es un problema. Pero, ¿qué pasa con los SVG? ¿Se pueden diseñar de forma receptiva también?

¿A escala o no a escala?

La forma más fácil de mostrar un gráfico SVG en diferentes pantallas y ventanas del navegador es, por supuesto, escalarlo. Aquí, el gráfico se reduce o mejora hasta que encaja, más o menos, al menos. Aunque el escalado simple requiere poco esfuerzo, obviamente también tiene sus desventajas. Especialmente con gráficos complejos, los detalles tienden a perderse o volverse irreconocibles cuando se trata de reducciones masivas. Los textos pueden volverse tan pequeños que ya no son legibles. Si bien el escalado simple funciona principalmente para fotos, no siempre es una opción para formatos SVG basados ​​en vectores. Aquí, con pantallas pequeñas, deberías hacer algunas optimizaciones mejorando elementos pequeños u ocultando detalles prescindibles.

<svg width="100%" height="100%">
  <rect x="50%" y="50%" width="150" height="150" style="transform: scale(0.5)" />
</svg>

Es importante que el gráfico SVG no se implemente a través de «img», sino que se marque directamente dentro del texto fuente HTML. Solo entonces, tendrá la opción de cambiar el atributo de su elemento SVG utilizando la hoja de estilo de los documentos HTML.

Escalado con «viewBox»

Por lo general, los elementos de un espacio de dibujo SVG no se escalan cuando cambia el tamaño del elemento «

SVG sin el atributo «viewBox»: el tamaño del círculo siempre permanece igual

Para causar una escala, debe usar el atributo «viewBox». Este atributo se utiliza para definir un extracto del espacio de dibujo SVG, que siempre ocupa todo el espacio de dibujo del elemento «

<svg width="100%" height="100%" viewBox="0 0 300 300">
  <circle cx="150" cy="150" r="150" />
</svg>

Si se cambia el tamaño del espacio de dibujo, todo el contenido se escala. De esta manera, siempre puede elegir cómo se supone que se comportará cada gráfico SVG.

Uso de CSS para modificar el tamaño y la información de ubicación

No importa si te decidiste a favor o en contra del escalado: en cualquier caso, debes comprobar si necesitas optimizar pantallas especialmente pequeñas.

Si no hay escalado, puede suceder que el gráfico ya no encaje en el espacio de dibujo y desaparezca en el borde inferior derecho. Sin embargo, al escalar, debe verificar si todas las formas y textos son reconocibles. Si es necesario, se deben modificar el tamaño y las posiciones de las formas. Aquí es donde ya encontrará el primer problema: el tamaño y la posición de los gráficos SVG no se controlan a través de CSS, sino a través de un atributo de los elementos respectivos. Esto solo le da la opción de influir en el tamaño y la posición a través del atributo «transformar».

Transformaciones CSS para formas SVG

En primer lugar, el tamaño y las posiciones se definen como atributos a través del marcado SVG. Por lo tanto, solo tiene las funciones CSS «traducir()» y «escala()» para cambiar las formas individuales de un SVG. La desventaja de esta opción es que solo son posibles cambios relativos. Sin embargo, de esta manera al menos te da la opción de hacer algunas optimizaciones. Por ejemplo, puede ajustar las relaciones de tamaño de formas individuales. Mejorar formas especialmente pequeñas ayuda mucho con pantallas más pequeñas.

Ajuste del marco y la fuente

Ajustar la intensidad del marco y el tamaño de la fuente no presenta ningún problema. En el formato SVG, esta información también se define a través de CSS. Si se reduce la escala de un gráfico SVG en dispositivos móviles, puede ser beneficioso aumentar la fuerza del marco y el tamaño de la fuente. De esta manera, puede evitar que el marco sea demasiado delgado o que la fuente sea ilegible.

circle {
  stroke-width: 3px;
}

text {
  font-size: 20px;
}

A través de CSS, la información sobre el relleno y el color del contorno se marca de manera que estos ajustes se puedan realizar sin ningún problema. Sin embargo, estos ajustes no deberían ser un factor importante cuando se trata de diseños receptivos.

Hacer declaraciones relativas para atributos

Como la información de ubicación no se puede cambiar simplemente a través de CSS, es potencialmente recomendable colocar formas con valores relativos, en lugar de valores absolutos. Especialmente cuando se trata de distribuir elementos en un espacio de dibujo, esto parece ser lo que hay que hacer. Al cambiar el ancho o la altura de un gráfico SVG sin información de «viewBox», los elementos se pueden distribuir por igual en el espacio de dibujo a través de la designación relativa.

En combinación con la función CSS «translate()» también te da la opción de colocar siempre los elementos en el centro. De esta manera, puede colocar una forma en el centro a través de «x» e «y», definiendo el valor «50%» para cada uno. Pero ahora, solo la esquina superior izquierda está centrada.

<svg width="100%" height="100%" viewBoxx="0 0 300 300">
  <rect x="50%" y="50%" width="150" height="150" style="transform: translate(-75px, -75px)" />
</svg>

Para centrar la forma en sí, mueva la forma hacia la izquierda o hacia la derecha, la mitad de su ancho y alto usando «translate()». Así, una forma siempre está centrada, incluso con designaciones relativas.

Conclusión

Aunque las opciones para el formato SVG no son tan amplias como las de HTML, los elementos SVG aún se pueden diseñar de forma receptiva. Aquí y allá, pueden ser necesarios algunos trucos. Pero en general, hay mucho que se puede hacer.