Convertir PNG a SVG

PNG no tiene pérdida, así que nada se ha emborronado antes de que el calcador mire el archivo: los bordes que hay dentro son exactamente los que dibujó la herramienta de diseño, con solo el suavizado que ella misma puso. Esa es la diferencia entre esta página y cualquier otro origen posible, y se ve directamente en el resultado.

Medido sobre la muestra de este sitio, un gráfico plano de 480 por 320 puntos: 7.136 bytes de PNG se calcaron en 2.481 bytes de SVG con los ocho colores por defecto, en cinco trazados. Más pequeño que el original y ya ampliable hasta un rótulo de tienda, que es el caso para el que existe la función. Cinco trazados es además la cifra que hay que vigilar: cuando un calcado de dibujo plano vuelve con cinco, doce o treinta formas, ha funcionado; cuando vuelve con ochocientas, el origen no era un dibujo plano.

Casi todos los PNG que llegan a esta página se exportaron desde algo. El archivo de Figma, el documento de Sketch, la mesa de trabajo de Illustrator o el diseño de Canva que lo produjo es una fuente vectorial de verdad y no una reconstrucción, y exporta un SVG desde un menú: con curvas reales, texto real y capas con nombre.

Merece la pena buscarlo porque la diferencia es permanente. Un logotipo calcado tiene contornos donde el original tenía letras, así que la marca denominativa nunca se podrá volver a componer con la tipografía corporativa, y las curvas son aproximaciones que una persona de diseño detecta de un vistazo. Se calca cuando la cuenta está cerrada, cuando la agencia que hizo la identidad ya no responde, cuando el archivo estaba en un portátil que murió o cuando la única copia que sobrevive de la marca es el PNG de la web antigua. Son situaciones bastante frecuentes como para que esta página exista; siguen siendo la segunda mejor vía.

El calcador lee los cuatro canales, así que un logotipo recortado sobre fondo transparente no vuelve dentro de un cuadrado blanco. Las zonas que eran transparentes se emiten como trazados con opacidad cero, y el dibujo visible se apoya encima, de modo que el SVG se comporta como se comportaba el PNG cuando se coloca sobre una página de color.

El mecanismo conviene conocerlo porque no es un canal alfa. Un SVG no tiene canal alfa que tener: tiene formas con opacidad, y un rectángulo de opacidad cero cubriendo el lienzo es en lo que se convierte un fondo transparente. De ahí salen dos consecuencias. Los puntos semitransparentes —el borde suave de una sombra, una capa al cuarenta por ciento— se reducen a unos pocos escalones de opacidad en lugar de a una rampa continua, así que una sombra suave sale a bandas. Y el trazado invisible del fondo sigue dentro del archivo, de modo que borrarlo en Inkscape suele ser la primera limpieza.

Las capturas son los PNG más abundantes que existen y lo menos apropiado que se puede calcar. El texto suavizado es un racimo de grises ligeramente distintos alrededor de cada trazo, y cada racimo se convierte en su propio trazado pequeño, así que un párrafo acaba siendo miles de formas que juntas aproximan un texto ligeramente mal dibujado.

La medición sobre la captura de muestra de este sitio es contundente: 2.608 bytes de PNG se convirtieron en 166.255 bytes de SVG con 871 trazados a ocho colores. Sesenta y cuatro veces el tamaño, para un resultado peor en todo, incluida la legibilidad. Si lo que interesaban eran las palabras, la conversión de PNG a texto las lee con reconocimiento óptico. Si lo que querías era una imagen nítida de la interfaz, el PNG ya lo es y ocupa una fracción de cualquier calcado sacado de él.

Cuatro para una marca de un solo color o un logotipo a dos tintas, ocho para una ilustración plana con unos cuantos rellenos, dieciséis donde haya sombreado real, y treinta y dos solo cuando a dieciséis se eche algo en falta. Ocho es el valor por defecto y es el primer intento correcto para material salido de una herramienta de diseño.

El ajuste no se comporta como un deslizador de calidad, y las medidas sobre la muestra lo enseñan: 3.900 bytes con cuatro colores, 2.481 con ocho, 10.263 con dieciséis y 10.168 con treinta y dos. Más colores dieron un archivo más pequeño en un paso y un salto de cuatro veces en el siguiente, porque el cuantizador elige una paleta nueva cada vez y una paleta que casualmente encaja con el dibujo produce regiones menos numerosas y más grandes. Probar dos ajustes lleva quince segundos y zanja la cuestión mejor que cualquier razonamiento sobre ella.

