¿Qué motor de vectorización deberías usar? Una guía de los cuatro modos de SVGSnap
Trazar, bosquejar, trazos o píxeles: SVGSnap tiene cuatro motores de vectorización, cada uno optimizado para un tipo diferente de imagen. Aquí te explicamos cómo elegir el correcto.
Un amigo me envió un mensaje la semana pasada con una captura de pantalla de la pantalla de carga y una sola pregunta: "¿Por qué hay cuatro botones aquí? ¿Cuál se supone que debo elegir?" Buena pregunta. Los valores predeterminados funcionan la mayoría de las veces, pero si alguna vez te has preguntado qué hacen los otros tres, este es el artículo.
SVGSnap incluye cuatro motores de vectorización. Cada uno está construido para un tipo diferente de imagen, y elegir el equivocado es la razón principal por la que una conversión se ve peor de lo que esperabas.
Por qué cuatro motores en lugar de uno
La primera versión de este sitio se lanzó con un trazador, vtracer. Es excelente para ilustraciones en color, logotipos y la mayoría del arte derivado de fotos. Pero "la mayoría" deja muchos casos sin cubrir.
Un bosquejo a lápiz trazado como una región de color produce dos contornos para cada línea, uno para cada lado del trazo del bolígrafo, lo que duplica el tamaño del archivo y se ve como visión doble cuando lo recoloreas. Un sprite de pixel art trazado con curvas pierde todo el sentido de ser pixel art. Una firma trazada con regiones se convierte en una mancha gorda en lugar de un solo trazo editable. Problemas diferentes, matemáticas diferentes.
Así que el procesador creció. Hoy hay cuatro motores y cada uno está construido alrededor de un tipo específico de imagen.
Ilustración: el trazador multiusos
Esta es la opción predeterminada. Internamente es vtracer, un trazador de regiones de Rust que lee la imagen, agrupa píxeles cercanos por color y dibuja curvas Bezier alrededor de los bordes de cada grupo. Úsalo para cualquier cosa con color: logotipos, iconos, ilustraciones, retratos vectoriales, capturas de pantalla de interfaces, fotos trazadas.
Las tres configuraciones que puedes ajustar son modo de color, nivel de detalle y suavizado.
Modo de color controla la paleta. Color completo preserva los gradientes (correcto para ilustraciones) pero produce archivos más grandes. Limitado o blanco y negro fuerza formas planas, que es lo que quieres para logotipos y serigrafía.
Nivel de detalle decide qué tan agresivamente simplifica el trazador. Bajo te da menos trazos y curvas más limpias a costa del detalle fino. Alto preserva cada arruga de la fuente, incluyendo el ruido. Para un logotipo plano, bájalo. Para una acuarela, súbelo.
Suavizado se mapea al umbral de esquinas de vtracer. Valores más altos redondean las esquinas; valores más bajos mantienen los ángulos agudos. Si tu marca geométrica parece un animal de globos después de la conversión, tu suavizado está demasiado alto.
Usa el motor de Ilustración primero. Si el resultado se ve peor que la fuente por una razón que no es 'muy pocos colores', el problema probablemente es que deberías estar usando un motor completamente diferente.
Bosquejo: tinta negra sobre papel blanco
Detrás del botón Bosquejo está potrace, el mismo trazador que Inkscape y cientos de otras herramientas han usado durante dos décadas. Es la implementación de referencia para una entrada específica: un mapa de bits en blanco y negro. Lápiz sobre papel. Dibujos a tinta. Flash de tatuaje. Una firma escaneada. Marionetas de sombras. Cualquier cosa que se reduzca a marcas oscuras sobre un fondo claro.
No tomará color de la fuente, incluso si lo hay, porque lo primero que hace es umbralizar la imagen a 1 bit puro. Los píxeles más oscuros que el umbral se convierten en primer plano; todo lo demás se convierte en fondo. El trazador luego dibuja contornos Bezier limpios alrededor de las regiones del primer plano.
Las tres perillas son umbral, mota y suavizado.
Umbral es la línea entre "este píxel es parte del dibujo" y "esto es papel". Súbelo si el escáner captó demasiado grano del papel. Bájalo si los trazos de lápiz claros están desapareciendo.
Mota es el --turdsize de potrace (sí, en serio). Elimina regiones conectadas más pequeñas que el valor. Una mota de 2 mantiene el punto en cada i; una mota de 10 se comerá tu puntuación. Comienza en 2 a 4.
Suavizado se mapea al alphamax de potrace, que controla qué tan dispuesto está el trazador a redondear esquinas. Las líneas de bolígrafo y lápiz son ligeramente temblorosas incluso cuando dibujas cuidadosamente, y un suavizado más alto convierte el temblor en curvas limpias. Para un logotipo entintado con ángulos agudos, bájalo.
Si tienes un bosquejo real en papel y quieres un tutorial más profundo, escribí un artículo separado sobre vectorizar bosquejos a lápiz y dibujos escaneados que cubre cómo escanear bien en primer lugar.
Trazos: vectores editables de línea única
El tercer botón dice Trazos. Internamente es el motor de línea central, y hace algo completamente diferente de los dos primeros.
Trazar y Bosquejo ambos delinean líneas. Si dibujas una línea negra de 4 píxeles de ancho y ejecutas cualquiera de ellos, obtienes un vector con dos trazos paralelos, uno para cada lado del trazo, y un relleno en el medio. El resultado se ve bien pero no puedes "engrosar" la línea porque no hay línea que engrosar. Solo hay un rectángulo delgado relleno.
El modo Trazos esqueletiza la imagen primero. La línea de 4 píxeles de ancho se convierte en una espina de 1 píxel de ancho, y el motor dibuja un solo <path> SVG con estilo de trazo a lo largo de esa espina. Ahora el trazado tiene un atributo real de stroke-width. Puedes cambiarlo de 2 a 8 en cualquier editor vectorial y la línea se vuelve más gruesa. Puedes recolorearlo cambiando el atributo stroke. Puedes animarlo como un efecto de dibujo.
Este es el motor que quieres para arte dibujado a mano que planeas editar. Flash de tatuaje que recolorearás en Illustrator. Una firma que quieres animar. Un bosquejo botánico que necesita enviarse en tres pesos de trazo diferentes sin volver a trazar.
Las configuraciones son umbral (misma idea que Bosquejo), ancho de trazo y color de trazo. La salida también pasa por simplificación Ramer-Douglas-Peucker, que es una forma elegante de decir "eliminar puntos redundantes". Si tus trazos se ven entrecortados, la simplificación fue demasiado agresiva. Si se ven ruidosos, no fue lo suficientemente agresiva.
Píxel: vector 1:1 para sprites e iconos
El cuarto motor es el más dogmático. Existe porque el trazado de curvas destruye el pixel art.
Si trazas un sprite de 32x32 con vtracer, el trazador promedia píxeles adyacentes de color similar, ajusta curvas al resultado, y los bordes de píxeles nítidos se convierten en manchas Bezier suaves. Tu icono de espada ahora parece un fideo mojado.
El modo Píxel toma el otro camino. Cada secuencia contigua de píxeles del mismo color se convierte en un <rect> alineado al eje con shape-rendering="crispEdges". Dos pasadas de codificación de longitud de ejecución (una horizontal, una vertical) fusionan secuencias que son idénticas a través de filas para que no termines con un rectángulo por píxel. El resultado es un vector real. Cada píxel es una forma editable, y escala sin perder el carácter pixelado que lo hizo pixel art en primer lugar.
Está limitado a 2048 píxeles por lado. El pixel art es pequeño por definición, y quitarle el límite significa que una captura de pantalla 4K se convierte en un SVG de 200MB.
La única configuración es tamaño de paleta. Si tu entrada tiene más colores únicos que el objetivo (predeterminado 256), el motor los cuantifica hacia abajo con corte mediano. Esto es lo que te permite alimentar una pintura digital y obtener una salida limpia de estilo pixel-art en lugar de un fallo. Bájalo a 16 o 32 para looks retro chunky; manténlo en 256 para sprites precisos.
El modo Píxel rechaza imágenes de gran tamaño a propósito. Sube una captura de pantalla de 4000 píxeles de ancho con Píxel seleccionado y obtendrás un error diciéndote que uses Ilustración en su lugar. El motor de Ilustración es lo que quieres para capturas de pantalla.
Cómo elegir, en 30 segundos
Si no estás seguro de qué motor usar, aquí tienes un árbol de decisión que puedes ejecutar en tu cabeza.
¿La fuente tiene color que quieres mantener? Usa Ilustración. Esto es cierto para casi todos los logotipos, todos los iconos, todas las ilustraciones. Predeterminado primero, luego ajusta el modo de color y nivel de detalle si la primera pasada no está bien.
¿Es la fuente un dibujo en blanco y negro sobre blanco? Bosquejo. Salida más limpia que Ilustración en la misma entrada, siempre.
¿Es un dibujo lineal que planeas editar, recolorear o animar los trazos? Trazos. La salida te da trazados reales con atributos de trazo que puedes cambiar en Illustrator, Figma, o directamente en el archivo SVG.
¿Es pixel art, un sprite pequeño, o un icono menor a 256x256? Píxel. Cualquier otra cosa con ese motor se verá mal o alcanzará el límite de tamaño.
La mayoría de las veces la respuesta es Ilustración. Los otros tres existen para los casos donde Ilustración es técnicamente un trazador pero no el trazador correcto.
Errores que he visto cometer a la gente
Ejecutar Bosquejo en un logotipo colorido. El paso de umbral descarta el color. Obtienes una silueta negra de tu logotipo y te preguntas dónde fue el color de la marca. Ejecuta Ilustración en un logotipo colorido. Bosquejo es solo para fuentes en blanco y negro.
Ejecutar Píxel en una fotografía. O el límite de tamaño lo rechaza (bueno) o la cuantización de paleta se ejecuta y te da una versión posterizada que puede o no ser lo que querías. Si quieres un vector real de una foto, usa Ilustración con alto detalle. Si quieres el look posterizado a propósito, para eso es la cuantización de Píxel.
Ejecutar Ilustración en un bosquejo dibujado a mano. Obtendrás un resultado utilizable. También obtendrás líneas con doble contorno, ruido de grano de papel horneado en formas, y un archivo el doble de grande de lo necesario. Bosquejo maneja esa entrada en una pasada.
Esperar que Trazos maneje regiones rellenas. El paso de esqueletización asume líneas delgadas. Aliméntalo con un cuadrado negro sólido y se esqueletiza a un solo punto en el medio. Usa Trazos para arte lineal, no para rellenos.
El motor correcto es el que coincide con lo que dibujaste, no el que tiene más configuraciones.
— SVGSnap Team
Cuando quieres combinar
Un flujo de trabajo que vale la pena mencionar: si tu fuente es un bosquejo o icono de baja resolución, pásalo por el ampliador de imágenes a 2x o 4x primero, luego convierte. Cada motor funciona mejor con más píxeles para leer. He visto el mismo escaneo ir de "apenas utilizable" a "perfecto" con un paso de ampliación en el medio.
También puedes remover el fondo antes de convertir si tu fuente tiene ruido, un telón de fondo colorido, o textura de papel. Una entrada más limpia te da un vector más limpio, independientemente del motor que elijas.
Si quieres un vistazo más cercano a un caso de uso específico, hay tutoriales para vectorizar logotipos para impresión y mercancía y para vectorizar dibujos escaneados que profundizan en el lado de las configuraciones.
El convertidor en sí está en svgsnap.com. El selector de motor es la fila de cuatro botones debajo de la vista previa del archivo. Elige uno, presiona convertir, ve cómo se ve. Si la salida está mal, cambia el motor, no las configuraciones. Esa es usualmente la solución más rápida.