SVG: Cómo aprovechar todo el potencial de este formato de imagen vectorial

Cualquier persona que decida crear una web, ya sea un diseñador de páginas web profesional o amateur, tendrá que trabajar con 4 elementos generales con los que creará la maquetación y aspecto visual de la web. Esos elementos son los textos, las imágenes, los colores y las tipografías.

Luego ya podremos echar más madera con otros elementos multimedia, como vídeos, documentos PDF, etc., pero estos cuatro son los pilares fundamentales.

De estos cuatro pilares, el que más influencia tendrá en el resultado visual final son las imágenes. La diferencia entre utilizar unas buenas imágenes de calidad y otras que sean caca de la vaca, es tremenda.

En el mundillo -por llamarlo de alguna manera- de las imágenes para web existen una serie de recomendaciones y guías de uso para sacarles el máximo partido con el menor impacto posible sobre el rendimiento.

Como seguramente ya sabes si sigues este blog, las imágenes son uno de los elementos que más influyen en la optimización de una página web.

Los dos tipos de imagen que existen a modo general son: mapas de bits y vectoriales. Las primeras están basadas en píxeles dispuestos en cuadrícula y las segundas están formadas por líneas, curvas y otras formas geométricas.

Dentro de los dos grupos generales, existen diferentes formatos de imagen, como los siguientes:

• Mapas de bits: BMP, JPG, GIF, PNG, RAW, TIFF o WEBP.


• Vectores: EPS, AI (Adobe Illustrator), CDR (Corel Draw) o DXF (Autocad).

Algunos de ellos se utilizan en fotografía, otros en diseño gráfico, otros sirven para producción editorial, pero concretamente para el diseño web los más utilizados hoy en día son los formatos PNG y JPG.

Sin embargo, de un tiempo a esta parte ha aparecido en escena un nuevo formato que ha venido para dar guerra y hacerse con el protagonismo en muchos aspectos: SVG.

¿Todavía no has oído hablar de este formato? ¿Te ha entrado el gusanillo por conocerlo? ¿Te apetece saberlo todo sobre él?

¡Echémonos al ruedo, que aquí hay toro pa’ torear!

Qué es un SVG y para qué sirve

SVG (acrónimo de Scalable Vector Graphics o gráficos vectoriales escalables) es un formato de archivo abierto y gratuito para crear gráficos vectoriales en dos dimensiones.

Es un formato estandarizado y aprobado por el W3C (World Wide Web Consortium), la principal organización internacional de estándares para web; la Biblia del mundillo web, vaya. Está, además, totalmente respaldado por todos los navegadores web actuales.

El formato SVG está basado en XML (Extensible Markup Language o lenguaje de marcado extensible), un lenguaje de marcas diseñado para describir datos. No usa etiquetas predefinidas (como pasa, por ejemplo, con HTML) y es fácil de procesar y utilizar. Es tan simple que hasta los humanos lo podemos entender fácilmente de un vistazo.

De esta forma se puede buscar, indexar, crear scripts o comprimirlo, por ejemplo. Además, tanto se pueden crear y editar con un editor de texto como con herramientas de dibujo vectorial.

Así como el HTML utiliza estructuras en árbol con etiquetas, atributos o elementos, el formato de archivo SVG utiliza también este tipo de estructuras para dar aspecto visual a los datos. SVG es, por decirlo de alguna manera, para gráficos lo que el HTML es para texto.

Ejemplo de SVG interactivo: https://tympanus.net/Tutorials/InteractiveSVG/
Un documento SVG sencillo consiste simplemente en un elemento raíz <svg> y varias formas básicas que conforman un gráfico. A partir de ahí, se puede hacer todo lo complejo que queramos.

SVG permite crear 3 tipos de objetos: vectores, imágenes y textos.

La versión actual del formato SVG (en el momento de escribir este post es la 1.1) permite utilizar formas básicas -como círculos, rectángulos o polígonos-, textos, trazados, rellenos, degradados, efectos y hasta animaciones e interactividad.

Ejemplo de SVG para crear un círculo con código:

