¿Qué es SVG? Cuándo usarlo (y cuándo no)

Son las 9:47 de un martes y tu líder de diseño acaba de soltar un mensaje de Slack que dice, textualmente, "¿podemos hacer todo el sitio en SVG?". Te quedas mirando la pantalla. Sabes que la respuesta es "no, pero partes sí". También sabes que explicarle la diferencia entre un formato vectorial y uno rasterizado a alguien que guarda fotos en la carpeta de Descargas desde hace seis años no es lo que querías hacer antes de comer. La conversación que sigue es la que este artículo busca acortar.

SVG es el formato al que recurre la gente cuando oye la palabra "escalable" y deja de leer. Es genuinamente brillante para algunos trabajos y genuinamente malo para otros, y la línea entre ambos es más marcada de lo que la mayoría de los tutoriales reconocen. Aquí tienes la versión honesta: qué es SVG, dónde gana, dónde falla y cómo convertir hacia y desde este formato sin perder las cualidades que buscabas en primer lugar.

Antecedentes: cómo llegó SVG hasta aquí

SVG significa Scalable Vector Graphics (Gráficos Vectoriales Escalables). A diferencia de un JPG o PNG, un archivo SVG no es una cuadrícula de píxeles, sino un documento XML que describe formas usando matemáticas. Un círculo no son 10,000 puntos de color, es una sola línea de código que dice "dibuja un círculo de radio 50 centrado en este punto, rellénalo de rojo". Cuando el navegador renderiza el SVG, redibuja esas instrucciones al tamaño que le pidas. Por eso SVG escala infinitamente sin perder nitidez: no hay nada que desenfocar.

El formato fue estandarizado por el W3C en 2001, perdió una competencia de popularidad de una década contra Flash, y solo se volvió mainstream cuando iOS mató a Flash en 2010. Todos los navegadores principales soportan SVG de forma nativa desde aproximadamente 2011, y las herramientas — Sketch, Figma, Illustrator, Inkscape — han madurado hasta el punto de que producir SVG es ahora más fácil que producir equivalentes rasterizados optimizados. Los archivos suelen pesar entre 1 y 20 KB, lo cual es drásticamente menor que el mapa de bits equivalente en tamaños retina.

Dónde gana realmente SVG

Tres casos de uso justifican SVG sin discusión:

• Logos y marcas. Un logo vive a 24 px en un favicon y a 800 px en una valla publicitaria. Un SVG maneja ambos desde un solo archivo. Un PNG necesitaría un sprite sheet de 6 tamaños.
• Iconos de interfaz. Heroicons, Lucide, Feather y Phosphor distribuyen sprites SVG porque un icono de 16x16 debe verse nítido en una pantalla Retina 3x DPR, y SVG lo logra sin un PNG fuente de 48x48.
• Gráficos, diagramas e infografías. Cualquier cosa con bordes definidos, rellenos planos y etiquetas de texto se renderiza mejor como SVG que como captura de pantalla JPG de lo mismo. D3, Chart.js y Mermaid generan SVG de forma nativa.

La ventaja adicional es que SVG es texto editable. Puedes abrir un logo en cualquier editor de texto, cambiar el color de relleno de #FF0000 al turquesa de tu marca y guardar. Sin necesidad de licencia de Illustrator.

Dónde falla SVG, a menudo gravemente

SVG es la opción incorrecta para cualquier cosa fotográfica. Una fotografía tiene millones de sutiles gradaciones de color que no pueden expresarse como un conjunto finito de formas. Si intentas convertir una foto de 12 megapíxeles a SVG, obtienes un archivo monstruoso de 200 MB (porque cada píxel se convierte en una forma) o un efecto de póster estilizado (porque un auto-trazador simplificó los degradados en 12 regiones planas).

SVG también tiene problemas con:

• Sombreado e iluminación complejos. El arte de videojuegos, la ilustración pintada y cualquier cosa con transiciones suaves pertenece a PNG o WebP.
• Clientes de correo. Outlook elimina SVG directamente. Usa alternativas PNG para cualquier imagen en correos electrónicos.
• PowerPoint y Word antiguos. Office 2016 y anteriores a veces incrustan SVG como una alternativa rasterizada plana, anulando el propósito.
• Flujos de impresión que esperan CMYK. SVG solo es RGB. Una imprenta comercial quiere EPS o PDF para arte vectorial: convierte mediante JPG a EPS o EPS a JPG al moverte entre impresión y pantalla.

Paso a paso: decidir y convertir en la práctica

