De PNG a Vector Drawable de Android: lista de importación

Android Studio no vectoriza un PNG para convertirlo en trazados. Su herramienta Vector Asset Studio importa archivos SVG o PSD y convierte la geometría compatible en XML VectorDrawable. Por eso, un flujo fiable para PNG tiene dos etapas: vectorizar los píxeles para obtener un SVG real e importar después ese SVG en Android Studio.

Un convertidor directo de PNG a VectorDrawable puede combinar ambas etapas. Puede resultar práctico para un icono sencillo, pero siguen siendo necesarias las mismas comprobaciones. Confirma que el resultado contiene trazados, coincide con la fuente, utiliza el área de visualización prevista y evita las funciones que el importador de Android no puede representar.

Para una interfaz Flutter, sigue el flujo de recursos SVG de Flutter. Declara y renderiza el SVG mediante flutter_svg en lugar de convertirlo en XML VectorDrawable nativo de Android.

Para un proyecto .NET MAUI, utiliza la lista de comprobación de recursos de imagen de MAUI para verificar la fuente, el resultado de la compilación y el tamaño de visualización. Sigue el flujo de imágenes de ese proyecto antes de aplicar los pasos de importación nativa de VectorDrawable de Android.

El flujo de trabajo resumido

1. Empieza con un PNG limpio de tipo icono, en lugar de una fotografía o textura.
2. Vectorízalo a SVG y confirma que el archivo contiene trazados editables, no un PNG incrustado.
3. Simplifica las formas sueltas y el exceso de nodos sin cambiar la silueta.
4. Importa el SVG mediante Vector Asset Studio de Android Studio.
5. Revisa el XML generado para comprobar el área de visualización, los trazados, los rellenos, los trazos, los degradados y el recorte.
6. Prueba el drawable a su tamaño real en la versión más antigua de Android que admita tu aplicación.

Elige entre un convertidor directo y la vía SVG

Las dos vías llegan al mismo destino, pero ofrecen puntos de comprobación distintos.

La vía con SVG intermedio suele ser más fácil de auditar. Puedes comparar la vectorización con el PNG, revisar formas individuales, reparar huecos y reducir la complejidad de los trazados antes de que Android Studio vuelva a traducir el archivo.

Los convertidores directos no son necesariamente una mala opción. Por ejemplo, SVG2Vector anuncia actualmente la conversión de PNG a VectorDrawable junto con SVG y otros formatos de entrada. Considera su XML como un candidato, no como un recurso terminado: previsualízalo en Android Studio, revisa los trazados y realiza las mismas comprobaciones en dispositivos que se describen a continuación (SVG2Vector).

Etapa 1: convierte el PNG en trazados SVG reales

Empieza con la fuente más limpia disponible. Los iconos planos con bordes claros y una paleta limitada son buenos candidatos. Las fotografías, las sombras suaves, los resplandores y la textura pueden generar muchas formas pequeñas sin convertirse en recursos útiles para Android.

Utiliza la resolución original del PNG. Ampliar un icono borroso añade píxeles, no la información que falta en los bordes. Elimina cualquier rectángulo de fondo accidental y decide antes de vectorizar si el recurso previsto es monocromo, multicolor o basado en degradados.

Vectoriza los píxeles

Sube la fuente al convertidor de PNG a SVG de PerfectVector o utiliza otra herramienta de vectorización que permita revisar el resultado. Si la fuente está en un teléfono y primero necesitas un SVG estándar, sigue el flujo de SVG en un teléfono Android. Compara el SVG con el PNG al tamaño previsto para la interfaz, ábrelo después en un editor vectorial y selecciona las formas.

Comprueba que haya:

• una silueta exterior limpia;
• huecos y espacios negativos conservados;
• el número previsto de regiones de color;
• ausencia de motas sueltas o de un recuadro de fondo;
• curvas suaves sin cadenas densas de puntos;
• un viewBox que encuadre correctamente el gráfico.

La extensión .svg no demuestra que se haya realizado una vectorización. SVG puede contener imágenes raster mediante un elemento <image>, según la especificación de contenido incrustado del W3C. Si el gráfico se selecciona como un solo rectángulo o se pixela al ampliar mucho, utiliza el diagnóstico de imágenes raster incrustadas antes de pasar a Android Studio.

Simplifica solo cuando resulte útil

La complejidad de los trazados importa porque Android debe analizar y dibujar la geometría generada. No existe una cifra universal de nodos. Una curva sencilla con decenas de puntos muy juntos merece una revisión; un borde irregular de una ilustración puede necesitar más puntos.

Elimina fragmentos aislados y simplifica las cadenas de puntos claramente innecesarias mientras comparas el resultado con la fuente. Si la limpieza cambia las esquinas o cierra huecos pequeños, deshazla. La guía sobre SVG con demasiados nodos explica cómo distinguir los detalles útiles del exceso de puntos en los trazados.

