SVG, el formato responsive de las imágenes

1280×800, 768×1024, 320×568… Estamos rodeados de pantallas y cada una diferente: más horizontal, más vertical, más grande, más pequeña… Y eso que todavía no podemos decir que los smartwatch (relojes inteligentes) hayan inundado el mercado.

Cada día navegamos por páginas webs desde diferentes dispositivos y siempre queremos poder hacerlo de forma sencilla y rápida, viendo perfectamente cada uno de los elementos de la misma. Ya sea desde el ordenador de mesa del trabajo, el móvil, la tablet o la televisión (sí, con una smart TV se puede navegar por Internet).

Sin embargo, seguro que en lo que llevamos de octubre ya habéis entrado en una web en la que resultaba dificilísimo navegar porque en vuestros smartphones se veía fatal. Para solucionar este tipo de problemas, surgió el ‘Responsive Web Design’ , un diseño adaptativo que amolda la interfaz de las páginas al dispositivo desde el que se navega. ¿La panacea a todos los problemas de usuario? No, pero desde luego ayuda.

El diseño responsive provoca que haya que:

• diseñar por porcentajes con respecto a la pantalla, no por píxeles. Ya no existen los tamaños fijos
• Dar prioridad a las pantallas pequeñas frente a las grandes
• Diseñar para tocar. Se acabó pensar en efectos ‘roll-over’ (cuando el ratón pasa por encima de un elemento)
• Diseñar para tocar. Se acabó pensar en efectos ‘roll-over’ (cuando el ratón pasa por encima de un elemento)

A todo esto hay que añadir la tecnología retina inventada por Apple que concentra una gran cantidad de pixeles en un espacio reducido de pantalla. Una especie de alta resolución que hace que los iconos en PNG (incluida la versión pequeña de vuestro logotipo) se vean pixeladas.

Existen dos posibles soluciones a este problema:

• Utilizar diferentes versiones de imágenes dependiendo de si el dispositivo es retina o no a través de clases CSS
• Utilizar iconos en formato vectorial SVG, que permite escalar los objetos tanto como se desee sin que éste pierda calidad. Se trata de un formato similar al que utilizan programas vectoriales como Adobe Illustrator o Corel Draw. Y poco a poco van cobrando fuerza en el mundo digital. Muchísimas plantillas de gestores de contenido como WordPress o Joomla tienen ya incluidos una selección de iconos SVG para poder utilizarlos.

Ventajas del SVG

• es un formato abierto, estándar y basado en XML.
• soportan el cambio de tamaño sin perder calidad
• pesan menos que un JPG o un PNG
• son editables tanto con programas vectoriales como a través de clases CSS
• se pueden incrustar tipografías en formato TrueType y Tipo 1, es decir, los motores de búsqueda pueden leer el texto de la imagen, algo que obviamente no ocurre con las imágenes JPG o PNG. Eso sí, tienen que ser fuentes instaladas del sistema o que estén incluidas en los estilos CSS para que se vean de forma adecuada.
• ¿Hemos dicho ya que soportan la escala de tamaño sin perder calidad?
• Son imágenes de alta calidad
• Funcionan igual que una imagen normal, por lo que podemos utilizar el sistema de tener varias versiones dependiendo de los tamaños de pantalla.
• E-s-c-a-l-a-n- -s-i-n- -p-e-r-d-e-r- -c-a-l-i-d-a-d