Cómo Convertir un PNG o JPG a SVG Sin Perder tu Logo

Por qué "pásalo a SVG" es más difícil de lo que parece

Alguien pide el logo "en vector" y lo único que tienes es un PNG de una web antigua o un JPG sacado del escaneo de un membrete. Les pasa cada semana a autónomos, equipos de marketing, imprentas y pequeños negocios. La petición es razonable — la imprenta, el rotulista, el taller de bordado o el desarrollador necesitan un archivo que escale — pero un PNG o un JPG no contiene formas. Contiene píxeles. Convertirlo a SVG significa reconstruir formas que nunca se guardaron, y hacerlo bien es cuestión de preparar la fuente, elegir los ajustes correctos, comprobar el resultado y saber cuándo parar y redibujar.

Esta guía recorre ese proceso de principio a fin con nuestro convertidor de imagen a SVG, que traza el archivo por completo en tu navegador — no se sube nada — y produce un SVG plano que puedes abrir en Inkscape, Illustrator, Affinity Designer, Figma o el software de tu máquina de corte. Todo lo que sigue se aplica también, con pequeñas diferencias, a cualquier trazador por regiones.

Ráster frente a vector, en los términos que importan para un logo

Una imagen ráster (PNG, JPG, WebP, GIF) es una rejilla fija de píxeles de color. Su calidad está limitada por la resolución: un logo de 200 px nunca podrá ser un logo nítido de 2.000 px, solo uno borroso o pixelado. Una imagen vectorial (SVG y los formatos nativos de los editores vectoriales) guarda las formas como coordenadas — líneas, curvas, rellenos — y se vuelve a dibujar al tamaño que necesite la salida. La especificación SVG del W3C define el formato como texto XML, y por eso un SVG se puede abrir en un editor de texto, estilizar con CSS y versionar en git junto al código.

Tres consecuencias importan para los logos:

• Independencia del tamaño. Un solo archivo vectorial sirve para el favicon, el membrete y el rótulo de la fachada. Se acabó el "mándame un PNG más grande".
• Editabilidad. Se pueden cambiar colores, mover formas y separar el símbolo del logotipo — siempre que las formas trazadas sean lo bastante limpias como para merecer la edición.
• Legibilidad por máquinas. Los plóteres de corte, las grabadoras y los digitalizadores de bordado siguen contornos vectoriales. Un ráster no les sirve hasta que se convierte en trazados.

La pega es que el trazado reproduce lo que hay en los píxeles, defectos incluidos. Los halos de antialiasing, los bloques JPEG y el polvo del escáner se convierten en formas salvo que el proceso los elimine. Los buenos resultados dependen sobre todo de controlar lo que entra y lo que se fusiona.

Paso 1 — Prepara la imagen de origen

Diez minutos con la fuente ahorran una hora de limpieza después. Por orden aproximado de importancia:

Busca la copia más grande y limpia

Localiza la versión más grande que exista: una exportación original, la copia del kit de prensa, el recurso en alta resolución de una firma de correo o la versión incrustada en un PDF. Cuanto más grande mejor, hasta cierto punto — el convertidor reduce la imagen de trabajo para que su lado mayor no supere los 1.024 px antes de trazar, así que una fuente de 4.000 px no se traza a 4.000 px, pero una fuente grande reducida limpiamente gana a una pequeña ampliada. Prefiere PNG a JPG cuando existan ambos: la compresión JPEG añade ondulaciones alrededor de los bordes que se trazarán como regiones diminutas de más.

Recorta ajustado y aísla el logo

Elimina el texto del membrete, los bordes de página, las fotos y todo lo demás. Dos cosas dependen de esto. Primera: el número automático de colores se estima sobre toda la imagen, así que una fotografía en una esquina le roba colores a tu logo. Segunda: la opción de fondo transparente elimina el color que domina el borde de la imagen, y solo cuando ese color cubre al menos el 30 % del borde; un logo encuadrado en blanco sobre un fondo abigarrado no se detectará. Tras el recorte, el fondo del logo debería tocar el marco por los cuatro lados.

Corrige contraste y fondo antes de trazar

Si el logo está sobre un escaneo gris claro, una fotocopia vieja de color café o un degradado sutil, unos niveles o un umbral en cualquier editor de imagen separarán las marcas del papel mucho mejor que cualquier trazador. Para una marca de un solo color, convertir la fuente a blanco y negro primero — o usar el modo blanco y negro del convertidor con su deslizador de umbral — le da al trazador exactamente dos regiones con las que trabajar.

