Convierte iconos PNG a SVG para un kit de interfaz coherente

No conviertas toda la carpeta de una vez. Empieza con un pequeño grupo que incluya el icono más sencillo, el más recargado, una forma curva y cualquier icono con un hueco. Define las reglas SVG con esa muestra y aplícalas después al resto del conjunto. Así detectarás malas decisiones de vectorización antes de que se propaguen a decenas de archivos.

La conversión en sí es solo un paso. Un kit de interfaz útil también necesita un sistema de coordenadas compartido, un tamaño óptico uniforme, un comportamiento predecible del color, trazados editables y una comprobación de entrega en el producto que utilizará los iconos.

El flujo de trabajo resumido

1. Haz un inventario del conjunto PNG e identifica duplicados o fuentes que falten.
2. Elige iconos representativos y define la cuadrícula común, los márgenes, el modelo de relleno o trazo y las reglas de color.
3. Convierte los iconos de muestra en trazados reales.
4. Revisa la silueta, los nodos, los espacios negativos y las regiones de color.
5. Unifica el conjunto en un editor vectorial y convierte y revisa después los iconos restantes.
6. Prueba los SVG exportados en la interfaz real y en el flujo real de procesamiento de recursos.

Decide qué iconos PNG deben convertirse en SVG

Los iconos planos con límites claros son buenos candidatos para vectorizar. Otras imágenes necesitan una vía diferente. Clasifica la carpeta antes de abrir un convertidor.

Si la fuente que te queda es un contenedor de iconos en lugar de un PNG, recupérala primero mediante el flujo correspondiente de ICO a SVG o de ICNS a SVG. Después, unifica el gráfico resultante con las mismas reglas del kit de interfaz que se describen a continuación.

Que un archivo tenga extensión SVG no demuestra que los píxeles se hayan convertido en trazados vectoriales. El formato puede contener una imagen raster incrustada mediante un elemento <image>, como explica la especificación de contenido incrustado de SVG. Si un archivo exportado sigue seleccionándose como una sola imagen rectangular o se pixela al ampliar mucho, utiliza las comprobaciones de imágenes raster incrustadas antes de añadirlo al kit.

Define las reglas del kit de interfaz antes de vectorizar

Una carpeta de iconos que individualmente están bien puede seguir viéndose incoherente como conjunto. Escribe primero las reglas del conjunto, aunque los PNG originales todavía no las cumplan.

Elige un único espacio de coordenadas

Utiliza un mismo viewBox para los iconos que deban compartir tamaño de componente. Las cifras no tienen que ser 24 por 24 ni 16 por 16; deben corresponder a tu sistema. SVG adapta el rectángulo del viewBox al área de visualización, así que unas dimensiones externas idénticas solo ayudan si el gráfico se coloca de forma uniforme dentro de ellas. La especificación del sistema de coordenadas de SVG 2 define esa correspondencia.

Anota:

• el viewBox común;
• el centro visual y la línea de base previstos;
• el margen interior mínimo;
• qué partes pueden sobresalir intencionadamente de los límites ópticos habituales.

Elige un modelo de relleno o de trazo

Decide si la familia está formada por siluetas rellenas, trazos editables o una combinación documentada. Un conjunto de contornos basado en trazos necesita extremos, uniones y grosor aparente coherentes. Un conjunto relleno necesita espacios negativos y un tratamiento de los bordes uniformes. La vectorización puede convertir un trazo fino en un contorno cerrado, así que revisa la geometría en lugar de fiarte de la vista previa.

Decide cómo se controlará el color

Para un sistema de un solo color, utiliza una regla repetible que el destino pueda asociar a su token de color para iconos. Para iconos multicolor, define la paleta permitida y qué regiones pueden cambiar. No conserves pequeñas variaciones de color casi idénticas producidas por el suavizado de bordes, salvo que cumplan una función visible.

Convierte primero una muestra representativa

Elige entre cuatro y seis iconos que revelen los casos difíciles. Incluye un círculo o arco, una diagonal, un pequeño espacio interior o hueco y el icono más denso de la familia. Si el conjunto utiliza varios colores, incluye también uno de esos iconos.

1. Prepara los PNG

Utiliza la exportación más limpia disponible. Elimina rectángulos de fondo accidentales, recorta de forma uniforme y evita ampliar una fuente pequeña y borrosa solo para crear más píxeles. La guía de preparación para convertir PNG a SVG sin perder calidad explica los detalles específicos de la vectorización.

Guarda una copia intacta de cada original. Es más fácil evaluar la limpieza cuando puedes comparar el SVG con la fuente en lugar de recurrir a la memoria.

2. Vectoriza los iconos de muestra

Utiliza un vectorizador automático o la herramienta de vectorización de tu programa de diseño. El flujo actual de Image Trace de Illustrator ofrece controles de color, trazados, esquinas y ruido. La función Vectorize actual de Figma ofrece modos de color después de vectorizar y advierte que las imágenes complejas o de baja resolución pueden no vectorizarse bien (Image Trace de Adobe; Vectorize de Figma).