<svg><circle cx="60" cy="60" r="60" fill="#FF7700" stroke="#333333" stroke-width="4"></svg>



Ejemplo de SVG para crear un rectángulo con código:

<svg><rect x="200" y="50" width="200" height="250" fill="#FF7700" stroke="#333333" stroke­width="10" /></svg>



SVG viene a ocupar el espacio que dejó hace tiempo el formato Flash (creado por Adobe), con el que se podían representar animaciones y efectos de gran calidad con muy poco peso.

Lo que diferencia a SVG de Flash es que está basado en un formato abierto como el XML -en lugar de uno binario cerrado-, estandarizado y entendible por todos los navegadores, algo que con Flash no sucedía. Además, está diseñado para trabajar con otros estándares de W3C como CSS, DOM y SMIL, así que tiene el mundo a sus pies.

Si deseas conocer a fondo todo sobre el formato SVG, puedes visitar extensa documentación en W3C y en Mozilla Developer Network.

Entonces, ¿para qué se utilizan los archivos SVG?

Los archivos SVG son versátiles y se utilizan en gran variedad de contextos en los que la escalabilidad, la interactividad y la claridad en diferentes tamaños son importantes.

• Gráficos web: SVG se utiliza muy a menudo para crear gráficos en páginas web. Al ser un formato basado en XML, se puede manipular y animar fácilmente mediante CSS (Cascading Style Sheets) y JavaScript.


• Iconos y logotipos: Debido a su capacidad de escalabilidad sin pérdida de calidad, los SVG son ideales para la creación de iconos y logotipos. ¿Por qué? Pues porque pueden adaptarse a diferentes tamaños y resoluciones sin perder claridad.


• Gráficos de datos: Los SVG son útiles para representar gráficos de datos interactivos en la web porque pueden animarse y actualizarse dinámicamente para mostrar cambios en tiempo real.


• Mapas interactivos: Los mapas SVG son comunes en aplicaciones web para representar mapas interactivos. La escalabilidad de SVG permite hacer zoom suave y nos da la capacidad de resaltar regiones específicas.


• Animaciones: Puedes crear animaciones vectoriales utilizando SVG, ya sea directamente en el código SVG o mediante el uso de bibliotecas JavaScript como Snap.svg o GreenSock Animation Platform (GSAP).


• Diagramas y gráficos: SVG es perfecto para representar diagramas y gráficos complejos porque puede describir gráficos de forma precisa mediante coordenadas y rutas.


• Accesibilidad: Los SVG permiten la inclusión de texto alternativo y metadatos, lo que los hace accesibles para personas con discapacidades visuales (y, además, proporciona información adicional a los motores de búsqueda).


• Impresión: A diferencia de las imágenes rasterizadas, los SVG mantienen la calidad al imprimirse en diferentes tamaños. Esto los hace perfectos para la creación de material impreso, como folletos y carteles.


• Interactividad en dispositivos móviles: Los SVG son compatibles con interactividad táctil, por lo que resultan muy útiles en aplicaciones y sitios web optimizados para dispositivos móviles.

Ventajas y desventajas de los SVG

El SVG es un nuevo tipo de formato de imagen para web que destaca sobre todo por sus ventajas, aunque también tiene algún defectillo que es importante resaltar.

Ventajas de los SVG

El mayor potencial del formato SVG reside en su ligereza y su versatilidad. En un contexto en el que los diseñadores y desarrolladores web viven “obsesionados” con la optimización WPO, los archivos SVG han llegado para ayudar en esta tarea.

Además, al ser archivos que contienen código, se comportan como cualquier otro elemento de la web, pudiendo ser reconocido por las arañitas de Google y ayudando de esta manera al SEO Onpage de nuestra web.

Pero hay mucho más. Estas y otras muchas ventajas te las enumero a la de ya:

• SVG es un estándar abierto, lo que da pie a futuras mejoras y actualizaciones.


• Los archivos SVG se pueden crear y editar con editores de texto y programas de edición de imágenes vectoriales.


• Se pueden buscar e indexar en una web.


• En general, pesan muy poco; menos que los formatos PNG y JPG.


• Se pueden optimizar y comprimir.