1. Identifica el tipo de imagen. Abre el archivo fuente. Si tiene bordes definidos, rellenos planos y menos de quizás 20 colores distintos, SVG es una opción. Si es una fotografía o una ilustración pintada, detente aquí y usa JPG a WebP o JPG a PNG en su lugar.
2. Localiza el original. Si existe un archivo fuente de Figma, Sketch, Illustrator o Inkscape, exporta SVG desde allí. Eso te da trazados limpios definidos matemáticamente con capas nombradas.
3. Si solo tienes un JPG o PNG, pásalo por JPG a SVG. Inspecciona el resultado: cuenta los trazados en un editor de texto o en DevTools. Menos de 50 trazados es editable; más de 500 es una sopa de trazados.
4. Limpia y optimiza. Ejecuta el SVG a través de SVGO con la configuración predeterminada. Espera una reducción del 30 al 60 por ciento.
5. Añade metadatos de accesibilidad. Inserta un <title> y <desc> al inicio del SVG para que los lectores de pantalla puedan anunciarlo.
6. Prueba en los entornos de destino. Renderiza en Chrome, Safari, Safari móvil y una vista previa de Outlook de escritorio si el correo electrónico está en el alcance. Si Outlook está en el alcance, exporta también una alternativa PNG.
7. Genera alternativas rasterizadas. Usa SVG a JPG al doble del tamaño de visualización para cualquier plataforma que rechace subidas SVG.
8. Publica y monitorea. Revisa el panel de red de DevTools para confirmar que el SVG, no la alternativa, se está descargando en navegadores compatibles.

Errores comunes y cómo solucionarlos

• Error: trazar una foto y llamarla vector. El resultado es enorme e ineditable. Solución: mantén la foto como JPG o WebP y acepta que no todas las imágenes pueden vectorizarse.
• Error: enviar un SVG con datos rasterizados base64 incrustados. El archivo es técnicamente SVG pero se comporta como un PNG. Solución: abre el SVG en un editor de texto, encuentra cualquier bloque data:image/png;base64 y reemplázalo con referencias enlazadas o reconstruye desde el arte original.
• Error: pegar la exportación de Illustrator SVG con megabytes de metadatos. A Adobe le encanta incrustar XMP. Solución: ejecuta a través de SVGO con el plugin removeMetadata habilitado, que es el predeterminado.
• Error: usar SVG dentro de un correo electrónico y preguntarse por qué Outlook muestra un cuadro vacío. Solución: envía una alternativa PNG renderizada mediante PNG al ancho exacto de destino.
• Error: codificar colores de relleno dentro del SVG cuando quieres control CSS. Solución: elimina los atributos fill= en línea y establece fill: currentColor mediante hoja de estilo para que el icono herede el color del texto.

Ejemplos reales

Octicons de GitHub se distribuyen como un solo sprite SVG, 12 KB comprimido con gzip, que cubre 200+ iconos. El sprite PNG equivalente a resolución 2x pesaría aproximadamente 280 KB. El ahorro en la carga de página se acumula en millones de visitas.

El checkout de Stripe usa SVG para cada logo de marca e icono de método de pago. Cuando Stripe añadió Klarna, Affirm y Cash App en 2023, cada adición fue un solo archivo SVG de 2 KB en lugar de cinco tamaños PNG por logo.

El equipo de gráficos de The New York Times envía mapas electorales interactivos en SVG para que al pasar el ratón sobre un estado aparezcan descripciones y al tocar una región se resalte. El mismo mapa como serie de PNG requeriría un sistema de manejo de eventos completamente separado.

SVG frente a formatos rasterizados de un vistazo

Caso de uso	SVG	PNG	JPG	WebP
Logotipo / marca	Mejor	Aceptable	Evitar	Aceptable
Icono de interfaz	Mejor	Aceptable	Evitar	Aceptable
Fotografía	Evitar	OK (sin pérdida)	Mejor	Mejor
Gráfico / diagrama	Mejor	Aceptable	Aceptable	Aceptable
Gráfico para correo electrónico	Evitar (Outlook)	Mejor	Buena	Evitar
Impresión (CMYK)	Evitar	Evitar	Aceptable	Evitar

Consejos avanzados