Elimina lo que no quieras conservar

Una sombra paralela, un brillo satinado o un degradado tipo "swoosh" no sobrevivirán como rellenos planos: se convertirán en bandas. Si la marca puede vivir sin ellos, píntalos de fuera antes de trazar. Si no puede, planea reconstruir esos efectos en el editor vectorial después, en lugar de esperar que el trazado los produzca.

Paso 2 — Entiende qué hace el convertidor con tu archivo

Conocer la cadena de procesado es la manera más rápida de predecir lo que hará un deslizador. El convertidor ejecuta estas etapas, todas en el navegador:

1. La transparencia se aplana sobre blanco. Los píxeles totalmente transparentes pasan a blanco puro; los píxeles de borde semitransparentes se mezclan con blanco. Un logo en un PNG transparente obtiene así un único color de fondo limpio que se puede descartar después.
2. La imagen se reduce a una paleta. En modo color, la agrupación k-means (con inicialización k-means++ y semilla fija, por lo que es determinista) reparte los píxeles en N colores dentro del espacio CIELAB, donde las distancias se aproximan a lo que ve el ojo — consulta la introducción de Wikipedia a la cuantificación de color. "Auto" prueba cantidades de 2 a 16 y escoge el codo de la curva de varianza intra-grupo. El modo escala de grises ajusta cada píxel a una rampa uniforme de N grises; el blanco y negro aplica un umbral de luminancia.
3. Se fusionan colores parecidos y motas. Los colores de paleta adyacentes con un ΔE inferior a 4 se unen; después, toda región conexa menor que el tamaño mínimo de región es absorbida por una vecina, preferiblemente de color similar.
4. Las fronteras se trazan y se simplifican. Cada arista entre dos regiones sobre la rejilla de píxeles pasa a formar parte de un arco de frontera; cada arco se simplifica con el algoritmo de Douglas–Peucker exactamente una vez y lo comparten ambas regiones, de modo que los rellenos vecinos nunca abren huecos finos. Los vértices suaves se redondean en curvas Bézier cuadráticas; las esquinas marcadas se mantienen.
5. Se escribe el SVG. Un <path> por región con la regla de relleno par-impar (una letra "O" es un solo trazado con un agujero), agrupados por color, regiones grandes primero, un rectángulo de fondo opcional y como máximo 5.000 trazados.

Aquí no hay ningún filtro de detección de bordes ni ningún modelo que adivine formas. Es un trazador por regiones, de la misma familia de herramientas que el Potrace de código abierto de Peter Selinger, aunque la implementación es propia. Eso importa para las expectativas: es excelente con formas planas y honesto con las fotos.

Paso 3 — Elige el modo y el número de colores

Cuenta los colores reales del logo y fija ese número, no más. Un logo rojo y azul marino sobre blanco tiene tres colores; los píxeles con antialiasing entre el rojo y el blanco no son un cuarto color, son ruido, y pedir ocho colores obliga al trazador a inventar regiones para ellos.

• Blanco y negro para marcas de un solo color, dibujos lineales escaneados, sellos y firmas. Mueve el umbral (0–255) hasta que los trazos finos queden sólidos y el papel limpio; más bajo engrosa las líneas tenues, más alto elimina textura y sombras.
• Color con 2–6 colores para los logos habituales. Empieza en Auto para ver qué sugiere el estimador y ve bajando hasta que desaparezca un color que necesites; entonces sube un paso.
• Escala de grises para ilustraciones sombreadas y marcas en gris, donde una rampa uniforme se lee mejor que colores agrupados.

El panel de estadísticas informa de los colores realmente usados tras la fusión, que a menudo son menos de los pedidos; es la etapa de fusión haciendo su trabajo.

Paso 4 — Ajusta el suavizado y el tamaño mínimo de región

Estos dos deslizadores deciden si el SVG parece un dibujo o una fotocopia de píxeles.

El suavizado corresponde directamente a la tolerancia de Douglas–Peucker, de 0,5 px (la escalera de píxeles se conserva casi intacta) a 4 px (las curvas quedan muy suaves y los detalles pequeños se redondean). Para un PNG nítido de alta resolución, un valor bajo o medio mantiene las esquinas honestas. Para un logo en JPEG o un escaneo, un valor más alto alisa la ondulación de compresión a lo largo de los bordes. Vigila las esquinas de los cuadrados y los remates de las letras mientras lo mueves: un suavizado excesivo convierte una serifa afilada en una gota.