Dos conversiones, tres comprobaciones

Etapa 2: importa el SVG en Android Studio

El flujo actual de Vector Asset Studio de Android acepta un archivo SVG o PSD local, lo previsualiza y genera un drawable vectorial XML (Android Developers).

1. En la ventana Project, haz clic con el botón derecho en la carpeta res.
2. Elige New > Vector Asset.
3. Selecciona Local file (SVG, PSD) como tipo de recurso.
4. Elige el SVG y revisa la vista previa para detectar errores o cambios visibles.
5. Define el nombre del recurso y el tamaño previsto.
6. Continúa con Next, confirma el destino y selecciona Finish.

El recurso generado debe guardarse como XML entre los recursos drawable de la aplicación. Conserva el SVG revisado como maestro editable. Si más adelante necesitas un cambio visual, edita el SVG y vuelve a generar el drawable, en lugar de mantener manualmente dos versiones independientes.

¿Qué se conserva al importar de SVG a VectorDrawable?

VectorDrawable no es un renderizador SVG completo. Vector Asset Studio admite un subconjunto definido, así que un SVG puede verse bien en un navegador y aun así cambiar durante la importación.

Estos límites proceden de la tabla actual de compatibilidad de Vector Asset Studio. El importador también indica que solo admite trazos centrados. Si la fuente utiliza un trazo interior o exterior, conviértelo en una forma rellena o redibuja el borde antes de importar.

Los degradados necesitan una comprobación adicional de versiones. La API de VectorDrawable documenta valores de degradado o de lista de estados de color para fillColor y strokeColor desde el nivel de API 24. También documenta las opciones evenOdd y nonZero de fillType desde el nivel de API 24 (referencia de la API de VectorDrawable). Si tu aplicación admite versiones anteriores, prueba la vía de compatibilidad exacta que utiliza tu compilación en lugar de suponer que la vista previa de Android Studio resuelve la cuestión.

Lee el XML generado antes de aceptarlo

No necesitas escribir a mano el XML VectorDrawable, pero una revisión estructural rápida detecta muchos problemas de importación.

Anchura, altura y área de visualización

El elemento raíz <vector> separa el tamaño de visualización de las coordenadas de dibujo:

• android:width y android:height son las dimensiones predeterminadas del drawable, normalmente en dp;
• android:viewportWidth y android:viewportHeight definen el espacio de coordenadas que utilizan los trazados.

Cambiar solo la anchura y la altura escala la misma geometría. Cambiar el área de visualización modifica cómo se corresponden las coordenadas del trazado con esa región visible. Si el icono aparece recortado, con márgenes o estirado, compara estos cuatro valores con el viewBox del SVG y el tamaño previsto del recurso.

Trazados y pintado

Cada <path> contiene android:pathData, cuyos comandos siguen la misma sintaxis general de trazados que el atributo d de SVG. Revisa fillColor, strokeColor, strokeWidth, los extremos de línea, las uniones de línea y fillType cuando estén presentes.

No optimices eliminando comandos de trazado que no conozcas. Compara primero la vista previa con la fuente y después simplifica en el maestro SVG, donde resulta más fácil revisar la forma.

Grupos y recorte

Los grupos pueden incluir valores de traslación, escala, rotación y pivote. Un <clip-path> limita la geometría visible. Si el resultado está desplazado o desaparece una región enmascarada, revisa la jerarquía de grupos y compárala con las transformaciones y la estructura de recorte del SVG de origen.

Prueba el drawable donde lo utilizará la aplicación

La vista previa de importación demuestra que Android Studio ha analizado el archivo. No demuestra que el recurso sea correcto en tiempo de ejecución.

Utiliza esta lista de aceptación:

• El drawable coincide con la silueta prevista del PNG al tamaño normal de interfaz.
• Los huecos, los espacios interiores y las regiones superpuestas siguen siendo correctos.
• Los rellenos y trazos sólidos utilizan los colores previstos.
• Los degradados se renderizan correctamente en la versión más antigua de Android admitida.
• El área de visualización conserva los márgenes y la relación de aspecto previstos.
• El icono sigue siendo legible en los estados claros, oscuros, desactivados y tintados que utiliza la aplicación.
• El XML no contiene fragmentos accidentales ni una cantidad claramente excesiva de datos de trazados.
• El recurso se prueba en el componente real, no solo en la vista previa de importación.
• Se conservan archivados el PNG original y el maestro SVG editable.

Prueba al tamaño real en dp al menos en un emulador o dispositivo que represente la versión mínima admitida. Comprueba también cualquier estado o tema que cambie el tinte. Un trazado técnicamente válido puede seguir fallando cuando sus márgenes, peso visual o supuestos de color difieren del conjunto de iconos que lo rodea.

Si conviertes una familia completa, aplica primero este proceso a una muestra representativa. El flujo de conversión de kits de interfaz trata las áreas de visualización compartidas, el tamaño óptico, el comportamiento del color y las comprobaciones de entrega del conjunto.

