El formato de archivo SVG explicado: qué es, cómo funciona y cuándo usarlo

Los archivos SVG están por todas partes en internet, dando vida silenciosamente a los iconos, logotipos, gráficos e ilustraciones que hacen que los sitios web actuales se vean nítidos y modernos. Son la razón por la que un icono se ve nítido en una pantalla retina. Son la razón por la que el logotipo de una empresa se mantiene perfecto sin importar cuánto lo agrandes. Y aun así, a menos que trabajes en diseño o desarrollo, SVG podría seguir siendo uno de esos misteriosos formatos de archivo de los que has oído hablar pero que nunca has entendido del todo.

Vamos a solucionarlo.

Entonces… ¿qué es realmente un archivo SVG?

SVG significa Scalable Vector Graphics. Es un formato de gráficos basado no en píxeles sino en matemáticas. En lugar de almacenar una imagen como una cuadrícula de puntos de colores como hacen PNG o JPG, un SVG describe formas. Líneas, curvas, círculos, trazados. Tu navegador lee estas instrucciones y dibuja la imagen en tu pantalla, de forma perfecta y limpia, cada vez.

Ese simple cambio – de píxeles a fórmulas – lo cambia todo. Significa que un SVG puede escalarse a cualquier tamaño sin volverse borroso jamás. Un icono de 16 píxeles, un logotipo de 300 píxeles, una impresión de 2 metros de ancho – el mismo archivo se encarga de todos ellos. Para logotipos, ilustraciones y elementos de UI, SVG es difícil de superar.

Por qué existe SVG

Antes de SVG, la web estaba construida principalmente con imágenes basadas en píxeles. Los diseñadores exportaban iconos en una docena de tamaños para admitir diferentes pantallas. Los logotipos se volvían borrosos en las pantallas retina. Los elementos de UI tenían que cortarse en PNG estáticos. Todo parecía más pesado de lo necesario.

SVG resolvió todo el problema de un solo golpe. Un archivo. Tamaños infinitos. Siempre nítido.

Y como SVG está construido sobre estándares web abiertos, puedes darle estilo con CSS, animarlo, programarlo o incrustarlo directamente en HTML. Es uno de los pocos formatos que encaja cómodamente tanto en el mundo del diseño como en el del desarrollo.

SVG frente a PNG

PNG es un formato de mapa de bits. Almacena píxeles. Es fantástico para capturas de pantalla, recursos de UI, gráficos con mucho texto o cualquier cosa en la que quieras una nitidez perfecta a un tamaño específico. Admite transparencia y maneja gráficos planos de forma muy limpia.

SVG, en cambio, está formado por trazados vectoriales. No está atado a una resolución. Puedes ampliar sin límite y nunca verás un borde difuminado. Y para ilustraciones sencillas como iconos o logotipos, los archivos SVG tienden a ser mucho más pequeños que PNG.

Para ilustraciones complejas, PNG podría seguir siendo mejor. Para cualquier cosa geométrica o simbólica, SVG es el rey.

SVG frente a JPG

JPG es excelente para fotografías del mundo real: rostros, paisajes, comida, sombras, atardeceres. Comprime de forma agresiva sin dejar de verse bien, por eso está por todas partes en internet.

Pero JPG siempre está basado en píxeles. Amplía lo suficiente y verás bordes pixelados y artefactos ruidosos. JPG tampoco admite transparencia, lo que lo hace inadecuado para logotipos o elementos de UI.

SVG es lo opuesto. No está pensado en absoluto para fotos, pero es perfecto para dibujos lineales, formas planas y gráficos limpios.

Para qué se usan los archivos SVG

Una vez que reconoces las fortalezas de SVG, empiezas a verlo por todas partes.
¿Cada icono en un sitio web bien diseñado? Probablemente un SVG.
¿Un logotipo de marca nítido que se ve perfecto en una pantalla 4K? SVG.
¿Un mapa, diagrama o gráfico ilustrado que se anima mientras te desplazas? También SVG.

SVG es el estándar moderno para gráficos limpios y escalables en el diseño web y el trabajo de UI. A los diseñadores les encanta porque se mantiene nítido. A los desarrolladores les encanta porque se comporta como parte de la página.

