¿Qué es un archivo SVG? Definición y usos

¿Tu sitio web sufre de logotipos borrosos e imágenes pixeladas en diferentes pantallas? Descubre qué es un archivo SVG, un formato compatible con la web que te solucionará estos problemas. A diferencia de las imágenes basadas en píxeles, los archivos SVG utilizan fórmulas matemáticas para que las imágenes de cualquier tamaño sean siempre nítidas y claras.

Tanto si estás creando una tienda online como renovando la identidad de tu marca, comprender los archivos SVG puede transformar la forma en que tus gráficos se muestran a los clientes. 

Aquí encontrarás todo lo que necesitas saber sobre los archivos SVG, sus funcionalidades clave y por qué son esenciales para logotipos, gráficos, iconos y otros elementos visuales web que necesitan verse profesionales en todos los dispositivos.

¿Qué es un archivo SVG?

SVG significa Scalable Vector Graphics (Gráficos Vectoriales Escalables), un formato de imagen que utiliza vectores, un método de representación gráfica mediante fórmulas matemáticas que definen formas, líneas y colores sólidos. 

A diferencia de las imágenes rasterizadas (o de mapa de bits), que están compuestas por una cuadrícula fija de píxeles de colores, puedes escalar las imágenes SVG a cualquier tamaño sin que se vean borrosas o pixeladas.

Las imágenes SVG se mantienen nítidas en cualquier resolución porque el ordenador las redibuja a partir de instrucciones matemáticas exactas. Sería como seguir una receta que se ajusta al tamaño de tu cena.

Los archivos vectoriales, como los archivos SVG, se usan, entre otros, para logotipos, ilustraciones, fuentes e iconos: cualquier recurso web que necesite mantenerse nítido y consistente en cualquier tamaño. Los archivos en formato SVG suelen ser más pequeños que los formatos rasterizados como PNG y JPEG, por lo que se cargan más rápido y mejoran la experiencia del cliente.

¿Cómo funcionan los archivos SVG?

Los SVG utilizan codificación en formato XML, similar al texto etiquetado que se encuentra en un archivo HTML, lo que los hace editables en cualquier editor de texto. En otras palabras, en lugar de una cuadrícula de píxeles, un archivo SVG almacena formas, líneas y colores como código XML, es decir, la receta. 

La codificación XML tiene algunas ventajas:

• Es útil para el SEO. Los motores de búsqueda pueden escanear el XML en busca de palabras clave, como las palabras del logotipo de tu marca, lo que otorga a SVG una ventaja SEO sobre las imágenes rasterizadas, donde el texto dentro de la imagen es esencialmente invisible para los motores de búsqueda a menos que se describa explícitamente en el texto alternativo de las imágenes.
• Es más accesible. Los lectores de pantalla pueden escanear los SVG, mejorando la accesibilidad del sitio web. Dado que un elemento SVG puede ser etiquetado semánticamente (usando elementos <title> y <desc>), los lectores de pantalla pueden leer y vocalizar lo que representa la imagen, una ventaja para los usuarios con discapacidad visual.
• Es ideal para el ecommerce. La escalabilidad del SVG, su tamaño de archivo reducido, su apariencia limpia y su compatibilidad con lenguajes web como CSS y JavaScript lo convierten en una opción inteligente para el desarrollo de tiendas online. Shopify tiene soporte nativo para SVG, particularmente dentro de la carpeta de recursos utilizada para el desarrollo de temas, logotipos e iconos.

Sin embargo, ten en cuenta que el contenido SVG malicioso que contiene JavaScript podría ejecutarse en el navegador de un usuario, robando cookies, secuestrando sesiones o cambiando la apariencia del sitio. 

Shopify desinfecta automáticamente los archivos SVG al cargarlos para evitar contenido malicioso en el código XML y eliminar riesgos de seguridad como el cross-site scripting.

Breve historia del formato de archivo SVG

El formato de archivo SVG fue propuesto por primera vez en 1994 por el ingeniero de software holandés Martijn Koster. A finales de la década de 1990, el World Wide Web Consortium (W3C) solicitó propuestas para un nuevo formato de gráficos vectoriales compatible con la web.

El W3C estableció los archivos SVG en 1999 como un formato gráfico vectorial de estándar abierto para la web, y se convirtió en un estándar aprobado por la Organización Internacional de Normalización (ISO) en 2003. 

Sin embargo, la adopción de SVG fue lenta al principio, ganando tracción significativa solo después de que los principales navegadores (incluidos Chrome, Firefox, Safari y Opera) introdujeran soporte nativo a finales de la década de 2000 y principios de 2010.

Diferencias entre archivos SVG, PNG y JPEG

