Digital

Guía de uso de SVG paso a paso. Parte 1: ¿por qué usar SVG?

2 Mins de lectura

 

SVG son las siglas de Scalable Vector Graphics que, traducido al castellano, viene a ser un archivo vectorial y, como tal, es escalable a cualquier tamaño sin perder resolución.

Hasta aquí podemos intuir que necesitaremos un programa de tratamiento de archivos vectoriales como Illustrator para poder generarlos, pero antes de ponernos manos a la obra debemos informarnos bien de sus ventajas e inconvenientes para no volvernos locos:

¿Por qué usar SVG?

Ventajas

Love Retina! Correcta visualización en cualquier tipo de dispositivo y tamaño de pantalla. Sin pérdida de calidad sea cual sea el tamaño de reproducción.

Peso mínimo de la imagen. Esto se traduce en una notable optimización del peso de nuestro site, lo que repercute en una mejora sustancial de la experiencia de usuario.

Interacción. Los svg nos permiten interactuar con ellos a través del CSS o del JavaScript, ofreciéndonos un control de las animaciones muy similar al que al que estábamos acostumbrados con el malogrado Flash.

Veamos un sencillo ejemplo de su utilidad, al posicionarnos encima de un enlace con icono podemos cambiar la imagen, a través del CSS, sin tener la necesidad de generar una imagen diferente.

 

Inconvenientes

La incompatibilidad con algunos navegadores como IE8 (aunque Microsoft ya ha dejado de darle soporte algunos clientes lo siguen pidiendo) y Android 2.3 (que son el 1% de los usuarios):

Pero no os preocupéis porque tenemos soluciones, las cuales las veremos en próximas entregas de este tutorial.

Además, es muy puntilloso con las propiedades utilizadas en su implementación, según el navegador en el que testeemos nuestro site. ¡Cuidado con intentar ahorrarnos líneas de código!

¿Cómo generar un archivo SVG?

Nosotros usamos el programa de edición de archivos vectoriales Adobe Illustrator, pero si no tenemos acceso al mismo, podemos recurrir a programas online de generación de SVG.
Abrimos nuestra ilustración vectorial en Illustrator y la guardamos como SVG (nosotros optamos por la versión 1.1).

 

¿Cómo generar un archivo SVG?

 

IMPORTANTE: tiene que ser vectorial, no vale con una imagen incrustada en Illustrator, así que en muchos casos ¡no nos quedará otra opción que emplear tiempo en vectorizar elementos que nos proporcione el cliente!

¿Cómo se usan los SVG?

Existen varias maneras de implementar SVG en nuestros sites:

  1. En línea en el código HTML5:
    <svg>……</svg>
    Este código lo obtenemos al abrir el archivo SVG con un editor Html como Notepad++, por ejemplo.

¿Cómo se usan los SVG?

  1. Como imagen:

Insertar SVG imagen

  1. Como objeto dentro de nuestro código HTML: <object>

SVG como objeto

  1. Utilizando un iframe:

Utilizar SVG utilizando un iframe

  1. En nuestro CSS como background-image:

SVG como imagen background

La decisión de usar un método u otro dependerá de varios factores que explicaremos con mayor detenimiento en la segunda parte de este tutorial.

En Hiberus tenemos un área especializada en negocios digitales. Ponte en contacto con nosotros y te estaremos encantados de ayudarte.

 

Mix de agencia digital y consultora de tecnología para ecommerce

En Hiberus Digital trabajamos conjuntamente con nuestros clientes uniendo los servicios de agencia digital y consultora tecnológica, dos puntos de vista normalmente fragmentados para conseguir que toda la organización se centre en conseguir los objetivos.

¿Te ayudamos?

Artículos relacionados
DigitalRetail

Cuándo plantearnos un cambio de plataforma de ecommerce

3 Mins de lectura
A medida que nuestro ecommerce crece, nos enfrentaremos a la decisión de cambiar o no de plataforma en nuestra tienda online. En…
Digital

Qué es accesibilidad

3 Mins de lectura
“La accesibilidad significa que personas con algún tipo de discapacidad pueden hacer uso de la Web. En concreto, al hablar de Accesibilidad…
DigitalRetail

Magento Page Builder, crea páginas de contenido en tu e-commerce

3 Mins de lectura
Magento Page Builder es una herramienta que nos permite la creación de contenido para páginas CMS y otros apartados de tu e-commerce….

3 Comentarios

Deja una respuesta

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