Referencia · 7 min de lectura
Mapa de bits o vector: qué puede y qué no puede hacer la vectorización de imágenes
Un mapa de bits es una cuadrícula de puntos de colores. Un vector es una lista de formas. Vectorizar es el arte de adivinar las formas a partir de los puntos, algo que funciona de maravilla con unas imágenes y solo de forma aproximada con otras. Te explicamos por qué.
01 · Dos tipos de imagen
Puntos frente a formas
La misma imagen, dos descripciones completamente distintas.
Una imagen raster (o de mapa de bits), como PNG, JPG, GIF, WebP o BMP, una foto o una captura de pantalla, es un rectángulo de píxeles, cada uno de un color. Un logotipo de 1000 × 1000 son un millón de números. En el archivo no hay círculos ni letras, solo puntos que a ese tamaño se parecen a círculos y letras. Si lo amplías, los puntos se hacen más grandes; el programa puede difuminar entre ellos, pero no puede saber dónde se suponía que estaba el borde.
Una imagen vectorial (SVG, EPS, PDF, AI) guarda las propias formas: «un círculo de radio 40 en (100, 100), relleno de azul» o, en general, una ruta de líneas rectas y curvas de Bézier. No tiene resolución. Un logotipo vectorial se dibuja igual en un favicon de 16 píxeles que en una lona de 10 metros, y un logotipo que pesa 200 KB como PNG a menudo pesa 5 KB como SVG.
| Mapa de bits (PNG, JPG…) | Vector (SVG…) | |
|---|---|---|
| Está hecho de | Una cuadrícula de píxeles | Líneas, curvas y rellenos |
| Al ampliar | Se vuelve borroso o pixelado | Sigue nítido a cualquier tamaño |
| Ideal para | Fotos, texturas, capturas de pantalla | Logotipos, iconos, tipografía, diagramas, archivos de corte |
| Edición | Píxel a píxel | Mover un punto, cambiar un relleno |
| Tamaño de archivo | Crece con la resolución | Crece con la complejidad |
¿Comparas dos formatos concretos? La guía PNG vs SVG trata el tamaño de archivo, la compatibilidad con navegadores y cuándo elegir cada uno.
02 · Cómo funciona la vectorización
De los píxeles de vuelta a las formas
Vectorizar invierte el proceso. AnyToSVG lo hace en cinco pasos, todos en tu equipo:
- Encuentra las regiones con sombreado suave. Los píxeles que difieren solo ligeramente de todos sus vecinos se agrupan en regiones; a cada región grande se le ajusta un modelo de color lineal o radial y, si el modelo la explica bien, la región pasa a ser una sola forma con un relleno de degradado SVG.
- Agrupa por color los píxeles restantes. Los colores dominantes forman una paleta de 2 a 32 entradas y cada píxel se asigna a la más cercana. Los píxeles de borde suavizado, que son mezclas, se limpian para que no se conviertan en un color fino propio.
- Crea una máscara por relleno: una imagen en blanco y negro de «dónde está este color (o degradado)».
- Vectoriza cada máscara con Potrace, que recorre el contorno de cada mancha, decide qué esquinas son esquinas de verdad y ajusta curvas de Bézier suaves al resto.
- Apila las rutas desde la zona más grande hacia arriba en un SVG, con una
<path>por relleno.
Fíjate en lo que el algoritmo nunca hace: no reconoce una letra «A» ni un rostro. Ve manchas, contornos y rampas suaves de color. Por eso es excelente con una clase de imágenes y solo aceptable con otra.
03 · Colores de transición
Adónde va el sombreado: a degradados, no a bandas
El paso que se saltan la mayoría de los vectorizadores y la razón por la que sus cielos salen rayados.
Un vectorizador que empieza reduciendo la imagen a colores planos ya ha perdido todas las transiciones suaves. Un cielo, un brillo sobre una esfera, el sombreado de una franja de globo: cada uno se convierte en una escalera de dos, cuatro u ocho bandas planas con bordes duros entre ellas, y cuantos más colores permites, más bandas y más pesado el archivo.
AnyToSVG ejecuta un paso extra antes de la cuantización de color. Los píxeles que difieren solo ligeramente de sus cuatro vecinos se agrupan en regiones suaves (los bordes suavizados actúan como muros, así que una región nunca se mezcla con la forma contigua). A cada región grande se le ajusta entonces un modelo de color: uno lineal (una dirección de cambio con paradas de color a lo largo de ella) o uno radial (un centro con paradas según la distancia). Si el modelo explica bien los píxeles, toda la región se vectoriza como una sola forma y se rellena con un <linearGradient> o <radialGradient> real. El sombreado que se curva alrededor de una forma, que ningún degradado unidimensional puede seguir, se divide en unas pocas piezas, cada una con su propio degradado, a lo largo de uniones donde los modelos vecinos coinciden.
Lo que sigue convirtiéndose en bandas: el sombreado que sigue una forma complicada, varias sombras suaves superpuestas o la textura fotográfica. Esas regiones no superan la prueba del modelo y vuelven a colores planos, donde toma el relevo el control del número de colores.
04 · Se vectoriza de maravilla
Imágenes hechas de formas planas
- Logotipos y logotipos tipográficos: el caso clásico. Pocos colores y bordes nítidos: el SVG es prácticamente la ilustración original.
- Iconos y clipart con rellenos sólidos.
- Dibujos de línea, bocetos, firmas y sellos en modo Blanco y negro: una ruta y unos pocos kilobytes.
- Rotulación y caligrafía: las curvas salen suaves; solo la tipografía muy pequeña puede fusionarse.
- Siluetas, plantillas y archivos de corte para cortadoras de vinilo y láser.
- Mapas, diagramas y organigramas de colores planos (el texto serán formas, no tipografía editable).
05 · Se vectoriza de forma aproximada
Imágenes hechas de tonos
- Las fotografías se convierten en carteles: de 8 a 32 colores planos con bordes duros entre ellos. Llamativo como ilustración o separación de serigrafía; inútil para «ampliar».
- El sombreado complejo (varias sombras suaves superpuestas o un degradado que rodea una forma intrincada) solo se captura en parte: lo que encaja en un degradado lineal o radial (o en unas pocas piezas de ellos) se convierte en uno, y el resto pasa a bandas planas. Los cielos, brillos, franjas sombreadas y esferas salen intactos, como se ha visto arriba.
- Los JPG muy comprimidos arrastran ruido de bloques que el vectorizador contornea fielmente. Reducir ruido antes y un tamaño de mota mayor ayudan; un origen mejor ayuda más.
- Las imágenes diminutas (menos de 200 px) tienen muy pocos píxeles para definir una curva; las esquinas salen redondeadas y los detalles se fusionan.
- El texto que necesitas editar: las letras serán formas perfectas, pero no una fuente. Vuelve a escribirlo en tu editor usando el resultado como guía.
06 · ¿Vectorizar o redibujar?
Una regla rápida para decidir
Vectorizar copia lo que hay. Redibujar crea lo que debería haber.
Vectoriza cuando el mapa de bits es una representación fiel de un diseño que ya era plano desde el principio: estás recuperando un vector que existió. Diez segundos y listo.
Vectoriza y luego retoca cuando el origen es algo tosco: un logotipo de una web a 300 px, una firma escaneada, un boceto fotografiado. La vectorización te da el 90 % y un editor vectorial te da el resto: borrar una forma suelta, enderezar una línea, encajar una esquina.
Redibuja cuando el mapa de bits es una foto del objeto y no el objeto: un logotipo en un rótulo de tienda, una tarjeta de visita bajo una lámpara, un parche bordado. Ahí los píxeles contienen perspectiva, iluminación y textura que ningún vectorizador debería reproducir, y lo mejor es usar el resultado como plantilla bajo tu propio dibujo.
En los tres casos la vista previa te dice en cuál estás antes de descargar nada, que es más o menos para lo que sirve.
Sigue leyendo
Más sobre vectores
Pruébalo mientras lees
El convertidor es gratuito, no pide cuenta y muestra el SVG junto a tu original en aproximadamente un segundo.