Si alguna vez intentaste ampliar un logo y viste cómo la imagen se volvía borrosa y pixelada, sabes lo frustrante que es ese problema. SVG existe justamente para resolverlo. Es un formato de imagen que funciona de manera completamente distinta a JPG y PNG, y entender esa diferencia es clave para usar el formato correcto en cada situación.
¿Qué significa SVG?
SVG significa Scalable Vector Graphics ("gráficos vectoriales escalables" en español). Es un formato de imagen abierto, estandarizado por el W3C (el mismo consorcio que define las especificaciones de HTML y CSS), y compatible de forma nativa con todos los navegadores modernos.
A diferencia de JPG y PNG, que almacenan las imágenes como una cuadrícula de píxeles coloreados, SVG describe la imagen en forma de texto, usando coordenadas matemáticas para representar formas, líneas, curvas y colores. Un archivo SVG es, en la práctica, un archivo de texto, y puede abrirse y editarse en cualquier editor de código.
¿Cómo funciona SVG por dentro?
Un archivo SVG se escribe en XML, un lenguaje de marcado similar a HTML. Por ejemplo, un círculo rojo en SVG se describe así:
El navegador lee estas instrucciones matemáticas y renderiza la imagen directamente en pantalla, calculando los píxeles en tiempo real. Por eso SVG puede mostrarse en cualquier tamaño —desde un favicon de 16x16 píxeles hasta un anuncio de 10 metros— sin ninguna pérdida de calidad.
¿Cuáles son las ventajas de SVG?
- Escalable sin pérdida de calidad: amplía o reduce a voluntad; la imagen permanece nítida en cualquier resolución, incluidas las pantallas Retina y 4K.
- Archivos ligeros: los logos e íconos simples en SVG suelen ser mucho más pequeños que en PNG, especialmente en tamaños grandes.
- Editable con código: es posible cambiar colores, tamaños y animaciones directamente mediante CSS o JavaScript, sin necesidad de un editor de imágenes.
- Indexable por buscadores: como el contenido es texto, Google puede leer e indexar el texto dentro de un SVG.
- Soporte de animaciones: es posible crear animaciones CSS y SMIL directamente en SVG, sin depender de GIFs o vídeos.
- Accesibilidad: se pueden agregar títulos y descripciones al SVG para lectores de pantalla.
¿Cuáles son las limitaciones de SVG?
- No es adecuado para fotos: las fotografías tienen millones de variaciones de color y gradientes complejos. Representar esto en vectores generaría archivos enormes y poco eficientes; JPG es siempre la elección correcta para fotos.
- Las imágenes complejas resultan pesadas: las ilustraciones muy detalladas, con muchas formas y gradientes, pueden generar archivos SVG grandes y lentos de renderizar.
- Curva de aprendizaje para la edición manual: editar SVG directamente en el código requiere conocimientos de XML y matemática vectorial. Herramientas como Illustrator o Figma facilitan este proceso.
💡 Regla práctica: usa SVG para logos, íconos, ilustraciones, gráficos, mapas y cualquier arte que deba mostrarse en múltiples tamaños. Usa JPG o WebP para fotografías e imágenes con muchos detalles y gradientes complejos.
SVG vs PNG vs JPG — ¿cuándo usar cada uno?
| Característica | SVG | PNG | JPG |
|---|---|---|---|
| Tipo | Vectorial | Ráster (píxeles) | Ráster (píxeles) |
| Escalable sin pérdida | Sí | No | No |
| Transparencia | Sí | Sí | No |
| Ideal para fotos | No | No | Sí |
| Ideal para logos e íconos | Sí | Sí | No |
| Editable vía CSS/JS | Sí | No | No |
| Compatible con navegadores | Sí | Sí | Sí |
Cómo usar SVG en sitios y aplicaciones
Hay tres formas principales de incluir un SVG en una página web:
- Como etiqueta <img>: la forma más simple. El SVG se trata como cualquier otra imagen, pero no puede manipularse mediante CSS o JavaScript.
- En línea en el HTML: el código SVG se inserta directamente en el HTML de la página. Permite control total mediante CSS y JS: colores, animaciones e interacciones. Es el enfoque preferido para íconos interactivos.
- Como fondo CSS: usando
background-image: url('icono.svg'). Útil para íconos decorativos, pero con acceso limitado mediante JavaScript.
¿Cómo convertir imágenes a SVG?
Convertir una foto o PNG a SVG es posible mediante un proceso llamado vectorización, que transforma píxeles en formas geométricas. El resultado es mejor para imágenes simples, con pocos colores y bordes bien definidos, como logos con fondo blanco. El conversor de imágenes de ImageTools permite convertir archivos entre los principales formatos, incluyendo PNG y JPG a otros formatos compatibles con la web.
Convierte tus imágenes ahora
Transforma archivos entre los principales formatos de imagen de forma rápida y gratuita, directamente en el navegador.
Convertir imagen¿SVG es bueno para el SEO?
Sí. Como SVG es un formato basado en texto, Google puede rastrear e indexar su contenido. Además, los logos e íconos en SVG suelen ser más pequeños que en PNG, lo que contribuye a páginas más rápidas, un factor directo de posicionamiento en Google desde la implementación de Core Web Vitals.
Para optimizar los SVG para SEO, agrega los atributos title y desc dentro del código SVG, que funcionan como texto alternativo para lectores de pantalla y buscadores.