Convertir WebP a SVG

El WebP de esta página casi siempre viene de una web, y la web que sirve WebP suele tener el vector en algún sitio. Merece la pena mirar tres lugares antes de convertir nada: pedir /favicon.svg en el dominio, abrir el código fuente de la página y buscar ".svg", o vigilar el panel de red del navegador mientras carga.

Muchas webs incrustan el logotipo como SVG directamente en el HTML, lo que significa que las curvas y las formas reales están ahí para copiar tal cual. Un trazado es siempre una reconstrucción aproximada; cuando el original está a un clic de distancia, tomarlo es mejor que aproximarlo.

WebP son en realidad dos formatos bajo una misma extensión: uno de imagen fija y otro de animación, y buena parte de los gráficos animados pequeños que circulan por la web son del segundo tipo. El descodificador que usa esta herramienta solo lee imágenes fijas, así que un archivo animado no se convierte a medias: se rechaza, con un mensaje legible en vez de tomar el primer fotograma en silencio.

Si lo que hace falta es un único fotograma para trazar, la solución es abrir el archivo en un navegador, pausarlo, capturar la pantalla y trazar esa captura en su lugar. Ese fotograma capturado ya es una imagen fija y se traza sin problema. Si el movimiento en sí es lo importante, ningún conversor de esta página lo conserva: WebP a GIF pasa por el mismo tipo de codificador y también escribe un único fotograma, así que conviene quedarse con el WebP original o abrirlo con un programa que sí reproduzca la animación.

WebP puede codificarse con o sin pérdida y la extensión no dice cuál es. Un WebP sin pérdida es equivalente a un PNG: los bordes del archivo son los bordes que dibujó quien lo diseñó, y se traza tan limpio como un logotipo exportado directamente. Uno con pérdida ha pasado por una transformación que suaviza zonas planas y deja un rizado en los bordes duros, y ese rizado se convierte en formas diminutas que el trazador dibuja como si fueran parte del diseño.

El síntoma es un contorno con un aspecto ligeramente ondulado, con pequeñas manchas pegadas a cada borde que debería ser limpio. Suavizar el detalle elimina buena parte, y bajar el número de colores elimina más. Si la misma web sirve también un PNG del mismo recurso —algo habitual como alternativa en un elemento picture—, ese PNG es el mejor archivo para trazar.

Las webs sirven las imágenes al tamaño que usa el diseño, a menudo mediante un servicio de redimensionado, y un logotipo de cabecera entregado a 240 o 320 píxeles de ancho es completamente normal. Esa es toda la información que tiene el trazador para ajustar los contornos.

La consecuencia es que las esquinas se redondean y los trazos finos tiemblan, y ningún ajuste de esta página lo arregla porque lo que falta son píxeles. Antes de convertir vale la pena probar lo obvio: pedir la misma imagen con un parámetro de ancho mayor en la URL, buscar una versión @2x, o revisar si el sitio tiene una página de prensa o de marca —las organizaciones que publican una suelen incluir ahí un SVG.

Cuatro para una marca de uno o dos colores, ocho para una ilustración plana o una insignia con varios rellenos, y más solo si algo visible se pierde. Ocho es el valor por defecto y funciona bien como primer intento para casi todo lo que se guarda de una página.

En un WebP con pérdida, el argumento para quedarse en pocos colores pesa más de lo habitual: cada entrada extra de la paleta le da al cuantizador un sitio donde colocar el rizado de la compresión, así que subir de ocho a dieciséis a menudo añade formas que son puro artefacto. Probar primero con cuatro suele dar el archivo más pequeño y el conjunto de contornos más limpio.

El ajuste de detalle decide con cuánta fidelidad sigue cada contorno la cuadrícula de píxeles y qué tamaño mínimo tiene que tener una forma para no descartarse. Suave se ajusta con holgura y descarta lo menor de dieciséis píxeles; nítido sigue la cuadrícula de cerca y conserva formas de hasta dos píxeles; equilibrado queda en medio y es el valor por defecto.

Suave es la opción correcta para un WebP guardado de una web, porque las manchas diminutas que produce suelen ser artefactos de compresión y no parte del diseño. Nítido solo merece probarse en un WebP sin pérdida de un icono preciso a nivel de píxel.

Un conjunto de formas rellenas, cada una con un color sólido y un contorno de un píxel, más una forma que cubre todo el lienzo con opacidad cero donde el WebP era transparente. Sin grupos, sin nombres, sin elementos de texto, sin degradados: un nombre escrito como logotipo vuelve como contornos con forma de letra, imposibles de reeditar en la tipografía original.

Para una diapositiva, una impresión grande o un cortador de vinilo suele bastar. Como activo de marca no basta, y cualquier persona con ojo para el diseño lo identifica como un trazado a simple vista. Lo más útil es tratar el resultado como plantilla sobre la que redibujar a mano: la mayoría de logotipos son pocas formas geométricas y una tipografía.

Esta página sirve para dos situaciones que el conversor no distingue y que no son lo mismo en absoluto. Recuperar el propio material —la marca de una web propia, o una que hizo una agencia que ya no da soporte— es el caso habitual y no genera ningún conflicto.

Reconstruir la marca de otra empresa a partir de su propia web es distinto, y trazarla no cambia a quién pertenece. Conviene resolver esa duda antes de que el resultado entre en un diseño, no después. También es el motivo por el que esta conversión ocurre entera en el navegador: sea cual sea el archivo, no sale del equipo.

Si la imagen es una fotografía, trazarla la posteriza y no la mejora; WebP a JPG o WebP a PNG resuelven mejor esa situación. Si es una captura de pantalla con texto, trazarla es lo peor que se puede hacer: WebP a TXT lee las palabras directamente en vez de convertirlas en contornos ilegibles.

Si el objetivo es un favicon, WebP a ICO produce el archivo directamente sin pasar por vector. Y si el único objetivo era tener la imagen en un formato que abra cualquier programa corriente, WebP a PNG conserva cada píxel sin perder nada. El trazado se gana su sitio solo cuando el arte es plano y de verdad necesita escalar o cortarse.

La descodificación, el escalado y el trazado ocurren enteros en la pestaña del navegador. El descodificador de WebP es libwebp compilado a WebAssembly y se descarga solo cuando se suelta un archivo de ese tipo, así que nada de la imagen se envía a ningún sitio y no hace falta cuenta ni existe un límite diario.

El trazado en sí corre con imagetracerjs, una librería ligera de JavaScript puro. No es la más precisa que existe en curvas complejas, pero en una marca plana la diferencia con otras herramientas es pequeña, y en un WebP con pérdida el peso de la compresión importa más que el trazador que se use.