Importar SVG en Rive: prepara ilustraciones editables para animar

Puedes importar un SVG en Rive arrastrándolo al editor o usando el panel Assets. Rive convierte la ilustración en objetos vectoriales nativos editables. El resultado necesita dos comprobaciones: ¿se ve bien y puedes seleccionar las partes que quieres animar? La documentación SVG de Rive explica la conversión y sus límites.

Empieza con el vector original si lo tienes. Si es un PNG o JPG, elige entre conservarlo como imagen, dibujar las formas necesarias o trazarlo primero en SVG. Trazar sirve para recuperar contornos editables; aún debes organizarlos para la animación.

¿Qué ocurre con un SVG dentro de Rive?

Después de importar, trabajas con objetos de Rive. El SVG original no se incluye en el .riv exportado y los motores de ejecución de Rive actualmente no convierten recursos SVG en tiempo de ejecución. Completa la preparación e importación en el editor antes de exportar el archivo Rive. El comportamiento de exportación describe este límite.

La diferencia también importa al seleccionar. Una capa de forma controla su relleno y trazo, mientras sus trazados internos definen la geometría. Despliega la forma en Hierarchy para inspeccionarlos. Seleccionar un grupo padre puede mover toda la ilustración aunque sus hijos sean editables. La guía de formas y trazados de Rive muestra esa estructura.

Si el propio SVG no se separa, usa el diagnóstico de objetos y desagrupación SVG para identificar grupos, trazados compuestos o imágenes incrustadas antes de cambiarlo.

Prepara las partes antes de exportar

Anota los movimientos deseados antes de combinar o aplanar la ilustración. Piensa en una lámpara de escritorio: la pantalla debe inclinarse, el brazo balancearse y la base quedarse fija. Esos movimientos sugieren piezas separadas que puedas seleccionar y organizar.

El mismo método sirve para párpados de un personaje, una mano que saluda o un elemento de logotipo: nombra el movimiento y comprueba si el original contiene la pieza necesaria.

Planifica las partes móviles

Da nombre a las partes significativas en el documento original y conserva un maestro. Mantén juntos detalles relacionados que deban moverse juntos. Evita unir toda la ilustración en un trazado solo para acortar la lista de objetos.

Después de importar, usa grupos de Rive para organizar piezas y darles controles de transformación separados. Rive permite crear un grupo y colocar objetos dentro en Hierarchy. También puedes agrupar una selección con Command+G en macOS o Ctrl+G en Windows. La documentación de grupos cubre estos controles.

Importa desde SVG, Figma o Illustrator

Un archivo SVG guardado

1. Guarda una exportación SVG separada para conservar el maestro editable.
2. Arrastra el archivo a Rive o haz clic en + en Assets y elige el archivo.
3. Coloca la ilustración y despliega su estructura en Hierarchy.
4. Selecciona una parte pequeña, cambia su relleno y deshaz. Comprueba que solo cambió la zona prevista.

Las dos vías de importación se documentan en la introducción a Assets de Rive. Una importación correcta es el principio de comprobar la edición.

Figma

Usa Copy as SVG para la ilustración prevista en Figma y pégala en Rive. Comprueba formas y apariencia antes de copiar el resto de una composición grande. Es la vía documentada de importación desde Figma.

Illustrator

Establece los estilos SVG en Presentation Attributes. Rive documenta etiquetas ligeramente distintas según la exportación:

• Save As: en SVG Options, establece CSS Properties en Presentation Attributes.
• Export As: en SVG Options, establece Styling en Presentation Attributes.
• Copiar y pegar directamente: comprueba los estilos SVG de Export As, porque Illustrator usa esos ajustes para esta vía.

Desactiva también Preserve Illustrator Editing Capabilities en el SVG de entrega. Conserva separado el maestro Illustrator. Rive advierte que la opción añade datos extra de Illustrator, aumenta el tamaño y puede incluir datos que el importador no reconozca. Las indicaciones de Illustrator de Rive son la fuente de estos ajustes.

Relaciona el síntoma con la primera comprobación

Rive admite degradados lineales y radiales, pero no reproduce todas las funciones SVG. La tabla traduce su lista de funciones no compatibles en un orden de reparación. La primera comprobación es una sugerencia diagnóstica, no una garantía sobre tu archivo.

Si un SVG de Illustrator aparece negro, empieza por Presentation Attributes y después inspecciona el color de la forma. La ilustración negra por sí sola no identifica la causa. No la confundas con el blanco de reserva documentado para inherit.