Cómo abrir o editar un archivo SVG

Abrir un archivo SVG es fácil. Cualquier navegador moderno puede mostrar uno. Arrastra un SVG a Chrome, Safari, Firefox o Edge y verás la imagen al instante.

La edición es donde las cosas se ponen interesantes. Como SVG es un formato vectorial, necesitas software de edición vectorial. Herramientas como Adobe Illustrator, Figma, Affinity Designer o Inkscape pueden abrir y modificar archivos SVG. Puedes ajustar curvas, cambiar colores, añadir formas o reescribir el dibujo por completo.

Y como SVG no es más que texto XML por dentro, técnicamente también puedes abrirlo con un editor de texto sin formato. No es la forma más amigable de trabajar, pero todo lo que hay dentro del archivo es legible.

En iPhone o iPad, los SVG se previsualizan en la app Files, pero la gestión más avanzada es limitada. Si quieres almacenar, previsualizar y organizar SVG junto con tus otros archivos, Documents by Readdle te ofrece un verdadero gestor de archivos que maneja gráficos, documentos, ZIP y todo lo demás en tu flujo de trabajo.

¿Todos los navegadores admiten SVG

Sí. La compatibilidad de los navegadores es prácticamente universal. Chrome, Firefox, Safari, Edge y los navegadores móviles modernos entienden SVG de forma nativa. Si un sitio sigue ofreciendo iconos basados en píxeles en 2025, eso es una decisión de diseño, no una limitación técnica.

¿Se puede animar SVG

Sí. SVG es uno de los formatos de imagen más aptos para la animación jamás creados. Los diseñadores pueden animar trazos, formas, colores, rotaciones o dibujos enteros usando CSS o JavaScript. Así es como muchos sitios web modernos crean esas sutiles animaciones de dibujo lineal o iconos que laten o se transforman suavemente mientras te desplazas.

Eso no lo puedes hacer con PNG o JPG.

Cómo convertir una imagen SVG a JPG

A veces necesitas una versión en píxeles de tu ilustración. Quizás un sitio web requiera subir un JPG. Quizás necesites una imagen aplanada para un boletín o una publicación en redes sociales. Quizás una herramienta más antigua no admita SVG en absoluto.

Convertir SVG a JPG es fácil. En Illustrator, Figma o Inkscape puedes exportar el SVG como JPG a la resolución que quieras. En macOS incluso puedes abrir el SVG en Preview y exportarlo desde ahí.

Si no quieres instalar software, los conversores en línea hacen el proceso aún más rápido. Puedes subir un SVG a documents.io, elegir JPG como formato de salida y descargar una versión limpia y aplanada en segundos. Es ideal cuando necesitas una conversión rápida sin tocar tus herramientas de diseño. Puedes probar el conversor de SVG gratis. 

Solo recuerda: JPG no admite transparencia y siempre estará basado en píxeles, así que la imagen ya no será infinitamente escalable. Para bordes nítidos, PNG suele ser una mejor alternativa que JPG.

Qué hace único a SVG

SVG es uno de esos raros formatos que se siente a la vez futurista y atemporal. Es matemático, editable, programable e independiente de la resolución. Funciona a tamaño de icono y a tamaño de valla publicitaria. Se comporta como código pero se ve como diseño. Y logra ser ligero mientras hace todo esto.

Una vez que empiezas a reconocer el superpoder de SVG – gráficos nítidos a cualquier tamaño – lo notas por todas partes. Los sitios web cargan más rápido. Los logotipos nunca se vuelven borrosos. Los iconos de UI parecen hechos a mano. Incluso las animaciones se vuelven más fáciles.

SVG es más que un formato de archivo. Es un estándar de diseño moderno.

Conclusión

SVG es la respuesta de la web a los gráficos nítidos y escalables. Si tu imagen necesita mantenerse nítida sin importar cuán grande sea, SVG es la opción correcta. Úsalo para iconos, logotipos, diagramas, ilustraciones y recursos de UI. Usa PNG o JPG para fotografías. Y cuando necesites convertir o gestionar estos archivos en el móvil o el escritorio, herramientas como documents.io y Documents by Readdle hacen que todo el proceso sea muy sencillo.