¿Qué es SVG? Guía del formato de gráficos vectoriales

SVG es un formato de imagen hecho de instrucciones de dibujo en lugar de píxeles. Cuando un logotipo, un icono o un gráfico se guarda como SVG, el archivo contiene órdenes del tipo «traza una curva de este punto a este otro y rellénala con este color». Por eso SVG se mantiene nítido a cualquier tamaño, suele ocupar muy poco y se puede abrir y editar en un editor de texto. En este artículo verás el lugar de SVG entre los estándares del W3C, la estructura del archivo, la compatibilidad con navegadores y programas, sus riesgos de seguridad y cómo convertir entre SVG y PNG o JPG.

¿Qué es SVG?

SVG (Scalable Vector Graphics) es un estándar del W3C basado en XML para describir gráficos vectoriales bidimensionales. La extensión es .svg y el tipo MIME es image/svg+xml. Una variante comprimida con gzip usa la extensión .svgz.

Los formatos rasterizados (JPG, PNG, WebP) guardan una imagen como una cuadrícula fija de píxeles; si la amplías, los píxeles se hacen visibles. SVG describe las formas matemáticamente, y el navegador o el programa las vuelve a dibujar con la resolución que tenga la pantalla. La guía de formatos de imagen de MDN considera SVG una opción ideal para imágenes que se pueden representar como órdenes de dibujo, sobre todo cuando el tamaño de visualización es desconocido o variable, y señala que en general no es útil para fotografías.

Historia: SVG 1.0, 1.1 y SVG 2

• 4 de septiembre de 2001: SVG 1.0 se publicó como Recomendación del W3C.
• 14 de enero de 2003: SVG 1.1 pasó a ser Recomendación. La 1.1 dividió el lenguaje en módulos, lo que facilitó definir subconjuntos como los perfiles para móviles.
• 16 de agosto de 2011: se publicó SVG 1.1 Second Edition. Es la versión estable en la que se basan hoy los navegadores.
• SVG 2: según el historial de publicaciones del W3C, los borradores de trabajo aparecieron a partir de 2012 y el primer Candidate Recommendation Snapshot se publicó el 15 de septiembre de 2016. El último snapshot está fechado el 6 de octubre de 2026; el documento sigue en fase de Candidate Recommendation.

SVG 2 parte de 1.1 Second Edition y busca una mejor integración con HTML y CSS. Algunos temas, como los filtros, el enmascaramiento y las fuentes, pasaron a módulos CSS y FX independientes. En la práctica, los navegadores implementan partes de SVG 2, así que no des por hecho que todas las funciones funcionan en todas partes.

Estructura de un archivo SVG

Un archivo SVG sencillo tiene este aspecto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Sistema de coordenadas: viewBox, width y height

viewBox define el sistema de coordenadas interno del dibujo (aquí, de 0 a 100). width y height fijan cuánto espacio ocupa el dibujo en la página. Un SVG con viewBox se escala proporcionalmente a cualquier tamaño que le des en CSS. Los archivos sin viewBox pueden quedar recortados al cambiar de tamaño, uno de los errores más comunes con los logotipos.

Elementos básicos

• Formas: rect, circle, ellipse, line, polyline, polygon y path, que puede dibujar cualquier cosa.
• Texto: text y tspan. El texto sigue siendo seleccionable y se puede buscar, pero si la fuente no está en el dispositivo de quien lo ve, se usa una fuente alternativa.
• Agrupación y reutilización: g, defs, symbol, use. Los conjuntos de iconos suelen reunirse como elementos symbol en un solo archivo.
• Pintura: colores sólidos, degradados lineales y radiales, patrones, trazados de recorte, máscaras y filtros (desenfoque, sombra).
• Estilo y animación: CSS puede dar estilo a SVG; las animaciones CSS y los elementos de animación SMIL añaden movimiento.
• Contenido incrustado: image para imágenes rasterizadas, foreignObject para HTML y script para JavaScript.

Color, transparencia, capas y páginas

La transparencia es nativa en SVG: lo que no se dibuja queda vacío, y opacity y fill-opacity definen la semitransparencia. Las capas se representan con grupos g; Inkscape e Illustrator guardan así sus capas. Los colores son sRGB por defecto, y no hay límite de profundidad de bits en el sentido habitual porque los colores se escriben como números. SVG no es un formato de documento de varias páginas; para dibujos de varias páginas, PDF encaja mejor.

Compatibilidad en navegadores, sistemas y programas

Según MDN, Chrome, Edge, Firefox, Opera y Safari admiten SVG. Puedes usarlo mediante <img>, como background-image de CSS, en línea dentro del HTML o con <object> e <iframe>. Las herramientas vectoriales como Inkscape, Adobe Illustrator, Affinity Designer y Figma leen y escriben SVG, y las versiones actuales de Microsoft Office permiten insertar gráficos SVG.

En otros ámbitos la compatibilidad es escasa: muchas redes sociales, clientes de correo, aplicaciones de mensajería y formularios de subida rechazan SVG o no muestran vista previa. En parte se debe al riesgo de seguridad que se describe a continuación.

Seguridad: trata SVG como un documento

SVG es un documento XML y puede contener un elemento script, atributos de eventos (como onload) y referencias externas. La página «SVG as an image» de MDN explica que, cuando SVG se usa mediante <img> o como fondo CSS, los navegadores desactivan JavaScript y no cargan recursos externos como imágenes u hojas de estilo. Esas restricciones no se aplican cuando el archivo se abre directamente o se incrusta con <iframe>, <object> o <embed>.