• Se pueden ampliar sin ninguna pérdida de calidad.


• Se visualizan perfectamente en cualquier dispositivo, incluso con pantalla retina.


• Se pueden imprimir en cualquier resolución sin perder calidad.


• Las imágenes son “generadas” por el navegador, lo que disminuye la carga y consumo de recursos en el hosting.


• Se pueden crear textos, que se pueden seleccionar, copiarlos y además, se indexan.


• Permite la creación de animaciones combinando el SVG con CSS o Javascript.


• Se pueden crear versiones interactivas.

Desventajas de los SVG

Ahora te voy a contar algunas desventajas que, si bien son pocas, hay que ser justos y ponerlas sobre la mesa.

• Aunque hoy en día todos los navegadores actuales están preparados para interpretar el formato SVG -gracias a la estandarización de W3C-, algunas versiones anteriores de los navegadores más utilizados pueden no interpretar bien todos los objetos.


• Si un archivo SVG es bastante complejo (capas, máscaras de recorte, muchos objetos…), puede generar archivos con algo más de peso que un SVG “plano” con un solo objeto a un color, por ejemplo. Por eso, su uso está más aconsejado para formas simples.


• Si descargas archivos SVG desde fuentes no fiables, puedes llevarte una sorpresa en forma de código malicioso. No olvidemos que SVG es un formato XML y, por tanto, lleva código.


• WordPress no admite, por seguridad, la subida de archivos SVG de forma predeterminada. Para ello, tendrías que instalar un plugin como Safe SVG

• Incluso maquetadores visuales como Elementor no permiten la subida de archivos SVG de forma predeterminada y deja en tu mano el asumir el riesgo.

Ejemplos de archivos SVG

Para que puedas ver el potencial de los archivos SVG, te dejo aquí algunas webs en las que podrás probar y jugar con las opciones de animación o interactividad que ofrecen:

• Responsive Icons


• Tympanus Codrops


• Peter Collin Gridge


• Snap Demos


• Codepen


• Observable HQ

Soporte para SVG en navegadores

A continuación, te dejo algunos detalles sobre el soporte de SVG en diferentes navegadores:

• SVG en Google Chrome: Google Chrome soporta SVG perfectamente y es compatible con la mayoría de las funciones, incluidas las animaciones y las interactivas. Lo cierto es que Chrome ha ido implementando mejoras y optimizaciones para garantizar el buen rendimiento de SVG.


• SVG en Mozilla Firefox: Firefox también tiene un buen soporte para SVG, incluidas muchas de las características avanzadas.
  Históricamente, Firefox ha pisado fuerte en el soporte de estándares web y SVG no es una excepción.


• SVG en Safari: Safari tiene un buen soporte para SVG en general, pero puede haber diferencias en la interpretación de ciertas funciones. Eso sí, Apple ha introducido mejoras en el soporte de SVG en las versiones más recientes de Safari.


• SVG en Microsoft Edge: Las versiones más recientes de Microsoft Edge (basadas en Chromium) tienen un buen soporte para SVG y están alineadas con el soporte de Chrome. Las versiones anteriores (no basadas en Chromium) también admiten SVG, pero es posible que no tengan todas las funciones avanzadas disponibles.


• SVG en Opera: Opera sigue la misma base de código que Chrome, por lo que tiene un buen soporte para SVG con funcionalidades similares.


• SVG en Internet Explorer: Internet Explorer 9 y versiones posteriores admiten SVG, pero puede haber limitaciones en términos de funciones avanzadas y rendimiento. Como sabrás, Internet Explorer ha sido descontinuado por Microsoft y se recomienda utilizar navegadores más modernos para un mejor soporte y seguridad.

Esta información corresponde al momento de redacción de este artículo, tenlo en cuenta. Es fundamental verificar las especificaciones y documentación actualizadas de cada navegador si tienes dudas, ya que el soporte puede cambiar con el tiempo debido a actualizaciones y mejoras.

Además, recuerda que los navegadores móviles también suelen admitir SVG, aunque puede haber diferencias en el soporte según la versión del navegador y el sistema operativo.