Para imágenes ausentes, la guía de contenido rasterizado incrustado en SVG explica cómo comprobar si hay trazados reales o una imagen dentro del contenedor. Rive puede importar JPEG, PNG y WebP como recursos independientes según su lista de tipos de recursos. Conservar un fondo texturizado como imagen separada puede ser correcto.

Si la importación nunca termina

Prueba un SVG pequeño y sencillo en la misma sesión. Si también falla, guarda el trabajo y reinicia el editor antes de reconstruir la ilustración. Si solo falla un archivo, aísla sus grupos en copias de exportación hasta encontrar la sección afectada. Esto distingue un problema de sesión de uno específico del archivo; no establece un límite universal de complejidad.

Cuándo encaja PerfectVector en este proceso

PerfectVector sirve cuando el original es rasterizado y necesitas contornos vectoriales editables para Rive. Para un PNG o JPG plano, convierte la imagen en trazados SVG e inspecciona el resultado en un editor antes de importar. Comprueba silueta, huecos pequeños y límites entre partes que deban moverse por separado. Un trazado reconstruye zonas visibles; no recupera nombres originales de capas ni decide dónde van las articulaciones.

Volvamos a la lámpara. Si brazo y base quedaron como una forma conectada, separa o redibuja ese límite. Si al mover una pieza se revela una zona oculta en la imagen original, dibújala tú. Hazlo antes de construir la animación alrededor de la estructura importada.

Usa el SVG original si ya contiene trazados adecuados. Usa herramientas nativas para unas pocas partes geométricas simples. Conserva fotografías y texturas pintadas como imágenes si su apariencia importa más que los contornos editables. Nuestra introducción a la vectorización explica el equilibrio según el original; la guía de trazado de Adobe Animate cubre otro flujo si ese es el destino.

Comprueba un movimiento antes de crear la animación

En una copia de trabajo, selecciona la pantalla de la lámpara y gírala un poco. Confirma que los detalles previstos la sigan y la base permanezca quieta. Deshaz, selecciona el brazo y repite. Si se mueven partes incorrectas, inspecciona padres e hijos antes de editar más trazados.

Comprueba también el pivote. En Rive, los hijos heredan las transformaciones del padre y el origen determina dónde gira o escala. Freeze permite recolocar un padre sin mover sus hijos; actívalo con Y y desactívalo después de ajustar el origen. Sigue la guía Freeze and Origin para los controles.

Antes de seguir con la animación, confirma:

• cada pieza necesaria se selecciona independientemente;
• rellenos, contornos, huecos y degradados conservan la apariencia prevista;
• están presentes las imágenes importadas por separado donde decidiste conservarlas;
• el movimiento no revela huecos accidentales ni ilustración oculta ausente;
• cada pieza móvil gira alrededor de la articulación prevista;
• siguen disponibles el original y una copia limpia importada.

Preguntas frecuentes

¿Importar SVG lo hace editable en Rive? Sí, para las funciones SVG compatibles. Despliega la ilustración en Hierarchy para seleccionar la parte necesaria. Si varias zonas siguen actuando como un objeto, inspecciona su agrupación y estructura de trazados.

¿Por qué desapareció la imagen dentro de mi SVG? Rive ignora imágenes incrustadas al importar SVG. Busca el original rasterizado e impórtalo como recurso de imagen, o traza ilustraciones adecuadas cuando necesites contornos editables.

¿Admite Rive degradados SVG? Admite degradados lineales y radiales. Ignora sus transformaciones, así que puede ser necesario ajustar su posición después de importar.

¿Trazar un PNG crea una animación Rive? Puede crear geometría SVG de una imagen adecuada. Aún necesitas inspeccionar y separar partes móviles, establecer jerarquía y orígenes y crear la animación en Rive.

Fuentes

1. Rive — SVG y recursos vectoriales — Conversión a objetos nativos, importación de Illustrator y Figma, comportamiento de exportación y funciones SVG no compatibles.
2. Rive — Recursos — Controles de importación y recursos de imágenes independientes.
3. Rive — Introducción a formas y trazados — Estilos de formas y geometría dentro de una capa de forma.
4. Rive — Grupos — Organización de partes y controles de agrupación en Hierarchy.
5. Rive — Freeze y origen — Transformaciones de padres e hijos y recolocar un origen sin mover los hijos.

---

Si partes de PNG o JPG y necesitas contornos editables, prepara un SVG con PerfectVector. Inspecciona las partes trazadas, importa en Rive y prueba un movimiento independiente antes de construir el resto de la animación.