Cuándo conservar el PNG

VectorDrawable funciona mejor con iconos e ilustraciones sencillos. La guía de Android advierte que los gráficos detallados, incluidas muchas imágenes de lanzamiento de aplicaciones, pueden funcionar mejor como recursos raster. También indica que el coste inicial de carga de un drawable vectorial puede ser mayor que el de una imagen raster y recomienda mantener los recursos vectoriales en 200 por 200 dp o menos para evitar tiempos de dibujo largos (Android Developers).

Conserva o rediseña la imagen raster cuando la fuente dependa de:

• detalles fotográficos;
• textura suave, desenfoque o sombras complejas;
• muchas regiones de color diminutas;
• un efecto no compatible que defina su aspecto;
• una geometría tan densa que dificulte la revisión y el mantenimiento del XML.

El objetivo no es sustituir todos los PNG. Es utilizar VectorDrawable donde la geometría de trazados escalable haga el recurso Android más pequeño, más claro o más fácil de adaptar a temas, sin convertir una imagen detallada en un costoso montón de trazados.

Cómo se aplica este proceso con PerfectVector

PerfectVector se encarga de la primera conversión. Para un icono adecuado, convierte el PNG a SVG, compara las formas vectorizadas con la fuente y descarga el SVG que quieras conservar como maestro editable. Después importa ese archivo mediante Vector Asset Studio y audita el XML generado.

Evalúa el resultado de toda la cadena:

1. ¿Ha conservado la vectorización la silueta y los huecos de la fuente?
2. ¿Son editables las formas SVG y no contienen una imagen raster incrustada?
3. ¿Importa Android Studio los rellenos, degradados, recortes y transformaciones necesarios?
4. ¿Se renderiza correctamente el drawable a su tamaño real y en el nivel mínimo de API?

Un SVG limpio mejora la entrega, pero no hace que funcionen las características de Android que no son compatibles. Simplifica el diseño o conserva el PNG cuando el destino no pueda reproducir fielmente el aspecto.

Preguntas frecuentes

¿Puede Android Studio convertir un PNG directamente a VectorDrawable? No. La versión actual de Vector Asset Studio importa archivos SVG o PSD locales, no archivos PNG. Vectoriza primero el PNG para obtener un SVG real o utiliza un convertidor directo y audita el XML resultante en Android Studio.

¿Es un SVG siempre un vector real? No. SVG puede incrustar contenido raster mediante un elemento de imagen. Abre el archivo en un editor vectorial o revisa su código y confirma que el gráfico previsto está formado por trazados u otras formas vectoriales antes de importarlo.

¿Funcionan los degradados SVG en VectorDrawable de Android? Vector Asset Studio admite degradados lineales, radiales y angulares, pero la compatibilidad en tiempo de ejecución depende del XML generado y de tu estrategia de versiones de Android. La API de VectorDrawable documenta colores de relleno y trazo con degradados desde el nivel de API 24, así que prueba el recurso en la versión más antigua que admita tu aplicación.

¿Por qué cambiaron los huecos, las máscaras o el texto después de importar? El importador admite un subconjunto limitado de SVG. Las reglas de relleno requieren pruebas según la versión, el recorte es limitado y el texto no es compatible. Convierte en contornos el texto necesario, simplifica las estructuras de recorte y compara la vista previa de Android con el SVG antes de aceptar el drawable.

¿Debe convertirse cada PNG de una aplicación Android en XML VectorDrawable? No. Los iconos y las ilustraciones sencillos son los mejores candidatos. Conserva fotografías, imágenes con mucha textura, efectos complejos y gráficos demasiado detallados como recursos raster, salvo que un redibujado deliberado produzca una geometría de trazados más sencilla.

Fuentes

1. Android Developers — Añadir gráficos vectoriales para múltiples densidades — Documenta el flujo de importación de SVG y PSD de Vector Asset Studio, el subconjunto SVG compatible, las advertencias de rendimiento y los recursos drawable generados.
2. Android Developers — Referencia de la API de VectorDrawable — Define los atributos XML de vector, path, group y clip-path, incluidos el área de visualización, el pintado, las reglas de relleno y el comportamiento según el nivel de API.
3. W3C — Contenido incrustado de SVG — Confirma que SVG puede contener imágenes raster mediante el elemento image.
4. Manual de Inkscape — Vectorizar una imagen — Explica la diferencia entre vectorizar píxeles raster y trabajar con el mapa de bits original.
5. SVG2Vector — Conversión de PNG a VectorDrawable — Presenta la vía actual de conversión directa que se analiza en la comparación de flujos de trabajo.

---

¿Listo para probar un icono de producción? Convierte el PNG a SVG, revisa los trazados e importa después el archivo revisado en Android Studio. Conserva el drawable solo cuando su área de visualización, colores, huecos y renderizado en tiempo de ejecución superen la lista de comprobación.