Cómo vectorizar un ícono

El antialiasing es el enemigo aquí. En un ícono de 32 píxeles, los píxeles grises suaves a lo largo de cada diagonal son una fracción grande de la imagen, y un trazador no tiene forma de saber que se suponía que eran un borde duro y no un tono intermedio real. Dale una versión de 512 píxeles y el mismo borde es una transición de un píxel contra cuarenta y nueve píxeles limpios — la forma es inconfundible.

Si el ícono es monocromo, hazlo genuinamente monocromo antes de convertir: negro puro sobre transparencia, o negro puro sobre blanco, sin sombra suave y sin resplandor interior sutil. Cada uno de esos efectos se convierte en formas en la salida, y las formas en la salida son nodos que tienes que encontrar y borrar.

Al tamaño al que lo estás viendo, casi cualquier trazado se ve bien. La prueba que importa es la cantidad de nodos: abre el trazado y cuenta los puntos. Un ícono bien dibujado tiene puntos solo donde la curva realmente cambia de dirección — un cuadrado redondeado tiene ocho, un círculo tiene cuatro, un chevrón tiene tres o seis. Si una forma simple regresó con sesenta, el trazador estaba persiguiendo ruido de píxeles, y esa forma se renderizará lento, se editará mal y se verá sutilmente mal al escalar.

En Lite y superiores, el control de detalles es lo que gobierna esto directamente: menos detalles fusiona con más agresividad y produce nodos más limpios y en menor cantidad. Bájalo hasta que las esquinas apenas empiecen a suavizarse y luego sube un paso. En Free el nivel se elige automáticamente, y la manera de influir en él es la calidad del origen.

Los sets de íconos tienen una cuadrícula — normalmente 24×24 con un margen de seguridad de dos píxeles, o 16×16 para interfaces densas. El trazado resultante aterriza donde estaban los píxeles, lo cual es cercano a esa cuadrícula pero no sobre ella, y a tamaños de renderizado pequeños, “cercano” es lo que hace que un ícono de una fila se vea medio píxel más pesado que sus vecinos.

Ajusta los trazados terminados a coordenadas enteras en tu editor y pon el viewBox del SVG en tu cuadrícula. Es engorroso la primera vez y mecánico después, y es lo que separa un set de íconos que se ve diseñado de uno que se ve convertido.

Si estás rehaciendo un set completo, conviértelos todos en un solo lote para que pasen por la misma configuración, y luego normaliza a mano el grosor de trazo en todo el set. Una familia de íconos se lee como familia porque sus trazos coinciden; un set trazado individualmente a lo largo de varias sesiones no va a coincidir, y la discrepancia se nota aunque ningún ícono individual se vea mal.

La conversión por lotes empieza en Pro, que toma 30 archivos a la vez. Por debajo de eso los archivos se convierten de uno en uno, lo que para un set de veinte son unos minutos de clics y no un impedimento.