1. Vectores matemáticos vs. cuadrículas de píxeles
2. Escalabilidad
3. Tamaño del archivo
4. Casos de uso
5. SEO y accesibilidad
6. Edición e interactividad

A diferencia de los archivos rasterizados basados en píxeles como JPEG y PNG, SVG utiliza algoritmos para dibujar una imagen. Esto es útil y eficiente para la mayoría de los tipos de imágenes, con una excepción: las imágenes fotográficas o muy detalladas.

Estas son las principales diferencias entre SVG y los tipos de archivos rasterizados:

1. Vectores matemáticos vs. cuadrículas de píxeles

SVG almacena imágenes como fórmulas que definen puntos, líneas y colores sólidos. Los formatos rasterizados utilizan mapas de bits, que consisten en un número fijo de píxeles individuales mapeados en una cuadrícula.

2. Escalabilidad

El navegador recalcula la receta matemática a medida que escalas una imagen SVG, por lo que puedes cambiar su tamaño sin pérdida de calidad. PNG y JPEG están basados en píxeles con resoluciones fijas; aumentar su tamaño reduce la calidad, introduciendo borrosidad o pixelación.

3. Tamaño del archivo

Los archivos SVG tienden a ser más pequeños que las imágenes rasterizadas, lo que los hace útiles para la optimización de imágenes. Sin embargo, convertir una imagen fotográfica compleja a SVG puede resultar en un archivo grande e inutilizable.

Los archivos PNG y JPEG son más eficientes para imágenes detalladas con gradaciones de color finas. Por ejemplo, un mapa de bits creado en Adobe Photoshop con texturas complejas, pinceles o elementos fotográficos es mejor guardarlo como JPEG o PNG, ya que esos detalles no se traducen bien en líneas limpias.

4. Casos de uso

SVG es ideal para gráficos bidimensionales como gráficos, ilustraciones, logotipos, iconos y diagramas, ya que se escala limpiamente en diferentes resoluciones de pantalla.

Para otros formatos de imagen, JPEG es mejor para fotos digitales de alta definición, mientras que PNG es mejor para gráficos web y logotipos, gracias a su compresión sin pérdida y soporte de transparencia. 

Ten en cuenta que, a diferencia de SVG, PNG no es independiente de la resolución, lo que le da a SVG una ventaja importante en cuanto a escalabilidad.

5. SEO y accesibilidad

Los gráficos SVG permiten que los motores de búsqueda como Google lean el texto dentro de ellos, lo que potencialmente mejora la clasificación de tu sitio web en los resultados de búsqueda.

Los archivos SVG también pueden ser leídos por lectores de pantalla, haciéndolos más accesibles para personas con discapacidades. PNG y JPEG tratan el texto como parte de la imagen, lo que dificulta que los motores de búsqueda y los lectores de pantalla lo lean o indexen.

6. Edición e interactividad

Puedes editar archivos SVG en un editor de texto modificando el marcado XML y estilizarlos o manipularlos fácilmente con lenguajes web como JavaScript y CSS. PNG y JPEG necesitan software especial de edición de imágenes para llevar a cabo cualquier cambio, lo que limita tu nivel de control sobre ellos, pero también reduce su riesgo de código malicioso.

¿Por qué usar un archivo SVG?

• Escalabilidad infinita
• Tamaño de archivo manejable
• Beneficios SEO
• Accesibilidad
• Editabilidad
• Compatibilidad con navegadores

Los gráficos SVG son una buena opción para el comercio electrónico porque se ven nítidos en cualquier dispositivo, se cargan rápidamente, mejoran el SEO y la accesibilidad, y funcionan en todos los navegadores web modernos. Toma nota de estas ventajas:

Escalabilidad infinita

Puedes redimensionar los SVG hacia arriba o hacia abajo sin tener que renunciar a la calidad de la imagen porque el navegador recalcula las fórmulas matemáticas de la imagen para líneas y puntos en cualquier escala.

Tamaño de archivo manejable

Los archivos SVG suelen ser más pequeños que las imágenes rasterizadas como PNG y JPEG. Esta huella de datos más pequeña conduce a tiempos de carga más rápidos, mejorando la experiencia del usuario.

Beneficios SEO

Los motores de búsqueda como Google pueden indexar fácilmente el texto de los archivos SVG, lo que podría mejorar tu posicionamiento en los resultados de búsqueda. Por ejemplo, el logotipo de una empresa incluido en un gráfico SVG puede contener el texto con el nombre de la empresa y otras palabras clave.

Accesibilidad

Los SVG almacenan el texto como elementos de texto reales, por lo que los lectores de pantalla pueden leer archivos SVG en voz alta, ayudando a las personas que necesitan asistencia para leer páginas web.

Editabilidad

