Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
01
12

SVG es perfecto para el Responsive Design

SVG (Gráfico Vectorial Escalable) es un nuevo formato que soporta HTML5 y nos ofrece imágenes vectoriales que pueden redimensionarse hasta el infinito y no perder calidad.

Vamos a ver cómo usar archivos SVG nos ayudarán a reducir el tamaño de nuestra web con este ligero formato y como siempre se mantendrá una muy buena calidad en estas imágenes, ya sea en un móvil pequeño o en un monitor de alta resolución.

SVG es una de las mejores opciones para el Responsive Design

Una de las grandes ventajas que tiene SVG es que está basado en XML y se puede comprimir fácilmente en las transmisiones, lo que ayuda a reducir el tamaño de cara a un móvil.
Los archivos SVG se pueden usar de varias formas: como si fuese un elemento más en la página HTML (copiando tal cual el SVG), añadiendo un objeto SVG y añadiendo una imagen con formato SVG.

Diferencia entre SVG y una imagen normal

Las imágenes de mapa de bits (como .jpg, .png o .gif) almacenan la información de todos sus píxeles, mientras que las imágenes vectoriales (como SVG) almacenan líneas, curvas, degradados y el resto de información necesaria para crear la imagen y el propio programa que lo visualiza es el que crea la información de cada píxel.

Esta característica hace los vectores perfectos para el Responsive Design, ya que podemos redimensionar iconos o imágenes sin perder calidad. Por poner un ejemplo, os voy a mostrar un pequeño esquema de la arquitectura de Von Neumann, que está hecho con SVG y se adapta a cualquier tamaño de pantalla.

Gracias a ello podemos tener imágenes que no pierden calidad al redimensionarse, como podemos ver a continuación comparando una imagen SVG con una PNG.

Imagen comparativa entre SVG y PNG
Imagen comparativa entre SVG y PNG

En este otro ejemplo se puede ver una imagen vectorial más compleja y que mantendrá su calidad con cualquier tamaño.

Imagen comparativa entre SVG y PNG

Cómo usar una imagen SVG

Como ya he comentado, hay distintas formas de usar las imágenes vectoriales, pero la más simple es la de usar un archivo SVG como si de una imagen cualquiera se tratase.

  1. <!-- Como imagen normal -->
  2. <img src="copa.svg">
  3. <!-- Como objeto externo -->
  4. <object data="copa.svg" type="image/svg+xml">
  5. <!-- Te permite mostrar un sustituto si no tiene soporte o no encuentra el archivo -->
  6. SVG no soportado.
  7. </object>
  8. <!-- Añadir en línea el SVG -->
  9. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  10. <path d="[...]"/>
  11. </svg>

También se puede usar como imagen de fondo a través de CSS, igual que hacemos con otra imagen, lo que nos puede ayudar a reducir el tamaño de los archivos que recibe nuestra página para funcionar (y así no usar grandes imágenes de fondo que son muy pesadas).

Compatibilidad

SVG tiene un gran soporte por parte de todos los navegadores, pero en algunos antiguos (ya sean de escritorio o móviles) pueden no tener compatibilidad, por lo que es buena idea tener un as en la manga si esto nos pasa, por ejemplo: usando pictografías, que son vectores con iconos que actuan como letras (por poner un ejemplo, en la barra lateral de este blog encontraréis los iconos sociales que son pictografías).

Resumen

Como ya he comentado, es muy buena idea empezar a usar SVG en nuestros diseños, lograremos tener una calidad óptima sin incrementar demasiado el tamaño de los archivos descargados.

Y si os preocupa de donde conseguir imágenes vectoriales, las podréis encontrar en plataformas como Freepik o Flat Icon, y podréis editarlos con aplicaciones como Inskape o Illustrator.

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: