Qué es de verdad una imagen vectorial
Ver la imagen vectorial como un programa de dibujo y no como una imagen, entender cuándo se convierte en píxeles y qué decisiones toma el rasterizador por ti.
Una imagen vectorial no contiene ninguna imagen. Contiene instrucciones: mueve el lápiz aquí, traza una curva hasta allá, cierra, rellena con este color. Solo cuando algo tiene que mostrarla se ejecutan esas instrucciones contra una rejilla concreta y aparecen píxeles. Entender que el vector es un programa y la rasterización su ejecución es lo que hace evidentes casi todas sus propiedades, incluidas las que parecen mágicas.
- Describir una imagen vectorial como una lista de primitivas geométricas con estilo.
- Explicar en qué momento exacto un vector se convierte en píxeles y quién decide cómo.
- Entender el papel del antialiasing y por qué el vector no es infinitamente nítido.
- Reconocer los límites reales del modelo vectorial, incluida su complejidad de rasterización.
El vector como programa
Toma la descripción de un triángulo relleno. En raster son tres mil píxeles con su color. En vector son cuatro instrucciones y un estilo:
mover a (10, 90)
linea a (50, 10)
linea a (90, 90)
cerrar
rellenar con #a6e3a1
Esa lista se puede escribir en el mini-lenguaje de SVG, en llamadas al contexto 2D del canvas, en PostScript o en un fichero de un programa de diseño. La sintaxis cambia; el modelo no. Y ese modelo tiene tres partes, siempre las mismas.
La geometría: una secuencia de puntos y curvas que define un contorno. Los tipos de curva que se usan en la práctica son las de Bézier cuadráticas y cúbicas, más arcos elípticos. No porque sean las únicas, sino porque son las que tienen buenas propiedades numéricas y se subdividen fácilmente.
El estilo: cómo se pinta esa geometría. Relleno con un color, un degradado o un patrón; trazo con un grosor, un remate y un tipo de unión; y las reglas que deciden qué está dentro cuando el contorno se cruza consigo mismo.
Las transformaciones: matrices afines que se aplican a la geometría antes de pintarla, y que permiten componer escenas sin tocar los puntos originales.
Con esas tres piezas se describe cualquier ilustración. La cuarta pieza —el orden— es implícita: las primitivas se pintan en el orden en que aparecen, y las posteriores tapan a las anteriores. No hay z-index en el modelo básico, hay orden de la lista.
La rasterización: donde el vector se convierte en imagen
El momento crítico es cuando algo necesita mostrar esa descripción. Un rasterizador recibe la geometría, la matriz de transformación y una rejilla de destino, y para cada píxel decide qué color le toca. El algoritmo básico se llama scanline: recorre la imagen fila a fila, calcula en qué puntos la fila corta el contorno, y rellena los tramos que estén dentro según la regla de relleno activa.
Ese algoritmo daría bordes escalonados, porque cada píxel estaría dentro o fuera. Lo que hace que un vector se vea bien es el antialiasing: en lugar de una decisión binaria, se calcula qué fracción del área del píxel queda cubierta por la forma y se mezcla el color en esa proporción. Un píxel cubierto al 30 % recibe el color de relleno con alfa 0,3.
De ahí sale una verdad que contradice el eslogan: un vector no es infinitamente nítido al rasterizarse, es infinitamente preciso antes de rasterizarse. La nitidez del resultado depende de la rejilla. Un borde diagonal a cualquier resolución tendrá píxeles parcialmente cubiertos; lo que gana el vector es que esa aproximación se recalcula a la resolución del destino en lugar de heredarse de una resolución anterior.
<canvas id="c" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
// La misma geometria a dos escalas: el rasterizador recalcula el antialiasing
function triangulo(escala) {
ctx.save();
ctx.scale(escala, escala);
ctx.beginPath();
ctx.moveTo(10, 90); ctx.lineTo(50, 10); ctx.lineTo(90, 90);
ctx.closePath();
ctx.fillStyle = '#a6e3a1';
ctx.fill();
ctx.restore();
}
triangulo(1);
ctx.translate(120, 0);
triangulo(2);
</script>
Los dos triángulos tienen bordes igual de suaves porque cada uno se rasterizó a su tamaño. Si en cambio hubieras dibujado el pequeño y luego lo hubieras ampliado con drawImage, el grande heredaría los píxeles del pequeño y se vería borroso. Esa es toda la diferencia entre vector y raster, condensada en dos líneas.
La intuición de que “el vector es más ligero” es cierta en disco y engañosa en tiempo de ejecución. Un fichero SVG de doce kilobytes puede tumbar el hilo principal si esos doce kilobytes son un trazado con cuarenta mil puntos, porque rasterizarlo obliga a resolver cuarenta mil intersecciones por cada fila de la imagen. Y esto pasa constantemente: los mapas exportados desde herramientas geográficas, las ilustraciones vectorizadas automáticamente a partir de una foto y los gráficos generados desde datos reales producen trazados de una densidad absurda. El síntoma es característico: el fichero es pequeño, la imagen se ve bien, pero cualquier cosa que obligue a rerasterizarla —un cambio de tamaño, una animación, un zoom— produce un tirón. Y a diferencia del raster, cuyo coste de pintado es constante y predecible, el del vector escala con el número de segmentos y con el área cubierta. La regla operativa es simple y casi nadie la aplica: cuando importes un SVG que no has dibujado tú, mira cuántos puntos tiene la d antes de meterlo en producción. Si la cadena ocupa más de unos pocos miles de caracteres, simplifícala o conviértela en raster; ninguna de las dos cosas le duele a nadie y las dos evitan un problema que después es dificilísimo de diagnosticar.
Lo que el modelo vectorial no puede hacer bien
El vector tiene un dominio de aplicación, y fuera de él degenera.
Las fotografías. Una fotografía es información sin estructura geométrica: cada píxel es una muestra independiente de una escena continua. Vectorizarla obliga a aproximarla con miles de regiones de color plano, lo que produce un fichero enorme, un resultado peor y un coste de rasterización disparatado. Los trazadores automáticos existen y sirven para estilizar, no para reproducir.
Las texturas y el ruido. Cualquier detalle de alta frecuencia sin repetición —una superficie rugosa, grano de película, agua— es antivectorial por naturaleza. Se puede simular con filtros procedurales, que es lo que hacen las primitivas de turbulencia de SVG, pero el resultado se rasteriza igual y el coste es alto.
Los efectos por píxel. Desenfoques grandes, mezclas complejas, distorsiones. El modelo vectorial los soporta a través de un pipeline de filtros, pero ese pipeline internamente rasteriza, aplica el efecto sobre píxeles y devuelve el resultado. Es decir: por debajo deja de ser vectorial.
La frontera se cruza en un solo sentido
La asimetría más importante del par raster-vector es que la conversión es fácil en una dirección e imposible en la otra. Rasterizar un vector es un algoritmo determinista y bien definido: siempre puedes producir el raster. Vectorizar un raster es un problema mal planteado: hay infinitas descripciones geométricas que producen la misma rejilla de píxeles, y elegir una implica inventar información que no estaba.
Eso tiene una consecuencia práctica en cualquier pipeline de trabajo: conserva siempre el vector como origen. En cuanto exportas a PNG y tiras el original, has perdido la posibilidad de cambiar el tamaño, el color, la forma o el formato sin recomenzar. Es la misma lógica que conservar el código fuente en lugar del binario, y por la misma razón: el vector es el código y el raster es la compilación.
Dentro del canvas esa asimetría aparece cada vez que decides mantener una escena. Si guardas la geometría —las posiciones, los radios, los colores— puedes redibujar a cualquier escala, exportar a SVG, hacer hit testing exacto y deshacer cambios. Si solo guardas el búfer, tienes una foto. Esa decisión, tomada el primer día de un proyecto, condiciona todo lo que se puede hacer el resto de su vida.