Importar SVG en Unity: prepara gráficos para UI Toolkit o sprites

La importación SVG en Unity empieza con dos decisiones: qué versión del editor utilizas y dónde aparecerá el gráfico. Unity 6.3 incluye importación SVG para UI Toolkit y Texture2D. Las importaciones directas de SVG como recursos Sprite o uGUI utilizan el paquete Vector Graphics; los editores anteriores utilizan la línea anterior del paquete. Unity documenta esta división en su guía de versiones de Vector Graphics.

Si ya tienes un SVG editable, prepara ese archivo para el importador. Si tu única fuente es un PNG o JPG, vectorízala solo cuando necesites formas vectoriales. Una textura o sprite de pixel art puede seguir siendo ráster.

Prueba un icono representativo para distinguir problemas del gráfico de origen de los de importación y visualización en Unity antes de procesar todo un conjunto.

Para geometría de escena en otro motor, utiliza las comprobaciones de importación SVG de Unreal Engine para revisar formas de origen, aberturas y piezas separadas de Motion Design.

Elige la vía de importación antes de editar el gráfico

Utiliza el componente de destino para elegir la vía. Un recurso que funciona en una disposición de UI Toolkit no pertenece automáticamente a un campo de Sprite Renderer.

La tabla sigue los requisitos del paquete de Unity. Fija las versiones del editor y paquete que utiliza el proyecto. Las instrucciones para Unity 2018 o un importador preliminar 2.0 pueden describir opciones distintas de las de un proyecto 6.3 actual.

Elige primero el destino

Conserva una pequeña prueba de importación junto al gráfico

Elige un icono con una curva, un hueco interior y cualquier efecto de pintado que necesite el conjunto. Conserva el SVG original junto a una versión sencilla hecha de formas sólidas. Si la versión sencilla se importa correctamente, investiga el gráfico complejo antes de cambiar todo el proyecto.

Prepara un SVG que el importador pueda reproducir

Abre la fuente en un editor vectorial y revisa los objetos reales. Conserva el maestro original y crea después una exportación independiente para entregar a Unity.

Confirma que el gráfico contiene trazados

Un SVG puede contener un mapa de bits mediante un elemento <image>; la extensión por sí sola no demuestra que el gráfico sea geometría vectorial. La especificación de contenido incrustado del W3C documenta esta distinción. Selecciona una parte del gráfico en un editor y revisa sus objetos o código. Utiliza el diagnóstico de imágenes ráster incrustadas si es un único rectángulo de imagen.

Si existe el archivo vectorial original, vuelve a exportarlo. Vectorizar un PNG exportado desde ese maestro añade trabajo de reconstrucción y puede cambiar la silueta. Para una familia de iconos, acuerda primero el lienzo, los márgenes y el peso visual; la guía de preparación SVG para kits de interfaz trata esas decisiones de conjunto.

Sustituye deliberadamente las funciones no compatibles

El importador nativo de Unity admite parte de SVG 1.1. Sus exclusiones documentadas incluyen texto editable, máscaras de píxeles, filtros, interacción y animación. Por eso, una vista previa en el navegador puede verse bien mientras el resultado en Unity difiere. Consulta las limitaciones SVG de Unity.

Prepara la copia de entrega según lo que necesite el gráfico:

• Convierte las letras decorativas en contornos. Mantén las etiquetas de interfaz como texto de la interfaz cuando necesiten edición o traducción.
• Reconstruye una sombra o resplandor necesario con un efecto compatible con el destino, o conserva ese gráfico como ráster.
• Revisa las máscaras por separado de los trazados de recorte. Una máscara suave de píxeles y un recorte geométrico son construcciones distintas.
• Planifica la animación en Unity en lugar de depender de animación incrustada en el SVG.

No aplanes todos los degradados solo porque un filtro no sea compatible. Prueba el efecto que realmente utiliza el diseño. Si una insignia compleja falla, exporta una versión de rellenos sólidos y vuelve a añadir sus efectos de uno en uno. Así aíslas la función que cambia el aspecto.

Elimina complejidad accidental

Elimina motas sueltas, duplicados ocultos y rectángulos de fondo que no formen parte del icono. Simplifica una curva claramente ruidosa solo mientras la comparas con la fuente. Un hueco pequeño que se cierra durante la limpieza es una edición fallida, aunque el archivo se vuelva más corto.

No existe un objetivo universal de nodos útil para todos los gráficos de videojuegos. Una flecha geométrica y un personaje dibujado a mano necesitan cantidades de detalle distintas. La guía de limpieza de nodos SVG ayuda a decidir qué puntos aportan información de forma.

Importa en UI Toolkit en Unity 6.3 o posterior

Empieza con un SVG de entrega cuya silueta y efectos ya hayas revisado.

1. Añade el SVG a la carpeta Assets del proyecto y selecciónalo.
2. Establece Generated Asset Type en UI Toolkit Vector Image en el Inspector.
3. Aplica los ajustes de importación y utiliza la imagen vectorial resultante en el elemento UI Toolkit previsto.
4. Previsualiza la disposición real a sus tamaños de visualización mínimo y máximo previstos.

Unity documenta la elección del recurso nativo en Trabajar con gráficos vectoriales. Si el consumidor requiere Texture2D, selecciona esa salida y revisa la textura resultante al tamaño previsto.

Para UI Toolkit, empieza con los ajustes básicos recomendados de teselación. Target Resolution y Zoom Factor permiten al importador configurar la subdivisión de curvas para las condiciones previstas de visualización. Unity recomienda utilizar la resolución objetivo más baja que dé resultados satisfactorios. Sus ajustes de importación de imágenes explican los controles.

