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

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 reducidas 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 otras cosas. 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 también de manera receptiva?

¿Escalar o no escalar?

La forma más fácil de mostrar un gráfico SVG en diferentes pantallas y ventanas del navegador es, por supuesto, escalar. Aquí, el gráfico se reduce o mejora hasta que se ajusta, más o menos, al menos.

Aunque el escalado simple viene con 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, debe 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 usando la hoja de estilo de los documentos HTML.

Escalar con «viewBox»

Normalmente, los elementos de un espacio de dibujo SVG no se escalan cuando cambia el tamaño del elemento ««. Mantienen su posición y tamaño. Solo el espacio de dibujo se expande o reduce hacia la derecha y hacia abajo.

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

Para provocar una escala, debe utilizar el atributo «viewBox». Este atributo se utiliza para definir un extracto del espacio de dibujo SVG, que siempre llena 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 la información de ubicación y tamaño

No importa si se decidió a favor o en contra de la escala: en cualquier caso, debe verificar si necesita optimizar pantallas especialmente pequeñas.

SVG sin atributos «viewBox»: el círculo escala según el espacio de dibujo

Si no hay escala, puede suceder que el gráfico ya no encaje en el espacio de dibujo, haciendo que 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 la posición 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 mediante el marcado SVG. Por lo tanto, solo tiene las funciones CSS «translate ()» y «scale ()» 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 forma al menos te da la opción de realizar 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.

Ajustar el marco y la fuente

Ajustar la fuerza 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 mediante CSS.

Si se reduce la escala de un gráfico SVG en dispositivos móviles, puede resultar 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 color de relleno y contorno se marca de manera que estos ajustes se pueden realizar sin ningún problema. Sin embargo, estos ajustes no deberían ser un factor significativo 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 absolutos. Especialmente cuando se trata de distribuir elementos en un espacio de dibujo, esto parece lo mejor.

Al cambiar el ancho o alto de un gráfico SVG sin información de “viewBox”, los elementos se pueden distribuir equitativamente en el espacio de dibujo mediante una designación relativa.

Rectángulo colocado en 50 por ciento cada uno a través de los atributos «x» e «y»

En combinación con la función CSS «translate ()» también le da la opción de colocar siempre 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.

Ubicación relativa a través de «traducir ()» adicional

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 manera receptiva. Aquí y allá, es posible que se necesiten algunos trucos. Pero, en general, se puede hacer mucho.

#SVG #receptivo #Qué #posible #qué

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.