WebP a SVG v1.0

Hay dos pistas más sin abrir código. Un SVG envuelto pesa casi lo mismo que el original, mientras que un logotipo trazado suele quedarse en pocos kilobytes. Y al ampliar al 800 % en el navegador, el trazado real mantiene los bordes limpios y el envuelto se deshace en píxeles.

Ventajas frente al flujo habitual

• Sin desvío por PNG. Acepta el WebP tal cual, así que te ahorras la conversión intermedia que exigen la mayoría de trazadores gratuitos y algunos programas de escritorio.
• Color completo. Salida en color con hasta 32 tonos, en lugar del blanco y negro al que se limitan los vectorizadores libres más conocidos.
• Transparencia preservada. Los píxeles transparentes quedan fuera de la cuantización, de modo que el canal alfa del WebP llega al SVG en vez de aplanarse contra un fondo blanco.
• WebP animado admitido. Se traza el primer fotograma en lugar de devolver un error, que es la respuesta más común ante un archivo animado.
• Todo en local. El archivo no se sube: la descodificación, la cuantización y el ajuste de curvas ocurren en tu navegador.
• Salida ordenada. Un grupo por color y un trazado por forma, cada uno con su identificador, para que la capa correcta se seleccione a la primera.
• Gratis y sin cuenta. Sin registro, sin clave de API y sin muro de pago en el momento de la descarga.

Funciones clave del trazador

• Cuantización k-means. Reduce la imagen a regiones planas con semillas deterministas por punto más lejano, así que el mismo archivo con los mismos ajustes da siempre el mismo resultado.
• Control de colores (2 a 32). Fija cuántos tonos sobreviven al trazado; menos colores significan menos trazados y un archivo más ligero.
• Detalle de 0 a 10. Regula cuánto se simplifican los contornos antes de ajustar las curvas.
• Despeckle por área. Descarta las regiones por debajo de un umbral, algo necesario con WebP con pérdida, que arrastra artefactos de bloque igual que un JPG.
• Simplificación Ramer-Douglas-Peucker. Elimina puntos redundantes del contorno sin desplazar la silueta.
• Detección de esquinas a 45 grados. Distingue una esquina real de una curva cerrada, de modo que los ángulos de un logotipo no se redondean.
• Ajuste de Bézier por mínimos cuadrados. Usa el algoritmo de Schneider con reparametrización de Newton, ajustando siempre contra el contorno original.
• Resolución de trabajo variable. Se traza a menor tamaño y después se escalan los trazados, lo que no cuesta nada en datos vectoriales.
• Fondo conservado o eliminado. Decides si la región de fondo se convierte en un trazado más o desaparece del archivo.
• Agrupación por color. Las formas se emiten de mayor a menor para que los huecos queden por encima y no tapen lo que hay debajo.

Cómo funciona paso a paso

1. Carga el WebP. Arrastra el archivo a la zona de subida; el navegador lo descodifica de forma nativa, sin librería adicional.
2. Elige un preajuste. Logo, Clipart, Foto o Plantilla fijan de golpe colores, detalle, despeckle y resolución de trabajo.
3. Ajusta si hace falta. Sube el despeckle si aparecen motas, baja el número de colores si el archivo sale demasiado pesado.
4. Revisa la vista previa. Comprueba las esquinas y los bordes de las letras antes de descargar, que es donde primero se nota un detalle mal calibrado.
5. Descarga el SVG. DocPivot entrega un SVG agrupado y en texto plano, listo para abrirse en cualquier editor vectorial.

Los cuatro preajustes y cuándo usar cada uno

Cada preajuste combina cuatro parámetros pensados para un tipo de gráfico concreto. Empieza por el que más se acerque a tu imagen y retoca solo lo que haga falta.

Logo es el punto de partida para marcas, iconos y pictogramas: pocos colores, detalle alto y despeckle bajo porque no hay ruido que limpiar. Clipart dobla la paleta para ilustraciones planas con más matices. Foto baja el detalle y dispara el despeckle porque una fotografía genera miles de regiones diminutas. Plantilla deja dos colores y es la opción para corte de vinilo, estarcido y serigrafía a una tinta.

Cuándo conviene usar esta herramienta y cuándo no

El trazado automático da buenos resultados con gráficos planos y de bordes definidos, y resultados discretos con fotografías. Esto no es una limitación de esta herramienta en concreto, sino de la vectorización automática en general: una foto no tiene fronteras nítidas entre regiones de color, así que el trazador se inventa cientos de formas para aproximar un degradado.

• Logotipos descargados de una web. El caso más frecuente, cuando el cliente no encuentra el archivo original.
• Iconos para interfaz. Un SVG pesa menos que varios PNG a distintas densidades y se ve nítido en cualquier pantalla.
• Corte de vinilo y rotulación. Las plotters necesitan trazados cerrados, no píxeles.
• Serigrafía textil. Cada color separado en su propio grupo facilita la separación de tintas.
• Gran formato. Lonas, vallas y expositores donde ampliar un mapa de bits no es opción.
• Bordados y grabado láser. Los flujos de fabricación digital parten casi siempre de vectores.
• Sellos e ilustraciones de línea. Los dibujos a tinta se trazan especialmente bien con pocos colores.

