AnyToSVG

Acerca de

El vectorizador sin asistente

AnyToSVG convierte mapas de bits en SVG con la misma familia de algoritmos que usan los servicios online más conocidos, pero los ejecuta dentro de tu navegador, te muestra el resultado antes de que toques un ajuste y nunca te pide que inicies sesión.

Por qué

Por qué lo creé

Una nota del desarrollador de AnyToSVG e IconEditor.org.

Llevo casi treinta años desarrollando software, y una cantidad sorprendente de ese tiempo se ha ido en una tarea pequeña y aburrida: conseguir que el logotipo de alguien esté en un formato que se pueda escalar. Un cliente manda un PNG, la imprenta quiere un SVG y el convertidor online al que acudo me recibe con una cola de subida, un selector de modelo, tres paletas candidatas, un panel de calidad, un panel de agrupación de colores y, cuando por fin la vista previa se ve bien, un formulario de inicio de sesión y un contador de créditos.

Lo curioso es que la vectorización en sí no es lenta ni secreta. El algoritmo central, Potrace, es público desde 2003 y vectoriza un mapa de bits del tamaño de un logotipo en unos pocos milisegundos. El asistente de cuatro pasos no está ahí porque las matemáticas lo necesiten. Está ahí porque la imagen tiene que viajar a un servidor, procesarse allí y contabilizarse el resultado.

Los navegadores modernos lo cambiaron. Potrace se compila a WebAssembly y se ejecuta a velocidad nativa en tu propio equipo, y el análisis de color que lo rodea es JavaScript corriente. Así que AnyToSVG hace todo el trabajo en local: en cuanto se suelta una imagen, se analiza, se eligen ajustes razonables, se vectoriza cada color y el SVG aparece junto al original. No se sube nada, no se cuenta nada y cada control vuelve a vectorizar al instante porque no hay ida y vuelta.

Es la misma filosofía que IconEditor.org, mi editor de iconos para Windows: tomar una tarea que la gente hace constantemente, quedarse con lo que es realmente bueno y quitar todo lo que solo existe para justificar una suscripción.

La página de AnyToSVG con un logotipo cargado: ajustes a la izquierda, vista previa comparativa en el centro y el panel de resultado y descarga debajo
El convertidor tras soltar un logotipo: seis colores detectados, vectorizado en una décima de segundo y listo para descargar.

Cómo funciona

Qué pasa cuando sueltas una imagen

1 · Análisis

Un histograma de color de la imagen decide si es una ilustración plana, un dibujo de líneas o algo parecido a una foto, cuántos colores distintos contiene en realidad y dónde debe situarse el umbral de blanco y negro (método de Otsu).

2 · Primero degradados, luego colores

Las regiones cuyo color cambia suavemente se ajustan con un modelo lineal o radial y pasan a ser una sola forma con un degradado SVG real. Los píxeles restantes se cuantizan: los colores dominantes forman la paleta, después se añaden las regiones pequeñas pero distintas y se limpian los halos de suavizado de bordes entre regiones.

3 · Capas

Los rellenos se apilan desde la zona más grande hacia arriba y cada forma llega un píxel por debajo de sus vecinas superiores, así que no hay huecos finos entre formas contiguas: una versión más ligera del truco que los servicios comerciales llaman «solapamiento». Las motas menores que el tamaño de Eliminar motas se fusionan con la forma que las rodea en lugar de descartarse.

4 · Vectorización

Cada capa es una máscara en blanco y negro que Potrace (compilado a WebAssembly) convierte en rutas de Bézier suaves. El suavizado, la eliminación de motas y la optimización de curvas son los parámetros estándar de Potrace, expuestos como dos controles y un ajuste predefinido.

5 · Montaje del SVG

Las coordenadas de Potrace se convierten de nuevo a la cuadrícula de píxeles original, con una <path> por relleno (un color plano o un <linearGradient> / <radialGradient> en <defs>) y nada más: sin transformaciones, grupos ni metadatos. Los colores ocultos y el fondo exterior simplemente se omiten.

6 · Nada sale del navegador

Todo lo anterior se ejecuta en un Web Worker en tu equipo. La única excepción es un formato que tu navegador no puede abrir (TIFF, PSD, HEIC, PDF): ese archivo se convierte a PNG en nuestro servidor, en memoria, y se descarta de inmediato.

Vista Comparar ampliada sobre el resplandor del sol: mapa de bits a la izquierda del divisor y degradado radial SVG a la derecha
El paso 2 en la práctica. El resplandor del sol y el cielo que lo rodea se detectaron como una sola región suave y se escribieron como un único degradado radial; el divisor separa el PNG (izquierda) del SVG (derecha).
El panel de resultado: 6,7 KB, 15 formas, 11 rellenos de los cuales 6 son degradados
Lo que consigues con eso. El ejemplo del globo vectorizado solo con colores planos son 13 colores y 56 KB; con detección de degradados son 11 rellenos, 15 formas y 6,7 KB.

Pequeño a propósito

Créditos y límites

El motor de vectorización es Potrace, de Peter Selinger, usado bajo la GPL a través de la compilación esm-potrace-wasm; su licencia se distribuye junto al script. El análisis de color, las capas y el montaje del SVG son JavaScript propio de AnyToSVG, servido sin minificar. No se cargan scripts, fuentes ni rastreadores de terceros desde otros dominios.

Límites, con sinceridad: las imágenes se vectorizan con un máximo de 2048 píxeles en el lado más largo, así que un escaneo de 6000 píxeles se reduce antes. Las fotografías salen en forma de cartel: eso es lo que hace vectorizar. El sombreado suave se detecta y se escribe como degradados SVG reales (lineales o radiales), pero el sombreado que sigue una forma compleja se sigue reduciendo a unos pocos colores planos. No se admite la vectorización de línea central para dibujos de línea (rutas de un solo trazo para plotters de pluma); las formas son siempre contornos rellenos.

De un vistazo

Lo esencial

Precio
Gratis
Cuenta
No hace falta
Entrada
PNG · JPG · GIF · WebP · BMP · SVG · TIFF · PSD · HEIC · PDF
Salida
SVG · PNG (1× / 2× / 4×) · portapapeles
Colores
2 – 32, o blanco y negro
Tamaño máximo
20 MB · vectorizado a ≤ 2048 px
Almacenamiento
Ninguno en el servidor

¿Preguntas, errores o ideas?

Escribe a [email protected], o simplemente suelta una imagen en el convertidor y compruébalo tú mismo.

Abrir el convertidor