Puedes cambiar el código XML en archivos SVG usando un editor de texto, editando las etiquetas de marcado, lo que hace que los SVG sean altamente personalizables y fáciles de manipular sin software gráfico especializado.

Los archivos SVG también pueden interactuar con otras tecnologías web, como JavaScript y CSS, lo que permite crear gráficos dinámicos y atractivos con animaciones, interacciones del usuario y cambios de estilo en tiempo real. Esto hace que los archivos SVG sean muy versátiles para el diseño web responsivo e interactivo.

Compatibilidad con navegadores

La falta de compatibilidad con los navegadores fue en su día el talón de Aquiles de los SVG, pero ya no lo es. Los navegadores web modernos (como Chrome, Edge, Safari y Firefox) admiten de forma nativa los archivos SVG. 

Sin embargo, es posible que los navegadores más antiguos (como Internet Explorer) no sean compatibles con las imágenes SVG.

Usos comunes de los archivos SVG

SVG es ideal para cualquier imagen bidimensional con líneas y formas suaves. Los usos comunes de los archivos SVG en el diseño web incluyen:

• Logotipos. Dado que los logotipos de empresas a menudo se reutilizan en diferentes plataformas y deben aparecer nítidos en diferentes tamaños, los SVG resuelven los problemas de escalabilidad comunes con formatos rasterizados como JPEG y PNG.
• Iconos. Los iconos, con sus bordes claros y diseños simples, son perfectamente adecuados para la conversión en imágenes vectoriales escalables.
• Ilustraciones. Los elementos visuales no fotográficos, como los dibujos lineales, se escalan bien como archivos SVG y ayudan a conservar espacio de archivo.
• Gráficos y tablas. Los SVG pueden crear visualizaciones de datos escalables, y su texto es completamente buscable e indexable.
• Elementos animados. Puedes usar CSS y JavaScript para animar SVG, haciéndolos útiles para microinteracciones y pantallas dinámicas.

Cómo crear y editar un archivo SVG

1. Crear un archivo SVG desde cero
2. Convertir un archivo a SVG
3. Editar un archivo SVG

Si bien teóricamente podrías codificar un archivo SVG en XML o convertirlo desde otros tipos de archivos, usar software de ilustración profesional es el enfoque más popular y menos propenso a errores. Descubre cómo crear y editar un archivo SVG a continuación:

1. Crear un archivo SVG desde cero

Para crear un archivo SVG desde cero, usa un programa de diseño gráfico y dibuja tu imagen dentro de una aplicación como Adobe Illustrator (el editor de gráficos vectoriales estándar de la industria), Inkscape (gratuito), Microsoft Visio, Canva SVG Editor, CorelDRAW o Google Drawings (gratuito). 

Una vez que tu diseño esté completo, navega al menú Archivo, selecciona Exportar o Guardar como y luego elige SVG como formato.

2. Convertir un archivo a SVG

Si prefieres no descargar ningún programa, la mejor opción para convertir otro formato a SVG es utilizar herramientas en línea. Algunos convertidores en línea incluyen una vista previa del archivo SVG convertido antes de la descarga y un editor integrado para realizar pequeños ajustes. 

Antes de utilizar estas herramientas, asegúrate de seleccionar imágenes con formas y contornos sencillos. Intentar convertir imágenes fotográficas con gran cantidad de detalles probablemente dará como resultado archivos SVG muy ineficientes. 

Aquí tienes cuatro opciones de herramientas:

• Conversor SVG gratuito de Adobe Express. Bueno si estás familiarizado con el ecosistema de Adobe, y conocido por su interfaz pulida, integración con otras herramientas de Adobe y resultados de calidad.
• CloudConvert. Un convertidor versátil que admite una amplia gama de formatos de archivo, incluidos varios tipos de imágenes a SVG.
• Convertio. Similar a CloudConvert, es fácil de usar y admite muchos formatos.
• FreeConvert. Otro convertidor robusto que utiliza cifrado SSL de 256 bits al transferir archivos y los elimina automáticamente después de unas horas.

3. Editar un archivo SVG

Para editar un archivo SVG existente, el enfoque más práctico es usar un editor de gráficos vectoriales como Adobe Illustrator. Estos programas están diseñados para manipular una imagen vectorial.

Abre los archivos SVG en la aplicación del editor y usa sus herramientas gráficas para modificar elementos individuales como trazados, formas o grupos. Puedes redimensionar, remodelar, transformar, agregar color o aplicar efectos a estos elementos.

Técnicamente hablando, se pueden editar archivos SVG en un editor de texto sin formato, ya que están escritos en código XML, pero este método no es recomendable para ediciones extensas, ya que el riesgo de dañar el archivo es elevado. 

Las ediciones en XML son adecuadas principalmente para pequeños ajustes, como cambiar un atributo de color.