¿Qué es un SVG? Gráficos vectoriales escalables explicados

Cuando haces zoom en una fotografía JPG o PNG, llega un momento en que los píxeles se vuelven visibles y la imagen pierde nitidez. Con un archivo SVG, esto nunca ocurre: puedes ampliarlo hasta el tamaño de una valla publicitaria sin perder ni un ápice de definición. Ese es el poder de los gráficos vectoriales escalables.

¿Qué es SVG?

SVG son las siglas de Scalable Vector Graphics (Gráficos Vectoriales Escalables). Es un formato de imagen basado en XML que describe las imágenes mediante formas geométricas matemáticas: puntos, líneas, curvas, círculos, rectángulos y polígonos, en lugar de una cuadrícula de píxeles.

SVG fue desarrollado por el W3C (World Wide Web Consortium) y su primera versión oficial se publicó en 2001. La versión SVG 1.1 (segunda edición), publicada en 2011, es la más ampliamente implementada. SVG 2.0 está en desarrollo continuo.

Vectores vs. píxeles: la diferencia fundamental

Para entender SVG, es esencial distinguir entre dos tipos de imágenes digitales:

• Imágenes rasterizadas (JPG, PNG, GIF): almacenan la imagen como una cuadrícula de píxeles. Cada píxel tiene un color específico. Al ampliarlas, se interpolan o se pixelan.
• Imágenes vectoriales (SVG, AI, EPS): almacenan la imagen como instrucciones matemáticas para dibujar formas. Al ampliarlas, las formas se recalculan y permanecen perfectamente nítidas.

Un círculo en SVG no es una colección de píxeles circulares: es la instrucción “dibuja un círculo de radio 50 centrado en el punto (100,100) con color rojo”. Esa instrucción produce resultados perfectos a cualquier escala.

Estructura de un archivo SVG

Al ser un formato basado en XML, un archivo SVG es texto legible por humanos. Un SVG simple se ve así:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
  <text x="50" y="55" text-anchor="middle" fill="white">Hola</text>
</svg>

Esto dibuja un círculo azul con el texto “Hola” en blanco. La simplicidad del formato hace que sea fácil de generar, editar y manipular programáticamente.

Características del formato SVG

• Escalabilidad infinita: calidad perfecta a cualquier tamaño.
• Tamaño de archivo pequeño: para logotipos e iconos, los SVGs suelen ser más ligeros que sus equivalentes PNG.
• Editable con texto: puede abrirse y modificarse con cualquier editor de texto.
• Animaciones: SVG admite animaciones nativas mediante SMIL o CSS/JavaScript.
• Interactividad: los elementos SVG pueden responder a eventos de ratón y teclado.
• Accesibilidad: puede incluir texto alternativo y metadatos para lectores de pantalla.
• CSS y JavaScript: los estilos y comportamientos pueden controlarse con código web estándar.

Usos principales de SVG

Logotipos e identidad visual

Los logotipos en SVG se ven perfectos en cualquier pantalla, desde un favicon de 16×16 píxeles hasta una pantalla 4K o un proyector. Grandes empresas como Google, Twitter y Apple usan SVG para sus iconos y logotipos.

Iconos en interfaces web

Los sistemas de iconos modernos (como Font Awesome o Material Icons) se distribuyen en SVG. Permiten cambiar el color, el tamaño y el estilo de los iconos con simples reglas CSS.

Infografías e ilustraciones

Las infografías, diagramas y mapas vectoriales se crean y distribuyen frecuentemente en SVG para garantizar su legibilidad en cualquier dispositivo.

Gráficos de datos interactivos

Librerías como D3.js generan visualizaciones de datos en SVG que responden dinámicamente a interacciones del usuario y actualizaciones de datos en tiempo real.

Limitaciones del formato SVG

• No es adecuado para fotografías: SVG describe formas matemáticas, no imágenes fotográficas con millones de colores y gradientes orgánicos. Para fotos, JPG o PNG siguen siendo los formatos correctos.
• Complejidad en ilustraciones detalladas: una ilustración muy compleja en SVG puede generar un archivo XML enorme, más pesado que su equivalente PNG.
• Rendimiento con muchos elementos: SVGs con miles de elementos pueden ralentizar el renderizado en el navegador.

SVG en la web moderna

SVG está soportado de forma nativa por todos los navegadores modernos (Chrome, Firefox, Safari, Edge) y puede incrustarse directamente en HTML. Esto permite que los SVGs se integren perfectamente con CSS para cambios de color y animaciones, y con JavaScript para interactividad avanzada.

Conclusión

SVG es el formato ideal para cualquier gráfico que necesite escalar sin perder calidad: logotipos, iconos, ilustraciones técnicas y visualizaciones de datos. Su base en XML lo hace flexible, accesible y perfectamente integrado con las tecnologías web modernas. Si diseñas para la web o para medios digitales, SVG debe formar parte de tu flujo de trabajo.

Cómo hacerlo sin subir el archivo

Si el archivo es confidencial, la vía más segura es la que no lo saca de tu equipo. Convertir imagen funciona por completo en el navegador: lee el archivo de tu disco, lo procesa en memoria y lo devuelve a tu disco; no se envía nada a ningún servidor.

1. Abre Convertir imagen.
2. Elige el archivo en tu equipo. Se lee localmente, no se sube.
3. Elige el formato de salida y ajusta la calidad si hace falta.
4. Descarga el resultado. El original se queda donde estaba.

Hazlo en tu navegador, sin que el archivo salga de tu equipo: Convertir imagen