El tamaño mínimo de región es un área en píxeles (1–64 px sobre el ráster de trabajo). Toda región más pequeña se fusiona con una vecina. Súbelo hasta que desaparezcan el polvo, el ruido JPEG y los halos de borde; para antes de que se pierda el punto de una "i", el ojo de una "e" o el símbolo de marca registrada. El tirador de comparación sobre la vista previa existe justo para esta comprobación: arrástralo sobre las letras.

Si el número de trazados sigue en los miles, es señal de que la fuente tiene más ruido del que aparenta. Vuelve al Paso 1 y limpia la imagen en lugar de llevar los deslizadores al extremo.

Paso 5 — Elimina el fondo

Un logo que llega encuadrado en blanco queda poco profesional sobre una diapositiva de color, una web oscura o una camiseta estampada. Activa el fondo transparente: el convertidor localiza el color de paleta que domina el borde de la imagen, lo deja fuera del SVG y no escribe el rectángulo de fondo. Funciona mejor cuando el logo se ha recortado de modo que el fondo toca los cuatro bordes. Si el propio logo contiene grandes zonas del mismo color que el fondo — letras blancas sobre blanco — esas regiones también se descartarán, así que dale a esos logos un fondo contrastado antes de trazar y descarta ese en su lugar.

Paso 6 — Comprueba el resultado antes de descargar

Tres números te dicen casi todo lo que necesitas saber.

• Colores usados. Debería coincidir con el número real de colores del logo (más uno por el fondo si se conservó). Más significa que el ruido consiguió su propio grupo; menos, que dos colores de marca se fusionaron y hay que subir la cantidad.
• Trazados. Un logo limpio son típicamente decenas de trazados, no miles. Cada letra es aproximadamente un trazado; cada agujero va dentro del mismo trazado gracias a la regla par-impar. Un número de trazados que llega al tope de 5.000 significa que se descartaron las regiones más pequeñas y que la fuente necesita limpieza.
• Tamaño en KB. Sigue al número de trazados y al suavizado. Un SVG de logo que pesa más que el PNG del que salió es una señal de alarma, porque un buen logo vectorial suele ser mucho más pequeño que cualquier ráster suyo.

Después usa el tirador de comparación: arrástralo despacio sobre el logotipo y el símbolo. Mira los ojos de las letras, los trazos finos, las esquinas vivas y cualquier curva que debería ser un círculo perfecto. Anota lo que haya que arreglar a mano — esa lista es la razón de ser del siguiente paso.

Paso 7 — Limpia en Inkscape, Illustrator, Affinity Designer o Figma

El SVG se abre en todos los editores vectoriales importantes porque es SVG 1.1 plano sin scripts ni estilos en línea. Cada color es un grupo, lo que agiliza la limpieza habitual:

• Borra las motas. Selecciona un grupo de color y busca trazados diminutos lejos del logo; bórralos. Subir el tamaño mínimo de región antes de trazar lo reduce, pero una pasada manual caza el resto.
• Simplifica o redibuja las formas clave. Un círculo trazado es un polígono de segmentos Bézier, no un círculo matemático. Para una marca, dibuja un círculo, rectángulo o elipse verdaderos sobre el trazado, ajústalo al tamaño y borra el trazado. Haz lo mismo con cualquier borde perfectamente recto que haya salido con un ligero temblor.
• Vuelve a escribir el texto. Las letras trazadas son formas rellenas con agujeros, no texto editable. Si conoces la tipografía, reescribe el logotipo con la fuente real sobre las letras trazadas, iguala el tamaño y borra el texto trazado. Si no la conoces, conserva los contornos, pero ten en cuenta que el texto pequeño pierde sus ojos cuando la fuente es pequeña.
• Asigna los colores de marca. Sustituye los valores hexadecimales muestreados por los oficiales del manual de marca; un JPG nunca conserva los colores de marca exactos.
• Une las formas superpuestas. Combina los trazados del mismo color que visualmente forman un solo objeto, para que el archivo sea más fácil de editar y de cortar.

Guarda el máster en el formato nativo del editor y exporta desde él el SVG, el PDF y los PNG. El trazado era un andamio; el archivo limpio es el activo.

