¿Qué es el SVG? Por qué se parece tanto al PDF y en qué se separan

La conversión de PDF a SVG es una de las más "directas" entre formatos, porque los dos son en realidad miembros de la misma familia. En este artículo examinamos sus raíces comunes, en qué puntos coinciden exactamente y dónde se separan.

El antepasado común: el modelo de representación de PostScript

Los dos formatos usan un modelo de representación derivado de PostScript, el lenguaje de descripción de página que Adobe desarrolló en los años ochenta. Las ideas básicas de ese modelo son:

El concepto de trazado (path). Las formas se componen de trazados definidos por segmentos rectos y curvas de Bézier. Un trazado puede ser abierto o cerrado; se puede rellenar, contornear o usar como área de recorte.

Modelo del pintor (painter's model). Los dibujos se aplican por orden y lo que se dibuja después queda encima de lo anterior. Como aplicar pintura sobre un lienzo.

Estado gráfico (graphics state). Ajustes como el color, el grosor de línea o la matriz de transformación se mantienen en una pila de estado; se pueden guardar y restaurar.

Matrices de transformación. El escalado, el desplazamiento, el giro y el sesgado se expresan con matrices de transformación afín de seis elementos.

Gracias a esa base común, la mayoría de las instrucciones de dibujo del PDF tienen equivalente directo en SVG:

| Instrucción PDF | Equivalente SVG | |---|---| | m (moveto) | M (datos de path) | | l (lineto) | L | | c (curveto) | C (Bézier cúbica) | | re (rectangle) | <rect> o path | | f (fill) | Atributo fill | | S (stroke) | Atributo stroke | | W n (clip) | <clipPath> | | cm (transformación) | Atributo transform | | q/Q (guardar/restaurar estado) | Agrupación <g> |

El trabajo del conversor consiste básicamente en hacer esa correspondencia. Por eso la conversión de PDF a SVG es mucho más fiable que, por ejemplo, la de PDF a Word: en la segunda hacen falta conjeturas de formato, mientras que aquí hay sobre todo traducción directa.

Primera divergencia: el sistema de coordenadas

El PDF viene de la tradición de la impresión. El origen está en la esquina inferior izquierda de la página y el eje y crece hacia arriba. Es igual que el sistema cartesiano de las clases de matemáticas y resulta natural para pensar en medidas de papel.

El SVG viene de la tradición de la pantalla. El origen está arriba a la izquierda y la y crece hacia abajo. Es el enfoque estándar de los gráficos por ordenador.

Los conversores lo resuelven con una matriz de transformación: invierten todo el contenido en el eje y y lo desplazan lo que mide de alto la página. Como usuario no lo notas, pero si abres el archivo SVG como texto puedes ver en el elemento raíz una transformación parecida a esta:

transform="matrix(1,0,0,-1,0,842)"

Significa "invierte el eje y y desplaza 842 unidades hacia abajo"; 842 es la altura de una página A4 en puntos.

Segunda divergencia: las unidades

El PDF usa la unidad punto: 1 punto = 1/72 de pulgada. Una página A4 mide 595 × 842 puntos. Esa unidad es el estándar en el mundo de la impresión.

El SVG define unidades de usuario con el atributo viewBox y no está ligado a una medida física. Con los atributos width y height se pueden indicar unidades como píxeles, milímetros o pulgadas, pero no es obligatorio.

En la conversión, los valores en puntos del PDF se toman normalmente como unidades de usuario de SVG. El resultado conserva las proporciones de la página, pero la información de tamaño físico puede quedar ambigua. Si estás preparando un SVG que va a imprenta, hay que indicar explícitamente width y height en milímetros.

Tercera divergencia: las tipografías

Esta es la diferencia práctica más importante entre los dos formatos.

El PDF incrusta las tipografías. Un PDF puede llevar (y normalmente lleva) dentro los datos de dibujo de las tipografías que usa. Eso garantiza que el archivo se vea exactamente igual en todas partes: es la razón de ser del formato.

El SVG normalmente no las incrusta. Un archivo SVG estándar dice font-family="Arial" y espera que esa tipografía esté en el sistema del lector. Si no está, el navegador recurre a una parecida.

La consecuencia es esta: cuando pasas a SVG el texto de un PDF como texto, existe la posibilidad de que el lector no tenga la tipografía original. Los anchos de letra cambian, las líneas se desbordan o se acortan y la alineación se rompe. En documentos que usan tipografías corporativas o comerciales eso es casi seguro.

Hay tres soluciones:

1. Convertir el texto a curvas. Cada letra pasa a ser un <path>. El aspecto queda garantizado, pero el texto deja de ser texto: no se puede seleccionar, ni buscar, los lectores de pantalla no lo leen y el archivo crece notablemente.

2. Incrustar la tipografía. Con @font-face de CSS puedes meter en el SVG los datos de la tipografía codificados en base64. Se conservan el aspecto y la accesibilidad, pero el archivo crece y puede que la licencia de la tipografía no lo permita.

3. Recurrir a una tipografía segura para web. Si se usa una tipografía habitual (Arial, Times New Roman), el riesgo es bajo.

En la práctica, para logotipos y gráficos se prefieren las curvas y, para contenido con mucho texto, la incrustación o el texto.

Cuarta divergencia: el espacio de color

El PDF admite CMYK de forma nativa. Al estar diseñado para la impresión, los colores se pueden definir con componentes cian, magenta, amarillo y negro. Además se pueden definir tintas planas (como Pantone) y perfiles de color ICC.

El SVG está basado en RGB. No existe el concepto de CMYK. Escribes fill="#RRGGBB" o fill="rgb(r,g,b)".

En la conversión, los valores CMYK se pasan a RGB y esa es una conversión con pérdidas. La gama (el rango de colores que puede abarcar) de los dos espacios es distinta; algunos colores CMYK no tienen equivalente exacto en RGB. Las diferencias más evidentes se ven en los rojos oscuros, los azules marinos, los naranjas y los negros ricos.

Si los colores corporativos tienen que coincidir exactamente, después de la conversión tendrás que corregir a mano los valores de color del SVG con los valores RGB de tu manual de marca.

Quinta divergencia: transparencia y efectos

El modelo de transparencia del PDF es bastante avanzado: transparencia alfa, modos de fusión (multiplicar, trama, superponer...), máscaras suaves y grupos de transparencia.

El SVG también tiene soporte de transparencia (opacity, fill-opacity, <mask>, <filter>), pero los modelos no coinciden exactamente. Algunos modos de fusión del PDF no tienen equivalente directo en SVG y ciertas estructuras de máscara suave se procesan de otra manera.

Resultado: en archivos de diseño con efectos de transparencia avanzados puede haber diferencias visuales tras la conversión. Con transparencia alfa simple no hay problemas.

Sexta divergencia: estructura y propósito

El PDF es multipágina y es un formato de documento. El árbol de páginas, los marcadores, los campos de formulario, las anotaciones, los metadatos y la firma digital pertenecen todos al concepto de documento.

El SVG es de una sola "página" y es un formato de gráfico. No existe el concepto de varias páginas. No tiene características de documento como marcadores, campos de formulario o anotaciones.

En la conversión, todo eso se pierde:

| Característica del PDF | En SVG | |---|---| | Estructura de páginas | Cada página, un archivo | | Marcadores | Se pierden | | Campos de formulario | Queda su aspecto, se va su función | | Anotaciones | Normalmente se pierden | | Hipervínculos | Algunos conversores los trasladan como <a> | | Metadatos | Se pierden | | Capas (OCG) | Normalmente se aplanan | | Firma digital | Se pierde |

A cambio, el SVG tiene capacidades que el PDF no tiene: estilos con CSS, interacción con JavaScript, animación SMIL o CSS y acceso programático a través del DOM.

Por qué las imprentas no quieren SVG

Por tres carencias:

No hay CMYK. La máquina de impresión trabaja con CMYK; un archivo RGB genera incertidumbre en la gestión de color.

No hay sangrado ni marcas de corte. En el PDF existen las cajas BleedBox y TrimBox; en SVG no hay un concepto así definido.

No hay gestión de perfiles de color. No se pueden incrustar perfiles ICC.

Por eso las imprentas piden PDF, y en especial los subperfiles PDF/X. El SVG está diseñado para la web y la pantalla; el PDF, para la impresión y el intercambio de documentos.

En resumen

PDF y SVG son dos formatos vectoriales derivados del mismo modelo de representación de PostScript y sus instrucciones de dibujo se corresponden en gran medida uno a uno, lo que explica por qué la conversión es tan fiable. Los puntos en los que divergen sí producen consecuencias prácticas: los sistemas de coordenadas están invertidos (el conversor lo compensa), el PDF incrusta las tipografías y el SVG normalmente no (de ahí la decisión entre texto y curvas), el PDF admite CMYK y el SVG se basa en RGB (desviación de color), y el PDF es un formato de documento mientras que el SVG es un gráfico de una sola página (se pierden los marcadores, los formularios y la estructura multipágina). La elección correcta de formato depende de adónde va la salida: SVG para la web y el diseño, PDF para la impresión y el intercambio de documentos.