Herramientas para crear y editar SVG

Cuando se trata de añadir a una web elementos sencillos basados en SVG, podemos impregnar directamente en la página el código para representarlas.

Si prefieres utilizar una herramienta para crear un archivo SVG y luego subirlo a la web, podrás hacerlo con un simple editor de texto o usar herramientas de dibujo para crear SVG. Veámoslas:

Inkscape

Se puede decir que Inkscape es la herramienta “por excelencia” para la creación de archivos SVG, pues está recomendada por W3C.

Inskcape es una herramienta de software libre de escritorio para Windows, Mac y Linux y con la que podrás crear y editar archivos SVG de manera bastante intuitiva.

Incluye un montón de opciones y posibilidades que la hacen la más completa de todas.

Vectr

Esta herramienta tiene un buen nivel y, después de Inkscape, es la más avanzada de las que he probado. Proporciona muchas más opciones que otras para crear, editar y personalizar imágenes SVG.

Vectr te permite ver los diferentes elementos por capas y crear archivos con varias páginas. También te ofrece un montón de posibilidades para crear objetos complejos.

SVG-Edit

Herramienta gratuita de código abierto que se encuentra disponible para descargar desde GitHub.

SVG-Edit incluye herramientas para dibujar, crear formas básicas, rellenos o añadir texto, entre otras. Permite crear capas y pone a tu disposición una librería con algunos objetos.

Puedes exportar el resultado, además de en SVG, en otros formatos de imagen y en PDF.

Si lo deseas, puedes probar también la versión online.

Method Draw

Method Draw es una herramienta online muy sencillita con opciones bastante básicas, pero que puede servirte para hacer tus pinitos creando algunos elementos SVG sencillos fácilmente.

Adobe Ilustrator

Illustrator es un programa de diseño vectorial que, junto a PhotoShop, forman la pareja de herramientas de creación y edición de imágenes más potente del mercado, bajo el paraguas del desarrollador Adobe.

Con Illustrator podrás crear imágenes SVG de cualquier tipo, con la garantía del mejor programa de diseño vectorial que existe.

Illustrator es de pago, pero puedes probarlo gratis durante 7 días.

Cómo comprimir una imagen SVG

Aunque las imágenes SVG tienen ya de por sí muy poco peso, siempre es posible optimizarlas para aligerar algunos Kb que siempre suman en la optimización de una web.

Para optimizar y bajar el peso de tus SVG, te recomiendo utilizar la herramienta SVG Optimizer.

Ejemplo: la siguiente imagen SVG pesa originalmente 9 Kb y, gracias a la compresión, ha quedado en 6 Kb. Como ves, la pérdida de calidad es totalmente nula y le hemos ganado 3 Kb.

Descargar SVG gratis

Existen en Internet unas cuantas páginas web donde poder encontrar archivos SVG para descargar y añadir en tu página web.

Antes de hablarte de ellas, te recuerdo una de las desventajas de los archivos SVG, y es la de que pueden contener código malicioso. Así que cuando descargues archivos en formato SVG, pásales siempre el antivirus y súbelas a tu WordPress con el plugin Safe SVG.

En caso de que detectes algún problema de infección en tu WP, tendrías que aplicar algunas acciones para hacer tu web segura de nuevo.

Dicho esto, vamos a ver algunas webs donde encontrarás un montón de recursos SVG.

Freepik

Freepik es seguramente la página web de recursos gráficos más conocida y utilizada para diseño gráfico y web.

Podrás descargar miles de recursos tanto gratuitos como de pago en diferentes formatos de imagen, incluyendo (cómo no) SVG.

Flaticon

Podemos decir que Flaticon es la versión para iconos de Freepik. De hecho, ambas pertenecen a la misma compañía.

En Flaticon tienes a tu disposición más de 3.000.000 de iconos de todos los estilos para volverte loco y podrás descargarlos en formatos como PNG, SVG, JPG o EPS.

Al igual que en Freepik, dispones de iconos gratuitos y de pago.

Material Icons de Google

Como no podía ser de otra manera, Google está también haciendo cosillas relacionadas con el proyecto SVG y pone a nuestra disposición una colección de iconos en formato SVG para poder utilizar en nuestra web.