Cualquier herramienta de diseño suaviza al exportar, así que incluso un logotipo de bordes duros lleva una rampa de uno o dos píxeles de color intermedio a lo largo de cada frontera. Esas rampas son las motas que deja un calcado, y el ajuste de detalle decide si sobreviven: suave descarta toda forma por debajo de dieciséis píxeles y ajusta los contornos con holgura; nítido conserva formas de hasta dos píxeles y se pega a la rejilla; equilibrado queda en medio y es el valor por defecto.

Para un logotipo, suave suele ser la respuesta y el punto de partida más limpio. Nítido se gana su sitio en un plano técnico o en un icono pensado píxel a píxel, donde una línea de un punto es contenido y no un artefacto. Lo que el calcador no hace nunca es difuminar la imagen antes: el radio de desenfoque está fijado en cero en los tres ajustes, porque difuminar reduce las motas ablandando justamente los bordes duros que eran el único motivo para calcar un logotipo.

Todo lo que pase de 1.600 píxeles en su lado más largo se reduce antes de calcar. Es un techo de coste y no de calidad —calcar cuesta en proporción al número de bordes, y una imagen grande tiene bordes por todas partes— y no le quita nada al resultado, porque un logotipo calcado a 1.600 píxeles y el mismo calcado a 4.000 se dibujan idénticos a cualquier tamaño.

La dirección que sí importa es la contraria. Un icono exportado a 200 píxeles tiene tan pocos puntos a lo largo de cada curva que los contornos ajustados redondean las esquinas de forma visible, y ningún ajuste lo recupera. Si algo en tu poder todavía puede exportar el dibujo, pídeselo en torno a 1.600 píxeles de ancho. Un recurso a doble o triple densidad que ya esté en una carpeta de compilación suele ser lo mejor disponible y merece la pena buscarlo antes de calcar la versión pequeña.

Lo que sale es una pila de trazados rellenos con colores planos y trazos de un píxel a juego. Sin grupos, sin nombres de capa, sin elementos de texto, sin degradados, sin símbolos. Una marca denominativa son contornos de letras y no letras; un círculo es una secuencia de curvas ajustadas y no un círculo; un degradado ha quedado reducido a bandas de color plano.

Para casi todo aquello a lo que se dedica esta página eso es aceptable, porque el destino es una cortadora, una grabadora, una impresión grande o un sustituto que deje de verse borroso. No es aceptable como original de repuesto. Si la marca vuelve a entrar en un sistema de identidad, trata el calcado como una referencia sobre la que redibujar y no como el original recuperado: por debajo suele haber tres círculos y una tipografía, y redibujar eso lleva menos tiempo que limpiar un calcado de eso.

Si el archivo es una fotografía, ningún calcador ayuda y lo que pide la situación es PNG a JPG o PNG a AVIF. Si es una captura y el objetivo era un archivo más pequeño, PNG ya está cerca de lo óptimo con colores planos de interfaz, y en las muestras de este sitio AVIF le ganó en la fotografía pero no en la captura.

Si lo que hacía falta era un favicon, PNG a ICO produce directamente el archivo que pide un navegador y no necesita vectorizar nada por el camino. Y si el objetivo era un archivo listo para imprimir a un tamaño fijo, PNG a PDF o PNG a TIFF le entrega a la imprenta algo que aceptará sin redibujar nada. Calcar merece la pena cuando el dibujo tiene que escalar de verdad o tiene que cortarse; el resto del tiempo, merece la pena saltárselo.

Descodificar, reducir y calcar ocurren dentro del navegador. No se sube nada, no hay cuenta y no hay cupo diario, lo cual en esta página en concreto pesa más que en otras: el dibujo que la gente intenta recuperar es casi siempre un logotipo que pertenece a alguien y que preferiría no dejar en el servidor de un desconocido.

El calcador es imagetracerjs: 46 KB de JavaScript puro bajo la Unlicense. No es la mejor opción que existe y conviene decirlo. potrace y autotrace ajustan curvas más limpias y son GPL; VTracer da mejores resultados que ambos y tiene licencia correcta, pero su único empaquetado para navegador no declara ninguna, y este proyecto trata eso como bloqueado. Con las exportaciones planas para las que está escrita esta página, la distancia entre ellos es lo bastante pequeña como para que la licencia decidiera.