Para hacerlo en el navegador, sube la muestra al convertidor de PNG a SVG de PerfectVector. Compara la vista previa con el original, revisa las formas y las regiones de color y descarga después el SVG que quieras unificar en tu editor vectorial. Procesa el grupo representativo antes de comprometerte con el resto de la carpeta.

Si Figma es el editor principal de tu kit, el flujo de Vectorize de Figma frente al de SVG externos te ayuda a comparar ambas vías con la misma muestra. Evalúa las formas después de importarlas, incluidos los huecos y las regiones de color que necesites editar.

3. Revisa los trazados, no solo la vista previa

Abre cada resultado en un editor vectorial y selecciona las formas. Los trazados SVG se construyen con comandos y coordenadas, incluidos segmentos de líneas y curvas definidos en la especificación de trazados de SVG 2. Necesitas suficientes nodos para conservar la silueta, sin una cifra objetivo universal.

Busca:

• cadenas densas de nodos alrededor de una curva sencilla;
• motas sueltas o rectángulos de fondo;
• copias superpuestas del mismo borde;
• pequeños fragmentos de color causados por el suavizado de bordes;
• huecos o espacios interiores que se hayan cerrado durante la vectorización;
• un único rectángulo raster en lugar de trazados seleccionables.

Si una forma sencilla está saturada de puntos, utiliza el diagnóstico de exceso de nodos antes de simplificarla. Una limpieza agresiva puede desplazar esquinas y cerrar espacios pequeños, así que compara el trazado editado con el PNG.

Unifica los iconos como una sola familia

Cuando la estructura de las vectorizaciones de muestra sea correcta, colócalas en la cuadrícula compartida y revísalas juntas. Aquí es donde un conjunto se convierte en un sistema.

Revisión del conjunto

Revisa el conjunto a su tamaño real de interfaz y con una ampliación mayor para editar:

Se permiten correcciones ópticas. Un círculo puede necesitar sobresalir un poco del cuadro que contiene un cuadrado para que ambos parezcan del mismo tamaño. La regla es una percepción coherente, respaldada por una cuadrícula documentada, en lugar de obligar a todas las formas a tener límites geométricos idénticos. El flujo para crear tarjetas de horarios visuales imprimibles aplica esta distinción a los recuadros de imágenes, las etiquetas separadas y una página PDF con medidas definidas.

Para un conjunto de imágenes de rutinas que necesite modificaciones de formas antes de maquetar las tarjetas, utiliza el convertidor de gráficos para apoyos visuales con un dibujo representativo. Mantén las etiquetas separadas y comprueba que la imagen convertida siga transmitiendo el significado previsto.

Cómo se aplica este proceso con PerfectVector

PerfectVector encaja en la etapa de vectorización, entre la preparación de las fuentes y la unificación del conjunto. Utilízalo para reconstruir una muestra PNG representativa como formas vectoriales editables y después evalúa el resultado según los criterios que importan para este kit:

1. ¿Conserva cada icono su silueta y sus espacios negativos?
2. ¿Puedes seleccionar y cambiar el color de las regiones previstas?
3. ¿Utilizan las curvas un conjunto manejable de nodos?
4. ¿Es más fácil unificar el resultado que una vectorización manual o realizada con la herramienta integrada de la aplicación?

Si la muestra supera la prueba, convierte los PNG restantes que sean adecuados e incorpóralos al mismo archivo maestro para revisar el conjunto. Si no la supera, cambia la fuente o el método de vectorización antes de procesar más iconos. PerfectVector no sustituye las decisiones de alineación óptica y nombres que corresponden al sistema de diseño.

Limpia sin perder la fuente

Conserva dos capas de archivos:

• Archivo de fuentes: PNG intactos, cualquier archivo de diseño original y notas sobre su procedencia.
• Maestro editable: iconos vectoriales unificados en la cuadrícula compartida.
• Exportaciones de entrega: SVG optimizados que utiliza el producto.

Modifica las formas en el maestro y después vuelve a generar los archivos de entrega. Evita editar manualmente exportaciones separadas, porque las correcciones acabarán divergiendo entre copias. Si un SVG necesita cambios de color, de forma o de lienzo, utiliza el flujo de edición de SVG y devuelve la geometría corregida al conjunto maestro.

Cuando la entrega utilice iconos web reutilizables, sigue el flujo de sprites con símbolos SVG una vez aprobado el gráfico. Comprueba los identificadores de símbolos, las referencias anidadas, los límites de coordenadas, las reglas de pintado y los nombres de instancia antes de introducir el conjunto en la aplicación. Si la interfaz dibuja los iconos en canvas, lleva los trazados SVG a canvas con Path2D y verifica la transformación de coordenadas, los colores, los huecos y la resolución del búfer de dibujo con respecto al maestro SVG.

