Para diseñar una página web atractiva, tendremos que trabajar con 4 elementos generales con los que crearemos 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″ strokewidth=”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.
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 SGV
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:
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:
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.
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.
Herramienta gratuita de código abierto que se encuentra disponible para descargar desde GitHub.
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.
Herramienta online muy sencillita con opciones bastante básicas, pero que puede servirte para hacer tus pinitos creando algunos elementos SVG sencillos fácilmente.
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 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.
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.
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 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.
En esta web 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.
En esta web 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.
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 solo tendrás que suscribirte con un email.
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.
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:
Subes la imagen.
Haces clic en el botón CONVERTIR.
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 hosting 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.
Conclusión
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ú?