Cómo convertir PNG a SVG: vectorizar logotipos e íconos

Un PNG es una imagen rasterizada: una cuadrícula fija de píxeles, cada uno con un color y, opcionalmente, un valor de opacidad. Un logotipo de 500 × 500 px contiene exactamente 250 000 de esos cuadritos y nada más, así que ampliarlo a tamaño póster solo puede agrandar cada cuadrito o difuminar los espacios entre ellos. Un SVG es una imagen vectorial, un archivo de texto que enumera formas como <path>, <circle> y <rect> con sus coordenadas y colores de relleno. Un navegador o una máquina de corte vuelve a dibujar esas formas al tamaño que necesite, y por eso un logotipo vectorial se ve nítido tanto en la pantalla de un celular como en el banner de una feria.

Pasar de vector a raster es fácil, porque el programa simplemente pinta las formas en píxeles; SVG a PNG lo hace en un segundo. El camino inverso no tiene atajo sin pérdida, porque la cuadrícula de píxeles no guarda ningún registro de las formas que la produjeron. Algo tiene que mirar los píxeles y deducir dónde empieza y termina cada forma. Ese paso de deducción se llama trazado o vectorización, y todo convertidor de PNG a SVG honesto, desde Illustrator hasta un programa de línea de comandos, es en el fondo un vectorizador.

Algunos convertidores se saltan la parte difícil. Escriben un archivo SVG válido que contiene un único elemento <image> con el PNG original incrustado como texto base64, lo que además hace que el archivo pese aproximadamente un tercio más que el PNG. El resultado se abre como SVG y supera una comprobación de tipo de archivo, pero sigue siendo una imagen de píxeles dentro de un envoltorio vectorial: al ampliar se ven los mismos bordes dentados, y una máquina de corte no encuentra trazados que seguir. Abra cualquier SVG en un editor de texto y busque data:image/png; si esa cadena aparece, no se vectorizó nada.

La vectorización favorece a las imágenes que se dibujaron como formas desde el principio. Un logotipo exportado desde una aplicación de diseño, un ícono plano, una caricatura con contornos negros, una firma escaneada o un esténcil consisten en unos pocos colores sólidos separados por bordes claros. El vectorizador agrupa cada color en regiones, sigue sus bordes y ajusta curvas suaves a lo largo de ellos, de modo que el SVG queda muy cerca de las formas que dibujó el diseñador. Las letras gruesas de un logotipo tipográfico también se vectorizan bien, porque una letra grande es solo otra forma rellena, y cada glifo se convierte en un contorno que se puede recolorear o redimensionar, pero ya no reescribir.

Las fotografías son el caso contrario. Un retrato o la foto de un producto tiene miles de tonos apenas distintos que se funden entre sí, y un formato vectorial no tiene una forma eficiente de describir eso. Si se le piden 16 colores a un vectorizador, se obtiene una ilustración posterizada con franjas visibles; si se le piden 64, se obtienen decenas de miles de formas diminutas en un archivo mucho más pesado que el PNG, que aun así no parece una foto. Los degradados suaves, las sombras paralelas y los resplandores se convierten del mismo modo en pilas de franjas finas. El texto pequeño es el tercer punto problemático: a 10–12 px, el suavizado de bordes mezcla cada letra con su fondo, y el vectorizador no distingue una «e» de una «o».

La resolución importa más que cualquier ajuste. El vectorizador ajusta cada curva a la escalera de píxeles de un borde, y cuanto más fina sea esa escalera, más fiel será la curva. Si usted mismo exportó el PNG desde Figma, Canva, Photoshop o una presentación, vuelva a exportarlo al doble o al triple del tamaño de visualización; un logotipo de 1500–2000 px de ancho le da al vectorizador material de sobra. No amplíe antes un PNG pequeño con un ampliador de IA salvo que el resultado se vea limpio al 100 % de zoom, porque la textura inventada en los bordes se vectoriza con la misma fidelidad que los bordes reales.

Después, simplifique el fondo. PNG admite transparencia total, y un fondo transparente es el caso más fácil: cada píxel totalmente transparente se trata como espacio vacío, así que el SVG no lleva un recuadro blanco detrás del diseño. Si el PNG tiene un fondo sólido, recorte primero bien ajustado alrededor del diseño; nuestra guía sobre cómo recortar una imagen a una proporción explica cómo encuadrar con exactitud. Un fondo recargado, como el de un logotipo fotografiado sobre una camiseta, conviene quitarlo o cubrirlo con un único color plano antes de vectorizar.

Por último, reduzca la cantidad de colores antes de que lo haga el vectorizador. Oculte sombras, resplandores y superposiciones de degradado en el archivo de origen, y sustituya un relleno degradado por su color intermedio si la versión vectorial no lo necesita. Cuente los colores sólidos que quedan, incluido el del contorno, y anote el número: será el dato más útil que introduzca en el paso siguiente. Si debe elegir entre un JPEG y un PNG del mismo logotipo, quédese con el PNG, ya que la compresión JPEG añade ruido alrededor de cada borde, como se explica en JPG, JPEG y PNG: diferencias.

Todos los vectorizadores hacen las mismas tres preguntas, aunque las etiquetas cambien. La primera es cuántos colores conservar. En el convertidor de PNG a SVG, Modo de color permite elegir entre Color, Escala de grises y Blanco y negro, y Número de colores define en cuántos grupos se reparten los píxeles, de 2 a 64. Ajústelo al número que anotó. Un valor demasiado alto hace que el vectorizador separe los píxeles suavizados de los bordes en colores finos propios, que aparecen como un halo tenue alrededor de cada forma; uno demasiado bajo fusiona dos colores de marca en uno.