Todos los iconos de Material Icons son vectoriales, escalables y puedes aplicarles cualquier color usando CSS.

Esta colección contiene más de 1500 iconos SVG que puedes descargar como ZIP desde GitHub a tu ordenador o de manera individual desde la web Material.io.

Iconos8

En iconos8 encontrarás más de 130.000 iconos agrupados en 33 estilos, que podrás descargar en los formatos SVG, PNG, PDF o embeberlos con HTML en tu web.

Además, dispone de la opción de editar los colores, agregar elementos o ajustar los márgenes gracias a la integración con su propia herramienta gratuita de diseño, Lunacy.

IconFinder

En IconFinder tendrás acceso a más de 4.600.000 iconos gratuitos y de pago en varios formatos, como SVG, PNG, ICO o AI (Adobe Illustrator).

El funcionamiento es muy similar a Freepik o Flaticon, con una caja de búsqueda y filtrado por diversas opciones, incluyendo un filtro para segmentar los iconos por gratuitos o pro.

Creative Tail

En este repositorio podrás encontrar miles de iconos súper creativos que podrás descargar en diferentes formatos como SVG, PNG o JPG.

Para poder acceder a la descarga gratuita en Creative Tail solo tendrás que suscribirte con un email.

Pixabay

Aunque Pixabay es más conocido por ser un banco de imágenes de mapa de bits, dispone de un apartado bastante extenso de imágenes vectoriales. De hecho, tiene más de 100.000 elementos disponibles de forma gratuita para descargar en SVG o PNG.

VectorStock

VectorStock tiene disponible una gran colección de archivos vectoriales de calidad: vectores, ilustraciones, iconos, gráficos... Todo en archivos vectoriales en formatos como SVG, AI y EPS. Además de una buena biblioteca de contenido premium, VectorStock también cuenta con vectores gratuitos que vas a poder descargar y utilizar en proyectos personales y comerciales. ¡Es una buena opción!

The Noun Project

The Noun Project alberga iconos vectoriales de calidad, creados por diseñadores de todo el mundo. El estilo es sencillo y claro, porque los iconos de The Noun Project están diseñados para ser comprensibles al primer vistazo. Verás que hay archivos SVG y PNG disponibles de forma gratuita o mediante una suscripción premium.

Además de la colección de iconos, The Noun Project también ofrece herramientas y recursos útiles para diseñadores, como plugins para programas de diseño y distintos tutoriales.

Otras opciones para descargar SVG por paquetes

A continuación, te dejo enlaces a otras webs que ofrecen iconos o gráficos para descargar en paquetes completos:

• Drawkit: Gráficos e iconos muy creativos y diferentes.


• Graphic Burguer: Iconos atractivos de diferentes estilos y temáticas.


• Humaaans: Ilustraciones vectoriales de personas.


• Ionicons Paquete de iconos hechos a mano en estilo flat con tres versiones: outline, filled y sharp.


• JustVector Social Icons Paquete de iconos sociales en formato flat.


• Metrize Icons: Set de más de 300 iconos estilo flat muy interesantes en varios formatos.

Cómo convertir SVG a otro formato y viceversa

Si quieres convertir un archivo SVG a otro formato o al revés, tendrás que utilizar alguna de las herramientas de las que te he hablado más arriba -en caso de que quieras configurar algo manualmente- o escoger alguna opción de las que existen por la red de las que te hacen la conversión de manera automática.

En este apartado, te voy a mostrar algunas de las webs donde realizar conversiones de manera automática. Con estas herramientas, podrás realizar las siguientes conversiones entre los formatos más comunes (como mínimo): convertir de SVG a PNG, de PNG a SVG, de SVG a JPG y de JPG a SVG.

• SVG to PNG: Herramienta específica para convertir SVG a PNG.


• SVG to JPG: Es la misma herramienta que la anterior, pero convierte SVG a JPG.


• Online Convert Podrás convertir los formatos SVG, PNG, JPG entre ellos y algunos más.


