Importar SVG en Godot: Texture2D, DPITexture e iconos nítidos

La importación SVG en Godot normalmente convierte el SVG en píxeles cuando se importa el recurso. Por eso, ampliar esa textura puede verse borroso aunque la fuente contenga trazados vectoriales limpios. Para iconos SVG que necesitan adaptarse al escalado del área de visualización, el importador actual también ofrece DPITexture, que puede volver a rasterizar la fuente con otro factor de sobremuestreo. Godot documenta ambas vías en su guía de importación de imágenes.

Empieza por comprobar el recurso importado y cómo lo escala el proyecto. Volver a vectorizar un SVG que ya es válido no solucionará una textura de baja resolución estirada sobre una pantalla más grande.

Elige el tipo de importación SVG según el comportamiento de visualización

Las dos opciones siguientes describen los tipos de recurso del panel Import. DPITexture hereda de Texture2D, así que no son familias de clases independientes. La referencia de DPITexture también marca la clase como experimental; consulta la documentación que corresponda a la versión de Godot de tu proyecto antes de adoptarla.

La importación de texturas te proporciona un recurso de textura. Trata la edición de trazados, las formas de colisión y el rendimiento como requisitos independientes; una extensión SVG no demuestra que se haya resuelto ninguno. Para una escena en el navegador, compara las vías de geometría y textura de PixiJS para ver cómo el mismo SVG puede llegar al renderizador de otra manera.

La fuente SVG y sus píxeles renderizados

Comprueba primero una importación Texture2D predeterminada

Utiliza un recurso representativo antes de cambiar toda una carpeta de iconos. Elige una forma con un borde curvo, un hueco estrecho y cualquier detalle pequeño que importe en la interfaz.

1. Coloca el SVG en el proyecto y selecciónalo en el panel FileSystem.
2. Abre el panel Import y confirma que el tipo de importación sea Texture2D.
3. Revisa SVG > Scale y Process > Size Limit y vuelve a importar después de cambiar una opción.
4. Coloca la textura en el sprite o componente de interfaz previsto y comprueba su tamaño visible.

SVG > Scale cambia el tamaño de rasterización; un valor mayor crea una imagen más grande. También afecta al tamaño de la textura en 2D, así que revisa las dimensiones del nodo o de la disposición después de cambiarlo. Process > Size Limit puede limitar las dimensiones importadas. Ambos controles se describen en la referencia del importador de texturas.

Como ejemplo sencillo de tamaño, un raster de 32 píxeles de ancho mostrado sobre 128 píxeles de pantalla se está ampliando. Las curvas vectoriales de la fuente no añaden píxeles a ese raster ya importado. Genera una textura adecuada para ese uso o prueba DPITexture cuando el sobremuestreo encaje con la interfaz.

Evita aumentar la escala de todos los SVG con un multiplicador arbitrariamente grande. Establece primero el mayor uso real y revisa también el menor. Un recurso que se ve bien en una vista previa grande del inventario puede perder un hueco estrecho al mostrarse en un botón diminuto.

Utiliza DPITexture con los ajustes de sobremuestreo adecuados

Para probar la vía adaptable, selecciona el SVG en el panel FileSystem, cambia su tipo de importación a DPITexture y vuelve a importarlo. Reutiliza la misma colocación en la interfaz para que la comparación responda a una pregunta: ¿cambiar la vía de rasterización resuelve la diferencia a las escalas previstas?

DPITexture conserva los datos de origen SVG y puede producir un raster adaptado al sobremuestreo. Su base_scale controla la escala de la textura de origen; no convierte el recurso en trazados editables de la escena. Consulta la documentación de la clase DPITexture.

Hay dos casos de escalado que comprobar:

• Escalado del área de visualización: el sobremuestreo de imágenes de Godot puede volver a renderizar la fuente vectorial cuando cambia el factor de escala del área de visualización. Actívalo para un SVG importando esa imagen como DPITexture.
• Escalado del nodo: el sobremuestreo basado en Scale de un Node2D o Control está desactivado de forma predeterminada. Activa Oversampling with Scale en el nodo correspondiente cuando necesites ese comportamiento.