La segunda pregunta es cómo tratar los bordes. Suavizado redondea los escalones que dejan los píxeles, y Detalle decide qué tan pequeña puede ser una mota para convertirse aun así en forma. La página de PNG parte de Detalle 70 y Suavizado 40, lo que conserva las esquinas pequeñas en una exportación limpia. Baje Detalle si aparecen polvo y puntos sueltos, suba Suavizado si las curvas se ven temblorosas, y ponga Curvas en Líneas rectas para logotipos geométricos hechos de bordes rectos o en Bordes de píxel para el pixel art que deba conservar su aspecto en bloques.

La tercera pregunta solo se aplica a la vectorización en blanco y negro: dónde trazar la frontera entre tinta y papel. Umbral va de 1 a 254, con 128 por defecto. Los píxeles más oscuros que el umbral pasan a negro y los más claros quedan vacíos. Para una firma hecha con un bolígrafo azul de punta fina, súbalo hacia 160–180 para que sobrevivan los trazos tenues; para un dibujo con marcador grueso sobre papel ligeramente gris, bájelo hacia 100 para que la textura del papel no se convierta en motas. Cambie un ajuste cada vez y compare, porque los efectos se influyen entre sí.

No se quede en la miniatura. Abra el SVG en un navegador y amplíe al 400–800 % sobre la curva más cerrada, el ojo de una letra o el extremo de una punta. Un buen trazado muestra arcos suaves y esquinas nítidas donde el diseño tiene esquinas; uno débil muestra ondulaciones, abolladuras y puntas redondeadas. Después, abra el archivo en un editor vectorial como Inkscape, Illustrator o Figma y active la vista de contornos o de nodos. Un logotipo sencillo de dos colores suele necesitar unos pocos cientos de nodos; si el suyo tiene varios miles, el vectorizador siguió el ruido y los trazados serán un suplicio de editar o cortar.

El peso del archivo es una comprobación rápida. Un SVG optimizado de un logotipo plano suele pesar entre unos pocos kilobytes y unas pocas decenas de kilobytes, a menudo menos que el PNG de origen. Un archivo vectorizado que pesa varias veces más que el PNG suele indicar demasiados colores, demasiado detalle o una foto que no debió vectorizarse. Mantenga activado Optimizar SVG, que redondea coordenadas y combina trazados sin cambios visibles, y por último escale el diseño a tamaño póster y a tamaño favicon para confirmar que se lee bien en ambos.

La opción de escritorio gratuita es Inkscape. Importe el PNG, selecciónelo y abra Trayecto > Vectorizar mapa de bits (Mayús+Alt+B). Los modos de un solo escaneo, como Corte de luminosidad, producen un único trazado negro, adecuado para dibujos lineales; los modos de escaneo múltiple vectorizan un número fijo de colores o grises como capas superpuestas. La vectorización en blanco y negro de Inkscape se basa en Potrace, una biblioteca de vectorización que Peter Selinger publicó en 2001. Potrace en sí es un programa de línea de comandos que lee PBM, PGM, PPM o BMP en lugar de PNG, solo maneja imágenes de dos tonos y escribe SVG, PDF, EPS o DXF, lo que lo hace ideal para automatizar grandes lotes de escaneos.

En Adobe Illustrator, Calco de imagen sustituyó al antiguo Calco interactivo en Illustrator CS6. Coloque el PNG, abra Ventana > Calco de imagen y parta de un ajuste preestablecido como Logotipo en blanco y negro, 3 colores o 16 colores; luego ajuste Trazados, Esquinas y Ruido en la sección avanzada. El calco sigue activo hasta que se hace clic en Expandir, que lo convierte en trazados editables normales. Si no tiene ninguno de los dos programas instalado, un convertidor en el navegador ejecuta el mismo proceso de reducir colores, detectar bordes y ajustar curvas; el convertidor de imagen a SVG también acepta JPG, WebP y HEIC y puede generar EPS, PDF o DXF en lugar de SVG.

En la web, SVG es Recomendación del W3C desde 2001 y todos los navegadores actuales lo muestran en una etiqueta <img>, como fondo CSS o insertado en el HTML, donde sus colores pueden incluso cambiar al pasar el cursor. Un logotipo vectorizado suele sustituir varios tamaños de PNG para pantallas retina con un solo archivo liviano. Para las máquinas de corte, SVG es el formato que esperan Cricut Design Space y Silhouette Studio: cada forma vectorizada se vuelve una ruta de corte, y un trazado multicolor llega como capas separadas que se pueden cortar en vinilos de distintos colores. Las cortadoras láser y el software CNC suelen preferir DXF, que PNG a DXF genera con los mismos ajustes de vectorización.

Las imprentas piden diseños vectoriales porque una prensa, un digitalizador de bordado o un plóter de rótulos necesita bordes, no píxeles, y un SVG vectorizado muchas veces basta para pegatinas, camisetas o un banner. Aun así, es una aproximación: las curvas son deducciones ajustadas, los colores son promedios de píxeles y el texto queda convertido en contornos. Por eso, antes de vectorizar el logotipo de una empresa, pregunte a quien lo hizo. Un diseñador o una agencia casi siempre tiene el AI, EPS, PDF o SVG original con curvas exactas, colores definidos y fuentes, y enviarlo le lleva un minuto. Vectorizar es la herramienta adecuada cuando ese original se perdió, cuando el logotipo solo sobrevive en un membrete escaneado o cuando el dibujo es de su autoría.