• Convertio: Convierte tus archivos en diversos tipos de formato, incluyendo SVG, PNG y JPG.


• Online Convert Free: Convierte imágenes a SVG, JPG, PNG, EPS, PSD y otros.

Ejemplo de conversión de una imagen a SVG con Vector Magic:

Realizar la conversión entre archivos con cualquiera de las herramientas anteriores es muy sencillo:

1. Subes la imagen.


2. Haces clic en el botón CONVERTIR.


3. Descargas el resultado.

Pero existe otra herramienta para convertir a formato vectorial cualquier imagen PNG, JPG o GIF y, además, te permite personalizar algunas opciones y editar el resultado final. Los archivos de salida pueden ser SVG, EPS y PDF.

Esa herramienta es Vector Magic y el proceso es el siguiente:

• Cargas la imagen o la arrastras a la web.

• Se carga el editor, donde podrás realizar algunas configuraciones sencillas comparando el original con el resultado final.

• Además, clicando en la opción Avanzado > Editar el resultado puedes editar manualmente el gráfico de salida para definir mejor el aspecto final.

• Descargas el resultado en formato vectorial, el cual puede ser solo con relleno o también con trazado.

Cómo añadir un SVG a tu WordPress

Una vez hayas pasado todo el proceso de crear, editar o descargar imágenes SVG, querrás añadirlas a tu web. Puede subirlas a través del apartado de Medios de la propia web o cargarlas a través del administrador de archivos de tu alojamiento web con WordPress.

Para integrarlas en WordPress existen dos formas:

Añadir el código mediante HTML

Añadir un codigo mediante HTML es tan fácil como abrir el SVG en un editor, copiar su código y luego añadirlo directamente en el editor HTML de WordPress. Aquí te dejo un ejemplo del código de un logo de Facebook en SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#3B5998" d="M0 0h32v32H0z"/><path fill="#FFF" d="M22.08 32V19.607h4.16l.62-4.83h-4.78v-3.083c0-1.398.388-2.352 2.393-2.352h2.56V5.02c-.443-.058-1.962-.19-3.728-.19-3.688 0-6.213 2.25-6.213 6.385v3.562h-4.17v4.83h4.17V32h4.987z"/></svg>

Añadir el archivo a través de un maquetador visual (Page Builder)

Otra opción que existe para utilizar imágenes SVG al crear una página web en WordPress, es subir la imagen a través de la sección de Medios y añadirla a través de herramientas que lo permitan como, por ejemplo, Elementor.

Fíjate en la imagen que hay continuación:



Cuando estés dentro del maquetador web, crea un elemento del tipo icono con Elementor y arrástralo a tu diseño. En ese momento, se abrirá el panel de opciones para que puedas configurarlo.

Como se ve en la foto, hay un bloque que te permite agregar una imagen y, si te fijas, existe un botón que se llama Subir SVG. Haz clic y añade tu archivo SVG. Si quieres, puedes aprovechar y subir todos los SVG que necesites a la biblioteca en este momento.

Además, con Elementor podrás cambiar el color de iconos SVG que estén diseñados para ser modificados por CSS a través de las opciones de la pestaña Estilo.

¿Utilizas SVG?

Como ves, el formato SVG ha llegado como un ciclón y creo que va a dar mucho que hablar, más de lo que ya lo hace en la actualidad.

El potencial que tiene, junto a la calidad que ofrece y su poco peso, va a hacer que las páginas web sean mucho más potentes y atractivas sin graves consecuencias para el rendimiento. Eso, siempre que se utilicen correctamente y cuidando la optimización, como sucede con los demás formatos.

SVG es la fusión perfecta entre el mundo del diseño y del desarrollo web. Es como un superguerrero de Dragon Ball Z.

Yo ya utilizo SVG habitualmente en los diseños de las webs de mis clientes, ¿y tú?

Cuéntame si te ha gustado este pequeñito post abajo en los comentarios y te responderé encantado con una cervecita en una mano y un pinchito en la otra.

Muchas gracias a ti por llegar hasta aquí abajo y a Raiola Networks por la oportunidad para dejar mi granito de arena en su blog. ¡Fuerza y honor!