1. Incluye el SVG crítico en línea en lugar de enlazarlo. Un SVG en línea de 1 KB ahorra un viaje de ida y vuelta HTTP y permite que CSS lo anime.
2. Usa sprites SVG para conjuntos de iconos. Un solo archivo, una entrada en caché, cada icono referenciado por <use href="#icon-name">.
3. Anima con SMIL o CSS, no con GIF. Un SVG de 200 bytes con una animación de stroke-dasharray reemplaza un spinner GIF animado de 40 KB y se ve más nítido.
4. Limita a un viewBox que te sea de confianza. Establecer viewBox explícitamente evita que el SVG herede una dimensión del elemento padre y se renderice de forma extraña.
5. Usa preserveAspectRatio="xMidYMid meet" para iconos para que se centren dentro de su contenedor sin distorsión.
6. Combina múltiples pases de optimización. SVGO seguido de compresión Brotli en la CDN puede producir respuestas de 40 bytes para iconos simples.
7. Genera un fallback PNG automáticamente. Un paso de compilación que ejecuta resvg in.svg out.png junto a cada recurso SVG significa que nunca publicas sin un respaldo.

Preguntas frecuentes

¿Es SVG siempre más pequeño que PNG?

No. Un icono simple sí; una fotografía trazada con 3,000 trazos no. Un SVG complejo puede tener 500 KB mientras que el PNG equivalente tiene 200 KB. Siempre verifica los bytes reales.

¿Puede Google indexar texto dentro de SVG?

Sí. El texto dentro de elementos SVG <text> es rastreable, lo que es una razón por la que los diagramas SVG tienen buen rendimiento en búsquedas.

¿Cómo hago que un SVG sea editable como vector después de trazarlo?

Por lo general, no puedes hacer que un SVG muy trazado sea significativamente editable. Lo correcto es encontrar o recrear la fuente vectorial original.

¿Qué hay del SVG para fotografía de producto en un sitio de comercio electrónico?

Nunca. La fotografía de producto es fotográfica; usa WebP con respaldo JPG.

¿Funciona SVG en PDF?

Sí: los generadores de PDF modernos (Chromium print, Prince, weasyprint) conservan SVG como vector incrustado. Las herramientas más antiguas lo rasterizan.

¿Cómo convierto un SVG a JPG para una miniatura?

Usa SVG a JPG al doble de la dimensión de visualización, luego comprime con Comprimir JPG.

¿Debería usar SVG para una imagen principal?

Solo si la imagen principal es una ilustración con formas planas. Para una foto principal, AVIF o WebP es lo correcto.

El árbol de decisión, resumido

1. ¿Logotipo o icono, colores planos, bordes nítidos? Usa SVG.
2. ¿Gráfico, diagrama o infografía? Usa SVG.
3. ¿Fotografía o ilustración pintada? Usa JPG o WebP. Convierte con el convertidor de imágenes.
4. ¿Gráfico para correo electrónico? Usa PNG. SVG no se renderizará en Outlook.
5. ¿La plataforma rechaza SVG? Rasteriza al doble del tamaño de visualización mediante SVG a JPG o exporta un PNG.

Si estás auditando un sitio por rendimiento, reemplaza los iconos y logotipos en mapa de bits con SVG y reemplaza las fotos trazadas en SVG con JPG o WebP adecuados. Ambos movimientos reducen el peso de la página y mejoran la calidad visual. Ejecuta un solo recurso de prueba a través de JPG a SVG ahora mismo: si vuelve como un archivo editable limpio, tienes un nuevo flujo de trabajo. Si vuelve como un lío de 200 trazos, tienes tu respuesta sobre ese tipo de recurso y puedes dejar de intentarlo. Combina el resultado con comprimir imagen y la herramienta información de imagen para asegurarte de que los entregables cumplan los objetivos que estableciste.

SVG y el flujo de compilación moderno

Las herramientas modernas de frontend tratan a SVG como un ciudadano de primera clase. En React, puedes importar un archivo SVG directamente como componente (import { ReactComponent as Logo } from './logo.svg') y pasarle props como a cualquier otro componente. En Vue, el mismo patrón funciona mediante vite-svg-loader. En Svelte, el SVG es simplemente marcado dentro del componente. Esto significa que un diseñador puede entregar un único archivo .svg y el desarrollador lo coloca sin necesidad de un paso de exportación a PNG.

Para sitios estáticos, herramientas como SVGR convierten archivos SVG en componentes tipados durante la compilación. El resultado es «tree-shakeable», por lo que los iconos no utilizados se eliminan del paquete final. Una biblioteca de 200 iconos enviada como componentes SVGR termina siendo de 30 KB comprimida con gzip, porque solo los iconos realmente usados en cada página llegan al fragmento. La misma biblioteca como sprites PNG ocuparía al menos 280 KB, descargada una vez para todas las páginas, uses 5 iconos o 200.

Accesibilidad SVG y ARIA

Como SVG es texto, los motores de búsqueda pueden leerlo. Añade una etiqueta <title> y <desc> a cualquier SVG que publiques: es el equivalente vectorial del texto alternativo. Los lectores de pantalla los anunciarán. Para SVG en línea usado como icono junto a una etiqueta, usa aria-hidden="true" para que el lector de pantalla no lo anuncie dos veces.