Si Penpot es el destino de la biblioteca de diseño, inserta un SVG de muestra en el lienzo y prueba una región de color y un contorno antes de añadir el resto del kit. La guía de importación de SVG en Penpot distingue entre importar archivos de proyecto e insertar gráficos, y explica cómo comprobar formas nativas, contenido SVG sin procesar y etiquetas editables. Así detectas un icono que se ve correcto, pero no permite las modificaciones que necesita el kit.

Antes de la entrega, prueba algunos iconos en todos los entornos importantes: la biblioteca de diseño, el componente de la aplicación y cualquier paso de compilación u optimización. Comprueba los estados desactivados y de color invertido si el sistema los utiliza. Un archivo estructuralmente limpio puede seguir fallando en el kit si sus supuestos de color o tamaño no coinciden con el componente. Si el destino es Android, utiliza la lista de comprobación de importación de PNG a VectorDrawable para verificar el tamaño del área de visualización, los rellenos, la complejidad de los trazados y la compatibilidad del importador antes de incorporar el recurso a la aplicación. Para proyectos de Godot, utiliza la lista de comprobación de importación de SVG en Godot para elegir el tipo de importación de textura y verificar el tamaño raster, el sobremuestreo y los gráficos compatibles. Para proyectos de Unity, utiliza la lista de comprobación de importación de SVG en Unity para elegir un importador compatible con el editor y verificar el destino en UI Toolkit o como sprite.

Para proyectos de SwiftUI, consulta el flujo de catálogo de recursos y renderizado de SVG para confirmar el recurso de imagen con nombre, el comportamiento del color original o de plantilla y el tamaño final de visualización.

Lista de comprobación para entregar el kit de interfaz

• Cada icono vectorizado procede de la fuente más limpia disponible.
• Los iconos comparten las reglas documentadas de viewBox, márgenes y alineación.
• El tamaño óptico y el peso aparente son uniformes al tamaño real de la interfaz.
• Los iconos rellenos y los de trazo siguen el modelo definido por el sistema.
• Las regiones de color se corresponden de forma predecible con la paleta aprobada o la regla de tokens.
• Las curvas utilizan suficientes nodos para conservar la fidelidad sin saturar innecesariamente los trazados.
• Ningún SVG contiene una imagen raster incrustada por accidente, un recuadro de fondo ni un borde duplicado.
• Los nombres de archivos y componentes son únicos y estables.
• El conjunto exportado se ha probado después del paso habitual de optimización del producto.
• El archivo de fuentes, el maestro editable y los archivos de entrega se guardan por separado.

Preguntas frecuentes

¿Puedo convertir por lotes todos los iconos PNG antes de limpiarlos? Puedes, pero una muestra representativa es más segura. Convierte unos cuantos iconos que abarquen las formas más difíciles del conjunto, establece las reglas de cuadrícula y trazados y solo entonces procesa el resto. De lo contrario, una mala decisión de vectorización puede provocar tareas de limpieza repetitivas en toda la carpeta.

¿Deben utilizar todos los iconos SVG el mismo viewBox? Los iconos que comparten un componente de interfaz suelen beneficiarse de un mismo viewBox, pero el gráfico interior puede necesitar ajustes ópticos. Mantén uniforme el espacio de coordenadas y permite que los círculos, las formas puntiagudas o los iconos especialmente densos utilicen salientes o cambios de margen documentados.

¿Cuántos nodos debe tener un icono de interfaz? No existe una cifra universal. Utiliza el menor número de nodos que conserve la silueta, las esquinas y los espacios negativos previstos. Compara iconos de complejidad similar e investiga cualquier curva sencilla que contenga una cadena densa de puntos.

¿Debo conservar los iconos PNG después de terminar el conjunto SVG? Sí. Guarda los PNG originales y cualquier fuente de diseño anterior en un archivo. Aportan información sobre la procedencia y una referencia visual cuando haya que repetir una vectorización. Utiliza el maestro vectorial unificado para las modificaciones y genera los SVG de entrega a partir de él.

Fuentes

1. W3C — Sistemas de coordenadas, transformaciones y unidades de SVG — Define las áreas de visualización SVG, los sistemas de coordenadas, viewBox y la correspondencia del gráfico con una región visible.
2. W3C — Trazados SVG — Define los comandos de líneas y curvas que forman la geometría editable de los trazados SVG.
3. W3C — Contenido incrustado de SVG — Confirma que SVG puede contener imágenes raster en lugar de trazados vectoriales.
4. Adobe Illustrator — Vectorizar imágenes con Image Trace — Documenta el flujo actual de vectorización de imágenes raster y la salida de trazados editables.
5. Figma Learn — Convertir imágenes estáticas en capas vectoriales — Documenta el flujo actual de Vectorize de Figma, los modos de color y las limitaciones de las imágenes de origen.

---

Empieza con unos pocos de los iconos más difíciles, no con toda la carpeta. Convierte los PNG de muestra a SVG, revisa sus trazados y regiones de color y después unifica el mejor resultado con las reglas del kit de interfaz antes de ampliar el flujo de trabajo.