Preparar un SVG para máquinas de corte

Los plóteres de vinilo y las máquinas de corte de manualidades siguen los contornos de los trazados rellenos, y cada trazado se convierte en un corte. Para una pegatina de logo, traza en blanco y negro o con dos a cuatro colores, sube el tamaño mínimo de región para que ninguna mota se convierta en un corte diminuto, activa el fondo transparente para que no se trace el borde de la hoja y revisa el número de trazados: cuantos menos, mejor. Como cada color va agrupado en su propio <g>, la mayoría de programas de corte tratan cada color como una capa, lo que se corresponde con una lámina de vinilo por color. Suelda o une las formas del mismo color que se solapan y elimina los ojos interiores demasiado pequeños para despeluzar. Prueba en un trozo pequeño de material antes de comprometer una hoja entera.

Cuándo redibujar en lugar de trazar

Trazar es rápido, pero hay casos en los que redibujar a mano es la respuesta honesta:

• La fuente es diminuta. Un favicon de 64 px o una miniatura no contiene información suficiente para ningún trazador; el resultado serán manchas. Redibuja a partir de la referencia.
• El logo depende de degradados, sombras o transparencias. Los rellenos planos no pueden representarlos. Traza las partes planas y reconstruye los efectos de forma nativa.
• Es una marca crítica para un manual de identidad. Traza para obtener proporciones y posiciones y después redibuja con geometría exacta.
• La fotografía es el logo. Una foto trazada con ocho colores se convierte en arte posterizado. Si necesitas la foto, consérvala como ráster y usa un compresor o un conversor de formato.
• Ya tienes el vector. Busca en el kit de prensa, en la entrega del diseñador y en trabajos de imprenta antiguos. Un AI, EPS, PDF o SVG original siempre es mejor que el trazado de su exportación ráster.

Errores comunes y cómo evitarlos

• Trazar una captura de pantalla. Las capturas son pequeñas y muy suavizadas. Busca el recurso original.
• Pedir demasiados colores. Más colores no significan más fidelidad en un logo plano; significan más regiones y archivos más grandes. Cuenta los colores reales.
• Suavizado al máximo para ocultar el ruido. Redondea esquinas y remates. Limpia la fuente, sube el tamaño mínimo de región y mantén el suavizado moderado.
• Dejar el fondo. Una caja blanca sobre una superficie de color es la señal más visible de una conversión apresurada. Recorta ajustado y elimínalo.
• Fiarse de los colores muestreados. Sustitúyelos por la paleta oficial de la marca.
• Saltarse la comparación. Diez segundos con el tirador de comparación cazan ojos perdidos y trazos fusionados antes de que lleguen a la imprenta.
• Subir un logo confidencial a una web cualquiera. Muchos vectorizadores online procesan los archivos en un servidor. Un convertidor que funciona en el navegador mantiene el archivo en tu máquina, que es el valor por defecto correcto para trabajos de cliente.

Lecturas y herramientas relacionadas

El mismo motor de regiones que traza logos impulsa nuestras otras herramientas de foto a arte, y las guías hermanas explican sus compromisos en los mismos términos. Si te has preguntado por qué una plantilla de pintar por números se entrega en SVG y no en PNG, lee SVG frente a PNG para pintar por números. Si solo quieres los contornos — una página imprimible en lugar de formas rellenas — el tutorial sobre convertir una foto en una página para colorear explica los controles de detalle y grosor de línea. Y cuando un cliente solo tiene un JPG del logo y ninguna paleta de marca, nuestra guía para extraer una paleta de colores a partir de una foto muestra cómo recuperar valores hexadecimales aprovechables antes de asignar colores en el editor vectorial.

Conclusión

Convertir un PNG o JPG a SVG sin perder tu logo se reduce a una rutina repetible: busca la fuente más grande y limpia; recorta ajustado para que el fondo toque el marco; elige el modo y cuenta los colores reales; ajusta suavizado y tamaño mínimo de región mirando la vista de comparación; elimina el fondo; lee colores, trazados y tamaño; y remata en un editor vectorial borrando motas, redibujando la geometría exacta, reescribiendo el texto y asignando los colores de marca. El convertidor de imagen a SVG se encarga del trazado en tu navegador y te dice exactamente lo que ha hecho; el criterio sobre cuándo parar y cuándo redibujar sigue siendo tuyo.