Vector SVG (.svg)
W3C EstándarScalable Vector Graphics (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales que admite interactividad, estilos CSS y animación.
Convertir de SVG a PNG
Convertidor gratuito de SVG a PNG en el navegador. Convierte archivos al instante en tu dispositivo.
Comprimir SVG en línea
Privado - los archivos nunca salen de tu dispositivo
Inspección y metadatos
Los sistemas operativos y analizadores de archivos identifican los archivos de SVG inspeccionando la secuencia de bytes binarios inicial:
Firma de cabecera a nivel de bytes (bytes mágicos)
Los sistemas operativos y analizadores de archivos identifican los archivos de SVG inspeccionando la secuencia de bytes binarios inicial:
FIRMA HEXADECIMAL (DESPLAZAMIENTO 0):
3C 73 76 67REPRESENTACIÓN ASCII: <svg
Estandarización: W3C Recommendation (SVG 1.1 / SVG 2)
Especificaciones técnicas
| Arquitectura del contenedor | Documento de marcado de texto basado en XML que define geometrías vectoriales 2D |
| Compresión | Compresión de texto con Gzip o Brotli (SVGZ usa Gzip) |
| Orden de bytes (Endianness) | No se aplica (flujo de caracteres de texto UTF-8/UTF-16) |
| Espacios de color | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Canales y estructura | Formas vectoriales de resolución ilimitada, curvas de Bézier, tipografía y máscaras de opacidad |
| Dimensiones máximas | Independiente de la resolución: se escala a cualquier tamaño de pantalla sin pixelarse |
| Transparencia | Transparencia alfa variable y modos de fusión CSS |
| Streaming y progresivo | El analizador XML del navegador admite el análisis progresivo del flujo de texto |
Matriz de comparación técnica: SVG frente a la competencia
| Atributo técnico | SVG (Actual) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Modelo de renderizado | DOM vectorial de modo retenido | Lienzo de mapa de bits de modo inmediato | Contenedor de página fija de modo retenido | Cuadrícula de píxeles ráster |
| Estilos y CSS | Permite aplicar estilos mediante clases y variables CSS | Requiere redibujar mediante la API Canvas de JavaScript | Sin estilos CSS dinámicos | Píxeles ráster fijos |
| Escalabilidad infinita | Sí (curvas vectoriales matemáticas) | Requiere ajustar la resolución manualmente | Sí (elementos vectoriales) | No (se pixela al ampliar) |
| Interactividad | Eventos DOM nativos (pasar el cursor, hacer clic y animar) | Requiere calcular manualmente la detección de colisiones | Documento estático | Requiere mapa de imagen o lienzo |
Modos de corrupción comunes y guía de recuperación hexadecimal
El navegador muestra un error de análisis XML: etiqueta sin cerrar o etiqueta de apertura y cierre no coincidentes.
Causa raíz: Sintaxis XML mal formada, etiquetas de cierre ausentes o signos «&» sin escapar (se necesita «&»).
Recuperación: Valida el archivo con un analizador XML (xmllint file.svg) y corrija las etiquetas que no estén equilibradas.
Análisis de seguridad y vectores de ataque al analizador
SVG es XML ejecutable compatible con etiquetas <script> y entidades externas. Mostrar archivos SVG no confiables puede exponer a riesgos importantes de XSS y SSRF.
Vectores de ataque conocidos
- Ataques XSS almacenados mediante etiquetas <script> incrustadas o controladores de eventos onload=.
- Ataques de entidades externas XML (XXE) que leen archivos locales del servidor cuando este analiza el archivo.
- La expansión de entidades XML «Billion Laughs» provoca una denegación de servicio.
Mejores prácticas defensivas: Sanea siempre los archivos SVG con DOMPurify antes de incrustarlos. También puede servirlos con «Content-Security-Policy: default-src none» o mediante etiquetas <img>, que desactivan automáticamente los scripts.
Orígenes históricos e hitos
Ventajas principales
- No depende de la resolución: mantiene líneas y tipografía nítidas en cualquier pantalla o tamaño de impresión.
- Archivos muy pequeños para logotipos, iconos y elementos de interfaz.
- Se puede programar y aplicar estilos por completo con CSS y JavaScript en el DOM del navegador.
Limitaciones técnicas
- No es adecuado para fotografías ni para imágenes complejas de tonos continuos.
- Las rutas vectoriales complejas con miles de nodos pueden ralentizar la representación en la CPU y consumir mucha batería.
- Al estar basado en XML, puede incluir scripts; antes de mostrar archivos no confiables, hay que sanearlos de forma estricta.
Curiosidades técnicas interesantes
- Como SVG es texto XML sin formato, comprimirlo con Gzip (para crear un archivo .svgz) suele reducir su tamaño entra un 70 % y un 80 %.
- El atributo viewBox define un lienzo de coordenadas abstracto que se asigna dinámicamente a los píxeles físicos de la pantalla.
- Al principio, los navegadores web no tenían motores SVG nativos. Por ello, Adobe distribuyó el complemento Adobe SVG Viewer hasta que la compatibilidad nativa se consolidó, alrededor de 2011.
Preguntas técnicas frecuentes
¿Pueden los archivos SVG contener código malicioso?
Sí. Al ser XML válido, SVG puede contener JavaScript incrustado (<script>), que se ejecuta si el archivo se carga directamente en un navegador o se abre dentro de un elemento <svg>. Servir archivos SVG con una etiqueta <img> neutraliza la ejecución de scripts.
¿Cuándo debo usar SVG en lugar de PNG?
Usa SVG para iconos, logotipos, gráficos, ilustraciones y tipografía cuando necesite que se vean nítidos a cualquier tamaño y ocupen poco. Para fotografías, usa PNG o WebP.
¿Cómo puedo optimizar archivos SVG grandes o complejos?
Puedes limpiar las rutas vectoriales y reducir su tamaño eliminando metadatos redundantes, comentarios de editores (como Inkscape o Illustrator), grupos invisibles y declaraciones de espacios de nombres sin usar. Para ello, usa herramientas como SVGO o comprime el archivo SVG.
Pares de conversión de SVG relacionados
La conversión de archivos vectoriales SVG a imágenes ráster PNG transforma gráficos escalables basados en código en cuadrículas de píxeles fijos para lograr una compatibilidad universal con las aplicaciones.
Encapsula imágenes ráster PNG en un contenedor vectorial XML SVG para escalarlas de forma adaptable en la web e integrarlas en diseños compatibles con vectores.
Compila registros heredados de dibujo vectorial GDI de Windows de 16 bits en rutas SVG modernas y escalables sin pérdida de resolución.
Convierte gráficos de metarchivos mejorados de Windows de 32 bits en vectores SVG limpios y adaptables para la web y software de diseño.
La conversión de un dibujo DXF a SVG transforma datos vectoriales de ingeniería complejos en gráficos XML ligeros para navegadores web y editores vectoriales.
La conversión de gráficos vectoriales escalables al formato de intercambio de dibujos traduce vectores visuales listos para la web en coordenadas matemáticas precisas requeridas por el software de diseño asistido por computadora.
Comparte un logotipo o una ilustración SVG como un PDF de una sola página. Sus rutas escalables se convierten en una imagen de resolución fija, por lo que ampliarla no permite recuperar el detalle vectorial.