La guía de sobremuestreo de Godot explica esta distinción. También indica que los cambios frecuentes de escala pueden exigir trabajo de CPU porque la textura se vuelve a renderizar. Prueba el escalado animado en la escena que se publicará antes de aplicar ampliamente la opción.

El editor 2D puede volver a muestrear automáticamente al hacer zoom, lo que lo convierte en una vista previa útil. Ejecuta también el proyecto y prueba el comportamiento real de su área de visualización. Con el modo de estiramiento Viewport, la escena se dibuja primero al tamaño base del área de visualización y después se escala a la ventana; ese escalado final puede seguir determinando el aspecto de la interfaz. La documentación de modos de estiramiento describe la diferencia con el modo Canvas Items.

Prepara gráficos que Godot pueda reproducir

Cambiar el importador resuelve un problema de tamaño de renderizado. Los objetos ausentes o una silueta modificada necesitan una revisión del gráfico de origen.

Busca trazados reales

Abre el SVG en un editor vectorial y selecciona su gráfico visible. Si todo el icono es un único mapa de bits colocado, investígalo antes de ajustar Godot. El elemento <image> de SVG puede contener contenido raster, como explica la referencia del elemento en MDN. Volver a rasterizar ese contenedor no puede reconstruir las curvas limpias que un pequeño PNG incrustado nunca contenía.

Utiliza la lista de comprobación de imágenes raster incrustadas para distinguir los píxeles colocados de las formas editables. Si existe un maestro vectorial, exporta desde él. Si preparas un conjunto, mantén un lienzo y márgenes uniformes mediante la guía SVG para kits de interfaz.

Convierte el texto decorativo en trazados

El importador SVG de Godot no renderiza texto SVG editable. Convierte las letras decorativas en trazados en la copia de entrega y conserva un maestro con texto editable. En Inkscape, el comando correspondiente es Path > Object to Path. Godot incluye el procedimiento en Importar imágenes SVG con texto.

Para una etiqueta de botón que necesite traducción o edición frecuente, mantenla como texto de interfaz e importa el icono por separado. Convertir toda una interfaz en contornos dificultaría esos cambios posteriores.

Prueba los efectos complejos por separado

Godot utiliza ThorVG para renderizar SVG. El intérprete SVG de ThorVG tiene un límite de compatibilidad definido; su descripción general de SVG enumera la animación, la interactividad y el contenido multimedia entre las funciones no compatibles. Las capacidades generales del motor ThorVG no garantizan que una función SVG concreta funcione mediante el importador de Godot.

Si una insignia pierde un detalle, compara el SVG exportado con una copia hecha de formas rellenas sencillas. Vuelve a añadir los efectos necesarios de uno en uno. Conserva una exportación raster cuando reproduzca de forma más fiable un gráfico complejo y el proyecto no necesite formas de origen escalables.

No elimines un hueco estrecho al simplificar solo para reducir la complejidad del archivo. La prueba de aceptación es la silueta prevista, incluido su espacio negativo.

Diagnostica la primera diferencia visible

Anota el archivo de origen, el tipo de importación, la escala SVG, la escala del nodo, los ajustes del área de visualización y el tamaño visible esperado. Después cambia el ajuste relacionado con el síntoma.

En Godot 4, el filtrado de texturas 2D se configura mediante las propiedades de CanvasItem, con un valor predeterminado del proyecto. Un tutorial antiguo puede dirigirte a un ajuste de importación que ya no está ahí. El manual de importación de imágenes documenta el cambio. El filtrado puede cambiar el aspecto de los píxeles existentes; no repara detalles que falten en la fuente.

Para un desenfoque que también aparezca fuera de Godot, sigue el diagnóstico general de SVG pixelados. Te ayuda a identificar si el borde defectuoso ya existe antes de que el motor reciba el archivo.

Acepta el icono en su interfaz real

