Gráficos vectoriales SVG para la WEB

Todo lo que necesitas saber para empezar

graficos vectoriales svg

Los gráficos vectoriales SVG (Scalable Vector Graphics), son un tipo muy especial de imágenes que podemos incluir en las paginas y aplicaciones web gracias a las versiones más modernas de los diferentes navegadores.

Son especiales porque, al contrario que los formatos GIF, PNG y JPG,  se trata de imágenes vectoriales. No en vano SVG significa Scalable Vector Graphics (Gráficos Vectoriales Escalables) y tienen una serie de ventajas que los hacen ideales para determinados tipos de aplicaciones:

Ventajas de los gráficos vectoriales SVG

Son escalables

Es decir, podemos aumentar y reducir su tamaño sin que se aprecie pérdida de calidad, incluso a tamaños muy grandes. Así se adaptan a la resolución de pantalla disponible sin pérdida de calidad. Esto es debido a que no se almacenan como una gran tabla de pixels, sino como una descripción matemática de los dibujos lineales que lo componen, de modo que su aspecto se “dibuja” de acuerdo a esas instrucciones y la resolución disponible. Si no te queda muy claro, echa un vistazo a nuestro post sobre cómo vectorizar fácilmente una imagen.

Ocupan muy poco

Al tratarse de dibujos lineales y no tener que almacenar información para cada pixel de la imagen, los archivos que los almacenan suelen ocupar muy poco, aunque por supuesto hay excepciones y, si las imágenes SVG son muy complejas, pueden ser también archivos bastante pesados.

Su texto es indexado

Los gráficos SVG se componen de etiuquetas legibles para los buscadores por lo que, al contrario que lo que nos sucede con otro tipo de imágenes, los textos que incluyamos en nuestros gráficos pueden ser indexados por los buscadores, lo que beneficiará que puedan ser encontrados posteriormente en una búsqueda mejorando el SEO y la accesibilidad de nuestro contenido.

Pueden modificarse mediante CSS

El color, tamaño, rotación, ancho de linea, etc. puede modificarse mediante simples instrucciones CSS, ya sea de manera estática o mediante programación.

Son programables

Esta es, desde mi punto de vista, la más interesante de sus características. Por programables me refiero a que podemos modificar mediante programación, cada uno de los objetos vectoriales que lo componen, dinámicamente. Así podemos cambiar el color, grosor, posición, rotación… de cada linea, círculo o figura geométrica de un gráfico SVG gracias a JavaScript. De este modo podemos conseguir realizar espectaculares animaciones, sofisticadas interfaces gráficas de usuario (Conocidas como GUI) o mostrar información en forma de diagramas, etc.

Cómo generar imágenes SVG

Los gráficos SVG están compuestos por un conjunto de instrucciones que son perfectamente legibles y entendibles una vez que las conoces. Al contrario que los formatos de mapas de bits o imágenes raster como JPG, GIF o PNG, podemos abrir y editar un archivo SVG en un editor de código y modificarlo a nuestro antojo sin necesidad de ningún software especializado.

Aunque esto es posible y muy útil cuando los gráficos son sencillos, lo habitual es utilizar algún programa de edición de imágenes vectoriales para generarlos y modificarlos. Algunos de los más conocidos son:

InkScape

Trabaja de forma nativa en este formato, es decir, está específicamente desarrollado para utilizar SVG como formato principal, es gratuito y open source. Si estás pensando en dar interactividad posteriormente a tus creaciones mediante programación, es perfecto, puesto que te permite nombrar cada uno de los elementos y grupos con un ID que posteriormente te permitira identificarlos en JavaScript. Sin lugar a dudas uno de nuestros preferidos. Web de InkScape.

Adobe Illustrator

Poco tenemos que decir del archiconocido programa de edición vectorial de Adobe. Por supuesto, entre sus muchas opciones, está la exportación a formato SVG. Web de Adobe Illustrator.

Corel Draw

Otro de nuestros favoritos con opciones muy interesantes de exportación a SVG. Web de Corel Draw.

Method Draw

Se trata de un editor online con funciones básicas paro muy interesantes. Es de código abierto y podemos incluso instalarlo en nuestro propio servidor web. Web de Method Draw. Descargar en Github.

Cómo insertar imágenes SVG en una WEB

Una vez hemos creado nuestros gráficos llega el momento de utiizarlos en nuestra página web o aplicación web. Aquí contamos básicamente con tres opciones y nos decantaremos por una u otra según el uso que vayamos a darle a nuestra imagen:

Mediante la etiqueta <img>

En los navegadores modernos la etiqueta <img> admite como formato de imagen los archivos svg. Esto significa que basta incluir esta etiqueta HTML con su conocido atributo “src” para incluirlos en nuestra web:

La ventaja de este sistema es que es muy sencillo ya que no se diferencia en nada a como incluiríamos una imagen en cualquier otro formato y permito que el gráfico SVG lleve incluidas animaciones SMIL (códigos especificos de animación sin programación ni interactividad). Además podemos indicar una imagen PNG o JPG para mostrar en el caso de que el navegador no soporte SVG. La principal desventaja es que cualquier programación queda automáticamente desactivada, por lo que no es posible utilizar este sistema para proyectos interactivos.

Directamente en el código HTML

La etiqueta <svg> es interpratada por los navegadores como el inicio de un gráfico vectorial, y todas las etiquetas a continuación serán reconocidas como SVG en lugar de HTML hasta encontrarse con el cierre </svg>:

En este caso si podremos utilizar programación para dotar de interactividad a nuestras imágenes, si bien cualquier actualización posterior puede ser engorrosa ya que tendremos que sustituir el código en el lugar exácto en que lo hubiéramos insertado.

Embebido mediante etiqueta <object>

Seguramente esta es la manera más eficiente ya que podemos incluirlo como un archivo externo y al mismo tiempo conservar las animaciones y dotarle de interactividad mediante JavaScript.

Como ves es una forma cómoda y sencilla al tiempo que flexible, incluyendo también la posibilidad de mostrar una imagen en un formato alternativo para el caso de que el navegador no soporte SVG.

Programar gráficos vectoriales SVG

Sería muy extenso explicar aquí como dotar de interactividad a estos gráficos, pero es posible crear todo tipo de soluciones interactivas y animaciones. Desde gráficas estadísticas, hasta completos juegos que nada tienen que envidiar a otras tecnologías.

En SinLios, los utilizamos de forma habitual en las soluciones que desarrollamos para nuestros clientes, siempre con resultados espectaculares. Pulsa en play para ver un sencillo ejemplo:

 

Para saber más sobre SVG

¿Conociás ya los gráficos vectoriales SVG?. ¿Lo utilizas en tus proyectos?. Estaremos encantados de conocer acerca de tu experiencia o trabajos realizados en nuestro hilo de comentarios.

Categorías

Autor:

Socio cofundador de SinLios.com. Biólogo, profesor, programador, blogger y apasionado de la ciencia, la tecnología y el ejercicio físico. Escéptico y humanista, me encanta la fotografía, disfruto la música medieval y soy feliz en la naturaleza. :: Perfil en Puro Marketing :: Perfil en LinkedIn :: Perfil en Alimenta tu Bienestar :: YouTube Vídeo

0 Comments
0 Pings & Trackbacks

Deja un comentario

A %d blogueros les gusta esto: