Ráster y vector son dos maneras distintas de describir una imagen
Un PNG, JPG, WebP o GIF es una imagen ráster: una rejilla de píxeles de color con un ancho y un alto fijos. Si la amplías, los píxeles se convierten en cuadrados visibles o se emborronan; no hay más información que la rejilla. Un SVG es un vector: un documento de texto que describe formas — trazados, curvas, rellenos — mediante coordenadas. El motor de renderizado vuelve a dibujar esas formas al tamaño que pidas, de modo que un logo vectorial se imprime nítido en una tarjeta de visita y en el rótulo de una tienda, y su tamaño de archivo depende de cuántas formas contiene, no de lo grande que se dibuje. Convertir un ráster en vector significa inferir formas que nunca se guardaron; por eso al proceso se le llama trazado o vectorización, y por eso la imagen de origen importa tanto.
La cadena de procesado que ejecuta este convertidor
Todo lo que sigue ocurre en tu navegador después de decodificar la imagen y, si hace falta, reducirla para que su lado mayor no supere los 1.024 píxeles. El SVG conserva las dimensiones originales en píxeles como width y height, de modo que encaja en una maquetación con el mismo tamaño que la fuente.
- 1. Aplanar la transparencia. Los píxeles de un PNG transparente se componen sobre blanco; los totalmente transparentes pasan a ser blanco puro. Así, un logo con fondo transparente obtiene un único color de fondo limpio y descartable en lugar de un halo de mezclas semitransparentes.
- 2. Reducir a una paleta. En modo color, la agrupación k-means con inicialización k-means++ reparte los píxeles en N grupos dentro del espacio de color CIELAB, de forma que "parecido" significa parecido para el ojo y no en valores RGB crudos. El generador aleatorio lleva semilla fija, y por eso el resultado es determinista. Con "Auto" seleccionado, la herramienta prueba cantidades candidatas de 2 a 16 y escoge el codo de la curva de varianza intra-grupo — el punto donde añadir otro color deja de aportar fidelidad. El modo escala de grises omite la agrupación y ajusta cada píxel al escalón más cercano de una rampa uniforme de N grises. El modo blanco y negro compara la luminancia de cada píxel con tu umbral y lo etiqueta como oscuro o claro.
- 3. Fusionar y limpiar. En modo color, las entradas de paleta adyacentes con un ΔE inferior a 4 se fusionan, porque dos rellenos que difieren menos de lo que el ojo distingue solo añaden trazados. Después la herramienta busca las regiones conexas de cada color y fusiona toda región menor que el tamaño mínimo de región con una vecina, preferiblemente de color similar. Esto es lo que elimina el ruido de compresión JPEG, el polvo de un escaneo y el halo de un píxel alrededor de las letras.
- 4. Trazar las fronteras. Cada arista unitaria de la rejilla de píxeles donde dos regiones difieren es una arista de frontera. Las aristas se encadenan en arcos entre los puntos donde coinciden tres o más regiones, y cada arco se simplifica con el algoritmo de Douglas–Peucker exactamente una vez para compartirlo tal cual entre las dos regiones que separa. Ese detalle es la razón de que los rellenos vecinos del resultado sean estancos: nunca se simplificaron por separado. Los vértices suaves se redondean en curvas Bézier cuadráticas y las esquinas marcadas se conservan como esquinas. El deslizador de suavizado corresponde a la tolerancia de Douglas–Peucker, de 0,5 px (mantiene casi intacta la escalera de píxeles) a 4 px (muy suave; los detalles pequeños pueden redondearse).
- 5. Generar el SVG. Cada región se convierte en un
<path> con fill-rule="evenodd", así que un anillo o una letra "O" es un solo trazado con un agujero. Los trazados se agrupan por color en elementos <g fill>, con las regiones grandes primero, de modo que el orden de dibujo es estable y un editor vectorial muestra un grupo por color. Cuando el fondo no es transparente, se pinta primero un rectángulo del color dominante para que las costuras del antialiasing nunca dejen ver la página de detrás. Se escriben como máximo 5.000 trazados; si la imagen necesitara más, se descartan las regiones más pequeñas y el panel de estadísticas lo indica.
Qué cambia realmente cada control
- Colores fija el número de grupos k-means (o de niveles de gris). Menos colores implican menos regiones, menos trazados, archivos más pequeños y un aspecto más de cartel. Un logo de tres colores trazado con 16 no gana fidelidad: gana colores de antialiasing que no querías. Empieza en Auto y luego baja, no subas.
- Suavizado es una distancia en píxeles. Los valores bajos convienen al pixel art o cuando la fuente ya es nítida; los altos, a dibujos escaneados y logos comprimidos en JPEG donde el "detalle" es en realidad ruido.
- Tamaño mínimo de región es un área en píxeles. Súbelo hasta que desaparezcan las motas, pero para antes de que se pierda el punto de una "i" o el ojo de una "e"; el tirador de comparación de la vista previa está precisamente para esa comprobación.
- Umbral (solo blanco y negro) es el corte de luminancia de 0 a 255. Bájalo para engrosar líneas de lápiz tenues; súbelo para eliminar la textura del papel y las sombras.
- Fondo transparente descarta el color de paleta que domina el borde de la imagen, pero solo cuando ese color cubre al menos el 30 % del borde. Un logo encuadrado en blanco sobre un fondo abigarrado no se detectará: recorta primero.
Cuándo funciona el trazado y cuándo no
El trazado por regiones premia a las imágenes que fueron vectores alguna vez o que se dibujaron con formas planas: logos, iconos, pictogramas, ilustraciones planas, pegatinas, sellos, siluetas y dibujos lineales escaneados. También maneja bien el pixel art de bloques grandes y las capturas de diagramas sencillos. Y, con franqueza, no es la herramienta adecuada para fotografías, degradados suaves, sombras, resplandores ni texto pequeño. Una fotografía trazada con ocho colores se convierte en un cartel posterizado de colores planos: a veces atractivo, nunca una foto. Un degradado se convierte en bandas visibles. El texto por debajo de unos 20 px en el ráster de trabajo pierde sus ojos interiores y se convierte en manchas; si las palabras importan, vuelve a escribirlas en el editor vectorial sobre las formas trazadas.
Trazado automático frente a las alternativas
| Aspecto | Esta herramienta (navegador) | Redibujar a mano en un editor vectorial | Función de autotrazado de escritorio |
|---|
| Privacidad | La imagen nunca sale del dispositivo | Local | Local (algunos trazadores en la nube suben el archivo) |
| Tiempo | Segundos | De minutos a horas | De segundos a minutos |
| Fidelidad a la fuente | Sigue los píxeles; los defectos también se trazan | Tan buena como el dibujante | Sigue los píxeles, con más presets |
| Geometría limpia (círculos perfectos, trazos exactos) | No: curvas aproximadas | Sí | No: curvas aproximadas |
| Control del color | 2–32 colores o Auto, tres modos | Ilimitado | Depende del producto |
| Software necesario | Un navegador | Editor vectorial y destreza | Aplicación de escritorio instalada |
| Ideal para | Logos, iconos, arte plano, escaneos, archivos de corte | Logos críticos de marca, tipografía | Trabajo por lotes dentro de un flujo existente |
Cuándo NO usar esta herramienta
- Necesitas un logo geométricamente perfecto para un manual de marca: trázalo aquí como base y redibuja después las formas clave encima.
- La imagen es una fotografía y quieres que siga pareciendo una fotografía. Usa un compresor o un conversor de formato de imagen.
- El motivo depende de degradados, sombras o efectos de transparencia; los rellenos planos no pueden representarlos.
- El contenido importante es texto pequeño; vuelve a escribirlo en un editor vectorial con la tipografía real.
- Ya tienes el archivo vectorial original (AI, EPS, PDF, SVG). Volver a convertir una exportación ráster siempre es peor que la fuente.
SVG para máquinas de corte y bordado
Los plóteres de vinilo y las máquinas de corte de manualidades siguen los contornos de los trazados rellenos, así que un buen archivo de corte tiene pocos colores, formas cerradas y ningún rectángulo de fondo. Elige blanco y negro o entre dos y cuatro colores, sube el tamaño mínimo de región para que ninguna mota se convierta en un corte diminuto, activa el fondo transparente para que no se trace el borde de la hoja y revisa el número de trazados: cada trazado es una forma que la máquina cortará. Como cada color va agrupado en su propio <g>, la mayoría de programas de corte tratan cada color como una capa, lo que se corresponde con una lámina de vinilo por color.
Herramientas de foto a arte relacionadas
El mismo motor de regiones impulsa nuestro generador de páginas para colorear, que conserva solo los contornos, el generador de pintar por números, que numera cada región según una paleta, y el generador de pixel art, que cuantifica sobre una rejilla gruesa en lugar de trazar. Usa la salida que necesite tu proyecto: en ninguna de ellas los píxeles salen de tu navegador.
