Si lo que quieres es crear contenido para una web y que este contenido sea responsive (¿y quién no querría esto?), entonces definitivamente necesitas saber de la existencia del formato SVG.
SVG: scalable vector graphics es la mejor opción que tenemos hoy en día para poder crear gráficos para la web.
SVG: amigo de Google y de los usuarios
Índice de contenidos
SVG son unas siglas que corresponden a “scalable vector graphics”, es decir, gráficos en vector escalables. Por lo tanto, olvidamos la miseria del pixel y pasamos a algo mejor, que ocupará finalmente menos espacio (muy importante en diseño web ocupar el menor espacio posible para hacer contento al usuario y a google y obtener más conversiones y buen posicionamiento) y que nos dará mejor rendimiento y calidad de imagen.
Como sabemos, el diseño responsive trata en gran parte de gestionar diferentes medidas de pantalla y SVG es un formato ideal para poder hacerlo. Así, una de las grandes ventajas de SVG es que es “resolution independent”, es decir, el factor de la resolución no afecta y por lo tanto no tienes que pensar cuántos píxeles tienen los dispositivos, ya que siempre se verá bien en todos.
Por ejemplo, si queremos que un logo sea el fondo de nuestra web y que este se adapte a diferentes medidas de pantalla, tenemos dos opciones:
- Trabajar en bitmap (png, jpg) y hacer varias versiones del logo a diferentes medidas para que se adapte a cada tipo de pantalla. Desde los móviles Android con pantalla más pequeña, pasando por las phablets y acabando en iMacs de tropecientas pulgadas en pantalla retina… Wow. ¿Cuánto espacio nos ocupará en nuestro hosting? ¿Cuántas versiones a diferentes medidas tendremos que hacer? Y si nos equivocamos y nos olvidamos alguna pantalla de las grandes, incluso podemos terminar con un diseño pixelado.
- La otra vía, mucho más elegante es la de usar el formato SVG. Una sola imagen para todas las pantallas. Ocupa muy poco espacio. Es escalable a todo tipo de pantallas y resoluciones que puedan surgir.
Evidentemente, SVG es el camino que hay que seguir. Por elegancia, posicionamiento en Google y usabilidad. Te recomendamos visitar la web de Joe Harrison “Responsive Icons” para que puedas ver cómo se redimensiona un icono en SVG (tienes que hacer la pantalla del navegador más pequeña para poder ir viéndolo).
Textos seleccionables
SVG permite ofrecer imágenes con texto seleccionable. Esto facilita la vida a los usuarios, ya que pueden copiar y pegar. Y, además, es indexable por parte de Google y por lo tanto nos va ayudar a escalar posiciones y a mejorar nuestro SEO.
Y el premio gordo va para… ¡la interactividad!
SVG es también usado por Google o Bing para dibujar el camino azul en Google Maps. SVG, por lo tanto, soporta interactividad, los gráficos pueden variar a medida que cambian los datos. Y no sólo eso, SVG soporta también CSS y así cuando cambiemos el diseño de nuestra web puede cambiar también el de los gráficos SVG. Todo un lujo.
¡Yo quiero!
Sí, lo sabemos, el html5 mola muchísimo. Podemos hacer cosas geniales como lo que acabamos de contar. Y muchas más. La buena noticia es que Tumult Hype, el programa para diseña animaciones interactivas (interactive motion graphics) en html5 exporta en formato SVG. Así que, ya sabes, si quieres aprender tecnologías del presente que serán imprescindibles en el futuro, apúntate a nuestro curso.
[vc_row][vc_column][vc_btn title=”¡Quiero saber más!” color=”purple” align=”center” i_icon_fontawesome=”fa fa-info-circle” add_icon=”true”][/vc_column][/vc_row]