Prueba las colocaciones de icono más pequeñas y más grandes previstas sobre fondos claros y oscuros. Comprueba la curva, el hueco más estrecho y la transparencia alrededor del borde. Cambia el tamaño de la ventana en ejecución, utiliza cualquier control de escala de interfaz disponible para el usuario y prueba la animación de escala del nodo si la interfaz la utiliza.

Repite la comprobación en una compilación de destino. Conserva los ajustes de importación elegidos con el recurso de origen para que otro colaborador pueda reproducir el resultado. Para un conjunto de iconos, prueba algo más que la silueta más sencilla: incluye el icono más denso y el que tenga el detalle importante más fino.

Un archivo SVG de origen pequeño no demuestra un menor uso de memoria GPU. Ambas vías descritas aquí producen texturas raster para su visualización. Mide los recursos importados y la escena real cuando la memoria o el tiempo por fotograma determinen la elección.

Cómo se aplica este proceso con PerfectVector

PerfectVector encaja antes de importar en Godot cuando tu única fuente es un PNG o JPG plano y necesitas formas SVG editables. Sube un icono representativo al convertidor de imagen a vector de PerfectVector, compara su contorno vectorizado y sus huecos interiores con el original y después revisa el SVG descargado antes de elegir el tipo de importación de Godot.

Acepta la vectorización solo cuando la forma sea correcta. Elimina una forma de fondo no deseada, comprueba que las regiones previstas sigan siendo editables y confirma que los huecos pequeños se conserven durante la limpieza. Después realiza las mismas comprobaciones de tamaño y sobremuestreo de Godot que harías con un SVG existente.

Conserva como raster las fotografías, los efectos pictóricos suaves y el pixel art intencionado cuando ese sea el resultado deseado. Un icono geométrico sencillo puede ser más fácil de dibujar directamente. La vectorización sirve para reconstruir formas de origen; no configura el importador de Godot ni valida el juego final.

Preguntas frecuentes

¿Puede Godot importar archivos SVG? Sí. La importación Texture2D predeterminada rasteriza un SVG al importarlo. El importador actual también ofrece DPITexture para imágenes SVG que necesitan volver a rasterizarse con sobremuestreo. Consulta la documentación de la versión de tu proyecto; DPITexture está marcado como experimental.

¿Por qué mi SVG se ve borroso en Godot? Comprueba si un raster importado fijo se muestra a un tamaño mayor que sus dimensiones en píxeles. Revisa también el estiramiento del área de visualización, el filtrado, el sobremuestreo de escala del nodo y el contenido raster incrustado. Corrige la causa antes de vectorizar o sustituir la fuente.

¿Conserva DPITexture trazados SVG editables en la escena? Conserva la fuente SVG para volver a rasterizarla, pero es un recurso de textura. Importarlo no proporciona un flujo de edición de trazados en la escena ni crea automáticamente la geometría de colisión que necesita el juego.

Fuentes

1. Godot — Importar imágenes — Define los tipos de importación SVG, la preparación del texto, las limitaciones del renderizador y los ajustes de filtrado de texturas.
2. Godot — DPITexture — Documenta la herencia, la fuente SVG conservada, el escalado y el estado experimental.
3. Godot — Múltiples resoluciones — Explica el estiramiento del área de visualización, el sobremuestreo de imágenes, los ajustes de escala del nodo y el coste de rasterizar repetidamente.
4. Godot — ResourceImporterTexture — Describe los controles de escala raster y límite de tamaño del importador de texturas predeterminado.
5. ThorVG — Acerca de ThorVG — Define los límites de compatibilidad del intérprete SVG.
6. MDN — Elemento image de SVG — Explica cómo un SVG puede contener gráficos raster.

---

Si tu icono de Godot parte de un PNG o JPG plano y necesita formas editables, convierte la imagen con PerfectVector. Comprueba la silueta, los huecos pequeños y los trazados de fondo no deseados y después prueba el SVG a los tamaños de visualización y con los ajustes de escalado que utiliza tu proyecto.