Para retratos, fotografía de producto o cualquier imagen con degradados suaves, lo razonable es quedarse en mapa de bits y optimizar el archivo con un compresor de imágenes. Si lo que buscas es un tamaño distinto y no un formato distinto, un redimensionador de imágenes resuelve el problema sin pasar por la vectorización.

Casos de uso reales en el mercado español

Rehacer el logo de un cliente sin archivos originales

Contexto: una gestoría de Valencia cambia de web y solo conserva el logo que aparece en la cabecera de la anterior, en WebP a 480 píxeles.

• Se descarga el WebP directamente desde el navegador.
• Se traza con el preajuste Logo y ocho colores.
• Se retocan dos nodos en Illustrator y se corrige el tipo de letra.

Resultado: identidad recuperada en vectores el mismo día, sin encargar una vectorización manual.

Iconos nítidos en una tienda de WooCommerce

Contexto: una tienda de PrestaShop sirve todos sus iconos en WebP y se ven blandos en pantallas de alta densidad.

• Se trazan los iconos con el preajuste Clipart.
• Se limpian los grupos sobrantes y se unifican los colores de marca.
• Se sustituyen los WebP por SVG en línea en la plantilla.

Resultado: iconos nítidos en cualquier densidad de pantalla y menos peticiones de imagen por página.

Preparar un diseño para corte de vinilo

Contexto: un taller de rotulación de Sevilla recibe por correo un gráfico en WebP para rotular la luna de un local.

• Se traza con el preajuste Plantilla, a dos colores.
• Se sube el despeckle hasta eliminar las motas del borde.
• Se envía el SVG al software de la plotter.

Resultado: trazados cerrados que la plotter interpreta a la primera, sin redibujar el contorno a mano.

Documentación técnica y material impreso

Contexto: un despacho de arquitectura necesita insertar en un informe unos diagramas que solo tiene en WebP.

• Se trazan los diagramas con detalle alto y pocos colores.
• Se comprueban las líneas finas en la vista previa.
• Se colocan en el documento como vectores mediante el conversor de SVG a PDF.

Resultado: diagramas legibles en papel a cualquier tamaño y un PDF más ligero que con imágenes incrustadas.

WebP con pérdida, sin pérdida y animado: qué cambia en el trazado

Los tres tipos de WebP se trazan, pero no se comportan igual. El WebP sin pérdida conserva bordes limpios y produce contornos muy fieles, así que suele bastar con el despeckle por defecto. El WebP con pérdida arrastra artefactos de bloque alrededor de los bordes, exactamente igual que un JPG comprimido, y esos artefactos se convierten en regiones diminutas si no subes el despeckle.

El WebP animado se traza a partir de su primer fotograma. No obtienes un SVG animado, sino un trazado limpio del primer cuadro, que es lo que en la práctica se necesita cuando alguien manda un logo animado y hace falta la versión fija. Si lo que quieres es el archivo en otro formato de mapa de bits en lugar de un vector, el conversor de WebP a JPG y el conversor de imágenes general cubren esos casos.

Privacidad, RGPD y procesamiento en el navegador

Ningún archivo sale de tu equipo. En DocPivot, la descodificación, la cuantización y el ajuste de curvas se ejecutan íntegramente en el navegador. Para un autónomo o una pyme que trata material de clientes, esto significa que no hay transferencia a un tercero y, por tanto, no hay que valorar un encargado de tratamiento adicional bajo el RGPD ni la LOPDGDD para esta tarea concreta.

La diferencia importa más de lo que parece cuando el gráfico no es un logo público sino un plano, una firma escaneada o una imagen de un expediente. Los servicios que suben el archivo a un servidor suelen anunciar un plazo de borrado, pero el borrado posterior no es lo mismo que la ausencia de subida. Si además trabajas con fotografías que llevan metadatos, conviene revisarlos con un visor EXIF y limpiarlos con la herramienta para eliminar metadatos de una foto antes de compartir nada.

Qué hacer con el SVG una vez descargado

El archivo es SVG agrupado y en texto plano, así que se abre sin conversiones intermedias en Illustrator, Inkscape y Figma. Cada color viaja en su propio grupo y cada forma es un trazado con identificador, de modo que puedes seleccionar una capa concreta sin desagrupar todo el dibujo.

Lo habitual después de trazar es unificar los colores de marca, fusionar los grupos separados de más y borrar los trazados residuales del fondo. A partir de ahí, el mismo SVG sirve de origen para todo lo demás: el conversor de SVG a PNG genera las versiones en mapa de bits, el conversor de SVG a WebP devuelve el gráfico al formato de la web y el generador de favicons produce el juego de iconos del sitio. Para el camino inverso, cuando lo que necesitas es servir un mapa de bits ligero, están el conversor de PNG a WebP y la herramienta para recortar imágenes antes de publicarlas.

Preguntas frecuentes