¿Qué es un archivo SVG?

SVG es un formato de texto plano que se abre en cualquier editor. Guarda formas y coordenadas en lugar de píxeles, así que se mantiene nítido a cualquier tamaño: un logotipo llevado al tamaño de una valla publicitaria no pierde nada. Se usa para la web, logotipos y dibujo lineal y la edición.

La extensión es .svg y el nombre completo, Scalable Vector Graphics. Ambos importan menos que lo que el archivo puede contener, y de eso trata el resto de esta página.

W3C lo publicó en 2001. La especificación es SVG 1.1.

La edad interesa por un motivo práctico: cuanto más antiguo es un formato, más programas han tenido tiempo de aprenderlo.

Está publicada entera, así que cualquiera puede implementarla leyendo el documento en vez de a base de inspeccionar archivos. Por eso aparece en tantos programas, y por eso los archivos escritos hace veinte años siguen abriéndose hoy. Publicada no quiere decir libre de regalías: cuando un formato envuelve un códec, la licencia de las patentes es un asunto aparte que la norma no resuelve.

SVG guarda su contenido exactamente. Volver a guardarlo no cambia nada, así que puedes abrirlo, editarlo y guardarlo tantas veces como quieras sin acumular daño; eso es lo que lo convierte en un formato de trabajo y no de entrega.

SVG lleva un canal alfa, así que un logotipo conserva sus bordes suaves sobre lo que haya detrás en vez de llegar dentro de una caja blanca.

SVG puede guardar una animación en lugar de una sola imagen fija. Conviene saberlo antes de convertir: un destino que solo admite un fotograma se queda con el primero y descarta el resto, casi siempre sin decirlo.

Puede trabajar en RGB.

Ocho bits por canal es lo que muestra una pantalla y lo que lleva casi cualquier formato de entrega.

SVG guarda las partes de una imagen por separado en vez de fundidas, y eso es lo que lo convierte en un archivo de trabajo. Casi todos los formatos a los que se convierte las funden, y la fusión no tiene vuelta atrás: conserva el original con capas.

Inkscape, Adobe Illustrator y Figma lo leen, y también la mayoría de programas del mismo tipo.

Cuando un archivo no se abre, el formato rara vez es el problema: lo más habitual es que el programa sea anterior al formato. Convertir a algo más antiguo es la salida fiable, y para eso está el resto de este sitio.

Cualquier navegador actual lo lee.

Eso lo convierte en algo que puedes poner en una página o adjuntar a un mensaje sin preguntarte qué tiene instalado el otro lado.

SVG está pensado para abrirse y cambiarse. Guarda el archivo en este formato mientras el trabajo siga en marcha y exporta desde él cada vez que haga falta una copia terminada.

Un SVG es un documento XML. Ábrelo en un editor de texto y encontrarás instrucciones legibles: dibuja un círculo en estas coordenadas con este radio, rellena este trazado con este color, coloca este texto en esta posición. Dentro del archivo no hay ni un solo píxel.

Esa propiedad lo mete en un club muy corto: el EPS es PostScript en texto y un DXF también se lee a ojo, y con eso se acaba la lista entre los formatos de imagen de uso corriente. Se puede comparar en un control de versiones, editar a mano, generar desde un script, comprimir con el mismo gzip que comprime el HTML y buscar dentro. También significa que un SVG roto se suele diagnosticar leyéndolo, cosa que no ocurre con un PNG corrupto.

El archivo describe formas en lugar de una rejilla de valores de color, así que quien lo dibuja las traza de nuevo al tamaño que se le pida. Un logotipo mostrado a 24 píxeles y el mismo logotipo impreso a un metro de ancho salen del mismo archivo y son exactos en los dos casos.

Por eso el SVG es la respuesta correcta para logotipos, iconos, esquemas y gráficas, y la respuesta equivocada para fotografías. Una fotografía no tiene formas que describir: convertirla a SVG produce o bien un archivo enorme lleno de rectángulos de color o bien una aproximación cartelista, y ninguna de las dos cosas era lo que se buscaba.

Dos atributos deciden cómo se comporta un SVG dentro de una maquetación. width y height le dan un tamaño propio; viewBox define el sistema de coordenadas en el que están dibujadas las formas. Con un viewBox presente, el dibujo se escala a la caja que la página le dé.

Casi todas las quejas sobre un SVG que aparece al tamaño equivocado acaban aquí. Un archivo con dimensiones fijas y sin viewBox ignora el dimensionado por CSS y se queda donde lo dejó el programa de diseño. Añadir un viewBox que coincida con el dibujo suele ser una corrección de una línea, y es lo que convierte un archivo exportado en un recurso utilizable.

Un SVG que contiene texto llama a sus tipografías por su nombre, igual que hace una página web. En una máquina que no tenga esa familia, el programa que dibuja pone otra en su lugar, los anchos de letra cambian y una marca cuidadosamente colocada se desplaza o se sale de su forma.