Si el SVG es la única etiqueta de un elemento interactivo (un botón con solo un icono, sin texto), añade role="img" y aria-label="Description" en el propio elemento SVG. Este patrón supera al texto oculto pero visualmente presente en los resultados de pruebas de herramientas axe-core y WAVE. El mismo archivo SVG se puede usar en ambos contextos; la etiqueta contenedora elige el comportamiento de accesibilidad.

Comprobación de realidad del tamaño de archivo SVG

La gente asume que SVG siempre es más pequeño. A menudo lo es: un icono de un solo color ocupa 800 bytes frente a 4 KB de PNG. Pero una ilustración SVG compleja con 5,000 trazados anidados y fallbacks raster incrustados en base64 puede alcanzar 500 KB, más grande que el PNG comprimido equivalente. Procesa cualquier SVG con SVGO antes de enviarlo; elimina metadatos, colapsa trazados redundantes y redondea coordenadas de coma flotante. Los ahorros típicos de SVGO son del 30 al 60 por ciento.

Si tu SVG contiene imágenes raster incrustadas (verás «data:image/png;base64,...» dentro del XML), eso ya no es un archivo vectorial real. Extrae esas imágenes, guarda los rasters por separado y refiérelos mediante etiquetas <image href> o reestructura el diseño. Para flujos de trabajo en equipo, ejecuta una comprobación automatizada de SVGO en CI para que los colaboradores no puedan enviar accidentalmente un SVG de 500 KB lleno de metadatos de Illustrator.

Animación SVG: el superpoder subestimado

Como SVG es XML, cada elemento se puede animar con CSS o SMIL. Un spinner de carga que anima stroke-dasharray puede reemplazar un GIF animado de 40 KB. Los estados de hover en un icono pueden transformar una forma en otra con una transición de 200 ms. Las animaciones de introducción de marca, las que antes requerían Lottie o renders de After Effects, pueden enviarse como un SVG de 12 KB con animaciones incrustadas.

El costo es la CPU de renderizado del navegador. Un SVG complejo que anima 200 trazados a 60 fps puede saturar una CPU de gama media en móvil. Para cualquier cosa más allá de una animación simple de iconos, perfila en un dispositivo Android de gama baja antes de enviar. Si el rendimiento está al límite, recurre a un elemento de video o a un archivo Lottie pequeño renderizado con Lottie-web.

SVG para visualización de datos

Si alguna vez has abierto un gráfico interactivo del New York Times, has usado visualización de datos con SVG. La combinación de D3.js y SVG domina el mundo de la representación de gráficos porque las formas vectoriales escalan nítidamente, las etiquetas de los ejes se mantienen legibles en todos los niveles de zoom y los puntos de datos individuales son elementos DOM reales a los que puedes adjuntar eventos. Un gráfico de barras en SVG es un <rect> por barra; la información sobre herramientas, los estados de hover y las animaciones cuelgan de esos nodos DOM de forma natural.

El enfoque alternativo es el renderizado basado en canvas (Chart.js, ECharts), que es más rápido para gráficos con miles de puntos, pero sacrifica la capacidad de consultar elementos individuales mediante herramientas de accesibilidad y motores de búsqueda. Para la mayoría de los contextos editoriales y de paneles, SVG gana en accesibilidad, SEO y ergonomía para desarrolladores. Reserva canvas para conjuntos de datos realmente grandes —por ejemplo, gráficos de dispersión con 10,000+ puntos— donde SVG crearía demasiados nodos DOM.

Cuando los diseñadores entregan «SVG» que no es realmente SVG

Una decepción común: un diseñador te entrega un archivo que termina en .svg, lo abres y dentro hay un solo <image href="data:image/png;base64,..."> que envuelve una imagen rasterizada. El SVG es solo un envoltorio alrededor de un PNG. El archivo es más grande que un PNG normal (porque base64 lo infla aproximadamente un 33 por ciento) y no tiene ninguno de los beneficios de escalado.

Esto suele ocurrir cuando un diseñador exporta un archivo complejo de Photoshop como SVG sin reconstruirlo primero en forma vectorial. La solución es la conversación, no la herramienta: pide la fuente vectorial original, o acepta que el diseño es fotográfico y usa un PNG real mediante conversión a PNG. Si el diseñador no puede producir vectorial real, pasa el PNG por JPG a SVG para ver si el auto-trazado produce algo utilizable. Por lo general no lo hace, y la respuesta correcta es comprometerse con el raster.