La consecuencia práctica: si un sitio permite a los usuarios subir archivos SVG y los sirve directamente desde su propio dominio, un script incrustado en el archivo puede ejecutarse en el contexto de ese sitio (XSS almacenado). Las medidas habituales son:

• Pasar los SVG subidos por un saneador que elimine script, los atributos de eventos, foreignObject y los enlaces externos.
• Servir los archivos de los usuarios desde un dominio independiente, con una Content-Security-Policy estricta, o como descargas (Content-Disposition: attachment).
• Si no necesitas el vector, convertir en el servidor los SVG subidos a PNG y publicar solo la versión rasterizada.

Usos habituales

• Logotipos y elementos de marca: un solo archivo se mantiene nítido desde una tarjeta de visita hasta una valla publicitaria.
• Iconos de interfaz: se pueden colorear con CSS y nunca se ven borrosos en pantallas de alta densidad.
• Gráficos, mapas y diagramas: bibliotecas como D3.js dibujan los datos directamente en elementos SVG.
• Favicons: los navegadores actuales aceptan favicons SVG mediante <link rel="icon" type="image/svg+xml">.
• Corte e impresión: las cortadoras láser, los plóteres de vinilo y las bordadoras trabajan con trazados vectoriales.

Puntos fuertes y débiles

Problemas habituales y cómo resolverlos

Un sitio o una aplicación no acepta SVG

La solución más sencilla es una copia en PNG. Nuestro conversor de SVG a PNG convierte el dibujo en un PNG transparente en tu navegador, con el ancho en píxeles que elijas. Tu archivo no se sube y nunca sale de tu dispositivo.

El texto aparece con otra fuente

SVG no incrusta las fuentes por defecto; si el sistema de quien lo ve no tiene la fuente, se usa una alternativa. En un contexto de imagen tampoco se cargan fuentes externas. Convierte el texto en contornos en tu herramienta de diseño o incrusta la fuente.

El SVG tiene un tamaño incorrecto o aparece recortado en la página

Sin viewBox, o con width/height fijos, el escalado no se comporta como se espera. Añade al elemento raíz svg un viewBox que abarque el dibujo y fija el tamaño en CSS.

El archivo es más grande de lo esperado

Las herramientas de diseño escriben en el SVG metadatos del editor, demasiados decimales y capas ocultas. Un optimizador como SVGO los elimina. La compresión gzip o Brotli en el servidor reduce todavía más un SVG basado en texto.

Necesito mi logotipo PNG en SVG

Una imagen rasterizada no se puede «convertir» de verdad a vector; lo que hacen las herramientas es vectorizar (tracing): detectan las formas y las vuelven a dibujar como contornos. Nuestras herramientas de PNG a SVG y de JPG a SVG vectorizan con 2 a 8 colores. Los resultados son buenos con logotipos y dibujos sencillos, y toscos con fotos. Con estas herramientas, el archivo se sube a nuestros servidores mediante una conexión segura, se vectoriza allí y se elimina en un plazo máximo de 30 minutos.

Consejos de conversión

• Conoce el tamaño de destino: al convertir SVG a PNG, elige el tamaño más grande al que se mostrará la imagen, multiplicado por dos para pantallas de alta densidad. En nuestra herramienta, el lado más largo puede llegar a 4096 píxeles; si dejas vacío el ancho, los dibujos pequeños se escalan para que el lado más largo mida 1024 píxeles.
• JPG para contenido fotográfico: si el SVG incrusta una foto y no necesitas transparencia, JPG o WebP ocupan menos que PNG; puedes convertir después el PNG en el conversor de imágenes.
• Favicons: si tu logotipo es un SVG, el generador de favicon lo acepta y añade icon.svg al paquete.
• Origen limpio para vectorizar: al crear SVG a partir de PNG, parte de una imagen de alta resolución, con colores planos y sin ruido.

Preguntas frecuentes

¿Qué diferencia hay entre SVG y PNG?

Un PNG tiene un número fijo de píxeles y se vuelve borroso al ampliarlo. Un SVG describe formas y se vuelve a dibujar con nitidez a cualquier tamaño. SVG es adecuado para logotipos e iconos; PNG o JPG, para fotos y capturas de pantalla.

¿Puede un archivo SVG contener un virus?

SVG no es un programa ejecutable, pero puede incrustar JavaScript. Los scripts no se ejecutan cuando el SVG se muestra como imagen (<img>), pero pueden ejecutarse si el archivo se abre directamente en un navegador. Los SVG de origen desconocido es mejor revisarlos en un visor o convertirlos a PNG, en lugar de abrirlos directamente.

¿Puedo insertar SVG en Word o PowerPoint?

Las versiones actuales de Microsoft Office admiten la inserción de SVG. Para versiones antiguas, o si vas a compartir el archivo con otros programas, una copia en PNG es más segura.

¿Se pierde calidad al convertir SVG a PNG?

PNG es sin pérdida, pero el dibujo queda fijado a un tamaño en píxeles. Si eliges un ancho suficiente no notarás ninguna pérdida; si después amplías el PNG, se verá borroso.

¿SVG admite animación?

Sí. El movimiento puede venir de animaciones CSS, elementos de animación SMIL y JavaScript. Al convertir a PNG obtienes un solo fotograma.

Fuentes

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: historial de publicaciones de SVG 2
• MDN: SVG as an image
• MDN: guía de tipos y formatos de archivo de imagen