La defensa habitual es convertir el texto en trazados, que transforma cada letra en un contorno. Garantiza el aspecto en todas partes y deja el texto permanentemente ineditable e imposible de buscar. Para un logotipo el intercambio es bueno; para una gráfica con rótulos de eje o un esquema pensado para mantenerse, no lo es, y guardar una versión con texto vivo al lado compensa el segundo archivo.

Cuando un SVG se escribe directamente dentro del HTML, en lugar de cargarse a través de una etiqueta de imagen, sus elementos pasan a formar parte de la página. El CSS puede recolorear un trazado al pasar el ratón, una hoja de estilos puede adaptar un icono al modo oscuro y JavaScript puede animar piezas concretas.

Cargado como imagen o como fondo en CSS no se aplica nada de eso: el SVG se dibuja aislado y la página no puede llegar a su interior. Esa distinción decide qué técnica usar, y explica que el mismo archivo pueda ser modificable en un punto del sitio e inerte en otro.

Como es un documento y no una imagen, un SVG puede contener elementos de script, referencias externas y enlaces. Servido desde tu propio dominio y abierto de forma directa, ese script se ejecuta con los privilegios de tu sitio, que es un vector de ejecución de código ajeno que un PNG sencillamente no tiene.

Por eso muchos formularios de subida rechazan el SVG de entrada, y por eso un sitio que acepte los de sus usuarios debería sanearlos en lugar de confiar en ellos. También conviene saberlo como destinatario: un SVG de origen desconocido se parece más a un archivo HTML que a una imagen, y abrirlo en el navegador no es el acto neutro que aparenta.

Illustrator, Figma y Sketch escriben una cantidad notable de andamiaje: metadatos del editor, nombres de capa, grupos vacíos, coordenadas con dieciséis decimales y definiciones que no usa nadie. Un icono que debería ocupar 800 bytes se exporta habitualmente con ocho kilobytes.

Los optimizadores lo quitan todo sin cambiar lo que se dibuja, y reducciones del 60 al 80 por ciento son corrientes. Además comprime muy bien en tránsito por ser texto — un servidor que envíe gzip o brotli lo encoge otra vez — que es la razón de que un juego de iconos SVG bien preparado sea a menudo más pequeño que un solo PNG.

Un SVG puede incrustar una imagen de píxeles como URI de datos en base64, y algunas rutas de exportación lo hacen sin decirlo: una forma con un efecto que el formato no sabe expresar se aplana a imagen y se envuelve en SVG.

El resultado es un archivo con extensión .svg que no escala, porque lo que hay dentro es una rejilla de píxeles de tamaño fijo. Si un SVG se ve borroso al ampliarlo, esta es casi siempre la explicación, y el arreglo está en el archivo de diseño y no en la exportación.

El dibujado no lo hace el navegador sino resvg, elegido para que el resultado sea idéntico en cualquier equipo. La resolución se decide solo por el ancho: por defecto son 1.024 píxeles, y la altura sale de la proporción del viewBox. Hay un factor de escala entre 0,1 y 10 para pedir más o menos, salvo en las salidas a ICO y a PDF, donde no existe ese control y el ancho es exactamente 1.024.

El lienzo se dibuja con el fondo completamente transparente, de modo que la transparencia se resuelve más tarde en la cadena de imagen. Hacia PNG, WebP, AVIF, JXL, TIFF e ICO se conserva; hacia JPG, BMP y GIF no puede conservarse y los píxeles transparentes se rellenan con un color de fondo que puedes elegir y que por defecto es blanco. Todo esto sucede dentro de tu navegador, con un tope de 100 MB por archivo: el dibujo no se sube a ningún servidor.

A GIF, este conversor no escribe transparencia de ninguna clase: el archivo sale opaco sobre el fondo elegido, con una paleta de 256 colores, y en un solo fotograma. Para un dibujo con bordes limpios eso casi siempre significa que el destino correcto era PNG.

A PDF el dibujo llega como imagen dibujada, no como vectores: se rasteriza a 1.024 píxeles de ancho y se coloca en una sola página, sin capa de texto. Es perfectamente utilizable para ver y para enviar; si lo que necesitas es un PDF vectorial que imprima nítido a cualquier tamaño, la exportación del propio programa de dibujo es el camino.

Cuando aquí se convierte un PNG o un JPG a SVG, lo que ocurre es un vectorizado: el motor redibuja la imagen como regiones de color plano, con ocho colores por defecto. No recupera las formas originales, porque en un mapa de bits no hay formas que recuperar.

Los resultados medidos dicen bastante. Un logotipo plano sale fiel y con un tamaño razonable. Un degradado sale a bandas. Una captura de pantalla con texto produjo un SVG cuarenta veces mayor que el PNG de partida, y una fotografía salió cuatro veces más grande y cartelista. Por eso el archivo resultante se mide contra el original y la página te dice cuál de los dos casos te ha tocado antes de que lo descargues.