Mantén separadas dos revisiones: si el SVG describe la forma correcta y si el recurso importado muestra bien esa forma. Aumentar la teselación no puede restaurar un hueco que desapareció en la exportación de origen.

Importa para Sprite Renderer o uGUI

Instala el paquete com.unity.vectorgraphics compatible mediante Package Manager cuando el destino necesite su compatibilidad con Sprite o uGUI. Elige el recurso generado correspondiente para tu componente y confirma que este lo acepte. La documentación actual del paquete distingue esos tipos de importación de la vía integrada de UI Toolkit.

Para Sprite Renderer, verifica el tamaño del objeto en la escena y su pivote antes de copiarlo a prefabs. Para uGUI, verifica el flujo SVGImage que utiliza tu proyecto. Un flujo convencional de sprites ráster sigue siendo una alternativa cuando el gráfico ya se ve bien a las dimensiones necesarias.

El paquete anterior 2.0 documenta unidades SVG por unidad de escena, pivotes de sprites y controles de teselación. También identifica ese paquete como experimental y desaconseja su uso en producción. Los equipos que mantengan esa vía deben revisar el manual del paquete 2.0 junto con las restricciones del proyecto antes de añadirlo.

Si actualizas un proyecto existente, realiza la prueba de importación en una copia o rama con control de versiones. Compara los tipos de recursos generados y las referencias en prefabs y escenas reales. No utilices una miniatura correcta como única prueba de migración ni apliques una edición masiva de .meta de un mensaje antiguo de un foro sin reproducir su problema concreto.

Diagnostica la primera diferencia visible

Utiliza un registro breve de prueba para cada recurso representativo: archivo de origen, versiones de editor y paquete, componente de destino, tamaño visible esperado y primera diferencia visible.

Por ejemplo, supón que una insignia de estrella se importa, pero desaparece su hueco central. Abre primero el SVG de entrega y confirma que el hueco exista ahí. Si existe, compara una exportación simplificada de la insignia en Unity. Si el hueco se conserva en esa versión, revisa las formas superpuestas, la construcción del relleno o la máscara de la insignia original. Volver a vectorizar la fuente solo es útil si la propia geometría de trazados es incorrecta.

Prueba el recurso aceptado tanto en una compilación de destino como en el editor. Anota si sigue siendo legible al tamaño más pequeño, si los colores y la transparencia coinciden y si las referencias de escenas o prefabs sobreviven a una importación nueva. Las decisiones de rendimiento requieren medir tu propia escena; una extensión SVG no es una medición de rendimiento.

Cómo se aplica este proceso con PerfectVector

PerfectVector encaja antes de importar en Unity cuando tu única fuente adecuada es un gráfico ráster y necesitas formas editables. Sube un PNG o JPG de colores planos al convertidor de imagen a vector de PerfectVector, compara la silueta y huecos vectorizados con el original y después revisa el SVG descargado en un editor vectorial antes de importarlo en Unity.

Utiliza el mismo icono representativo durante toda la entrega. Acepta la vectorización solo cuando puedas editar las regiones previstas, los espacios negativos sigan abiertos y la limpieza no haya deformado la forma. Aplica después la prueba de destino de Unity descrita anteriormente.

Conserva como ráster una foto, textura, resplandor suave o sprite de pixel art deliberado cuando eso mantenga el aspecto previsto. Para un símbolo geométrico sencillo, el dibujo manual puede ser más fácil de controlar que la vectorización. PerfectVector prepara geometría de origen SVG; no cambia las funciones compatibles de Unity ni valida el renderizado en ejecución. Si no conoces la distinción de formatos, empieza por qué contiene un archivo SVG.

Preguntas frecuentes

¿Necesita Unity 6 el paquete Vector Graphics? La respuesta depende de la versión menor y del destino. Unity 6.3 tiene importaciones SVG integradas para UI Toolkit y Texture2D. Las importaciones Sprite y uGUI utilizan el paquete preliminar 3.0. Las versiones anteriores de Unity utilizan la vía del paquete preliminar 2.0 compatible.

¿Cambiar la extensión de un PNG a SVG crea un sprite vectorial? No. Cambiar el nombre del archivo no vectoriza sus píxeles. Utiliza la fuente vectorial original, dibuja las formas o vectoriza gráficos ráster adecuados y revisa los trazados resultantes antes de importar en Unity.

¿Puede la vectorización reparar un SVG que Unity importa incorrectamente? Solo cuando la geometría de origen necesite reconstrucción. Si el SVG contiene trazados correctos, pero el tipo de recurso generado equivocado o un efecto no compatible causa el problema, corrige primero esa decisión de importación o exportación.

Fuentes

1. Unity — Guía del paquete Vector Graphics 3.0 — Define la división por versión del editor y las vías integradas frente a las del paquete Sprite/uGUI.
2. Unity — Trabajar con gráficos vectoriales — Documenta las opciones de recursos nativos y las funciones SVG no compatibles.
3. Unity — Ajustes de importación de imágenes — Explica los ajustes de imágenes vectoriales de UI Toolkit y los controles de teselación.
4. Unity — Manual del paquete Vector Graphics 2.0 — Trata el importador anterior, los controles de unidades de escena y pivote y su estado experimental.
5. W3C — Contenido incrustado de SVG — Establece que un SVG puede incluir imágenes ráster.

---

Si tu recurso Unity parte de un PNG o JPG plano y necesita trazados editables, convierte la imagen con PerfectVector. Revisa la silueta, los huecos y las formas de fondo no deseadas y después prueba el SVG en el componente Unity y a los tamaños de visualización que pretendas publicar.