Vectorizar un logo de PNG a SVG — Sin perder el detalle fino
Tienes un logo como PNG. Lo necesitas como SVG — para el sitio web, para la firma de email que se vea nítida en pantallas Retina, para la imprenta que quiere vectorial para las tarjetas de visita. Contratar a un diseñador para recrearlo lleva días. Las herramientas de auto-vectorización tardan segundos. Esta guía explica cómo vectorizar limpio, dónde fallan estas herramientas y cómo recuperarte cuando lo hacen.
Herramienta usada: paste-to-download.com/vectorize — conversor PNG/JPG a SVG basado en navegador, sin upload, sin marca de agua.
Por qué SVG importa para logos
Los logos tienen que verse bien en cada tamaño. Un favicon de 32 × 32 y un banner de feria de 4000 × 4000 son el mismo logo, pero un archivo raster (PNG, JPG) solo puede tener un tamaño — el resto está o pixelado (cuando se estira más grande) o desperdiciando bytes (cuando es demasiado grande para el slot).
SVG (Scalable Vector Graphics) describe el logo como matemática — curvas, rellenos, trazos. La matemática se renderiza perfecta a cualquier tamaño. Estándar en todos los sitios donde existe un navegador moderno, además de la mayoría del software de diseño.
Lo ideal: almacena el logo maestro como SVG, exporta versiones raster a demanda.
Qué hace en realidad la auto-vectorización
Un vectorizador (también llamado "trace" o "rasterize") mira una imagen raster e identifica regiones de color similar. Para cada región, calcula un trazado cerrado que sigue el contorno. La salida es un trazado por región — ese es tu SVG.
La calidad de la salida depende de:
- Resolución fuente — input más alto = más detalle para trazar
- Nitidez de borde — los bordes limpios trazan limpio; los bordes borrosos producen trazados temblorosos
- Cantidad de colores — menos colores = salida más simple; más colores = más trazados
- Artefactos de antialiasing — los bordes suaves desde la rasterización crean regiones falsas de micro-color
Entendiendo esto, puedes pre-procesar la fuente para obtener una salida vectorial limpia.
Paso 1: Parte de la fuente con mayor resolución que tengas
La regla de oro: si existe el archivo vectorial original (AI, EPS, PDF, SVG), úsalo. No vectorices cuando tienes el original.
Si solo tienes rasters, elige el más grande y limpio:
- Un PNG de 2000 × 2000 siempre vectoriza mejor que una miniatura de 200 × 200
- Una captura del logo desde un sitio web es peor que el archivo fuente que el sitio web usó
- Una foto de un logo impreso (cámara en mano, captura de una tarjeta de visita) es mucho peor que un archivo digital — la re-codificación a través de JPEG más ruido fotográfico crea muchas regiones de color falsas
Si la fuente es pequeña o ruidosa, prueba primero /upscale con modo Lanczos para limpiar y agrandar antes de vectorizar.
Paso 2: Limpia la fuente si hace falta
A los vectorizadores les gusta:
- Fondos blancos limpios o transparentes
- Colores sólidos (sin gradientes ni texturas fotográficas)
- Bordes nítidos (con antialiasing está bien; borrosos no)
Los vectorizadores luchan con:
- Artefactos JPEG (cada bloque 8×8 se vuelve una región falsa)
- Gradientes (interpretados como muchos pasos discretos de color)
- Sombras paralelas (vectorizadas como una secuencia de anillos de baja alpha)
- Fondos fotográficos (cada hoja, cada nube se vuelve un trazado)
Pre-procesado:
- Quita el fondo con /remove-background si el logo está sobre un fondo complejo
- Aplica leve blur si la fuente tiene artefactos JPG (contraintuitivo — suaviza los bordes falsos antes de trazar)
- Aumenta el contraste si la fuente está desvanecida
- Sube la saturación si quieres que el vectorizador distinga claramente las regiones de color
Paso 3: Abre la herramienta y elige el modo correcto
Abre /vectorize. Suelta tu logo. Elige el modo:
- Alto contraste: lo mejor para logos de 1-2 colores (negro sobre blanco, negro sobre color). Produce 1-2 trazados.
- Color: lo mejor para logos multicolor con rellenos planos (3-8 colores distintos). Produce un trazado por región de color.
- Detallado: para logos con muchos elementos pequeños o trabajo de línea fina. Produce más trazados, salida más grande.
Para la mayoría de logos de marca modernos (limpios, planos, 2-4 colores), Color es el default. Para monogramas viejo-estilo o logos de un solo color, Alto contraste.
Paso 4: Ajusta umbral y cantidad de colores
Dos sliders críticos:
- Umbral (0-255): el corte de brillo para distinguir oscuro de claro. Umbral más alto = más píxeles van a la región "oscura". Default 128 (gris medio). Ajusta hasta que los bordes del logo coincidan con el original.
- Cantidad de colores: el número máximo de colores distintos de relleno en el SVG. Un logo de 2 colores debería fijarse en 2. Uno de 5 colores en 5. Fijar muy alto produce ruido; muy bajo fusiona colores distintos.
En el vectorizador de paste-to-download, ambos sliders muestran preview en vivo. Ajusta hasta que el preview coincida con el original, después exporta.
Paso 5: Exporta el SVG y verifica en navegador
Pulsa Vectorizar y descargar. Abre el .svg resultante directamente en un navegador (arrastra el archivo a la barra de direcciones):
- Debería renderizarse idéntico al PNG
- Haz zoom con Ctrl+= (o ⌘+= en Mac) — al 1000% de zoom los bordes deberían seguir nítidos
- Redimensiona la ventana del navegador — el SVG vuelve a renderizar nítido a cualquier tamaño
Si luce roto (trazados dentados, colores faltantes, formas raras), vuelve al paso 4 y prueba otros ajustes.
Fallos comunes y soluciones
"Los bordes del logo se ven ondulados"
La fuente era o de muy baja resolución o tenía artefactos de compresión JPG. Prueba con una fuente de mayor resolución, o pasa la fuente primero por /compress a PNG (quita el ruido de los artefactos JPG), después vectoriza.
"Algunos colores se fusionaron en uno"
La cantidad de colores está demasiado baja. Súbela hasta que cada color de relleno distinto del original tenga su propio trazado.
"Hay un halo de colores intermedios alrededor del logo"
Artefactos de antialiasing. Baja la cantidad de colores (colapsa el halo en el relleno principal) o usa un umbral más alto (elimina los píxeles de borde claros).
"El texto fino del logo es ilegible"
El texto es lo más difícil de vectorizar desde un raster. Dos opciones: (a) usa la fuente original y vuelve a tipografiar el texto manualmente en el SVG (busca el nombre de la fuente; las empresas suelen usar fuentes comerciales), o (b) acepta la aproximación vectorial y arréglalo después.
"El gradiente del original quedó como escalones bandeados"
Los vectorizadores no pueden representar fácilmente gradientes continuos. Tendrías que reemplazar manualmente los escalones bandeados con un elemento <linearGradient> o <radialGradient>. Para la mayoría de logos no vale la pena; si el gradiente es esencial, recrea el logo en Illustrator/Figma usando la spec de color de la marca.
Cuándo deberías contratar a un diseñador en su lugar
La auto-vectorización es genial para:
- Uso interno (slides, sitios internos, prototipos)
- Conversiones iniciales desde material impreso
- Logos más pequeños con formas simples
No es genial para:
- Assets finales de calidad marca que se usarán por años
- Logos con elementos intrincados dibujados a mano
- Impresión a tamaños muy grandes (banners, vinilos vehiculares)
Para assets finales de marca, el flujo es: auto-vectorizar → usar la salida como punto de partida → limpiar manualmente en Inkscape o Illustrator. Un diseñador trabajando desde un comienzo auto-vectorizado gasta 30 minutos en lugar de 3 horas.
Browser-local: por qué importa para logos
Los logos son a menudo confidenciales pre-lanzamiento. Subirlos a un servicio desconocido para vectorización es un riesgo de fuga.
/vectorize corre completamente en tu pestaña. El vectorizador basado en Potrace está compilado a WebAssembly, corre localmente, tu logo nunca sale de tu dispositivo. Abre el panel Network: cero tráfico saliente con datos del logo.
TL;DR
- Parte de la fuente limpia con mayor resolución que tengas
- Quita el fondo o el ruido de la fuente si hace falta
- Abre /vectorize, elige el modo correcto
- Ajusta umbral y cantidad de colores hasta que el preview coincida con el original
- Exporta, verifica en navegador a múltiples niveles de zoom
El resultado: un logo que escala perfecto desde favicon de 16 px hasta banner de feria de 16 metros.