De SVG a Rive: cómo importar un SVG y animarlo
Por el equipo de Charmotion · Actualizado el
Para animar un SVG en Rive, arrastra el archivo al editor: Rive lo convierte en objetos vectoriales nativos en lugar de conservarlo como archivo incrustado, así que todas las formas siguen siendo editables. Luego agrupa las formas en partes del cuerpo, define el punto de pivote de cada grupo, añade huesos donde las partes deban doblarse, crea tus animaciones con keyframes y conéctalas en una máquina de estados (state machine).
Puntos clave
- Rive convierte los SVG importados en objetos vectoriales de Rive editables.
- La estructura de capas del SVG se convierte en la estructura de tu rig, así que nombra y agrupa las capas en la herramienta de diseño antes de exportar.
- Convierte los trazos en contornos y el texto en formas si se importan de forma extraña; acopla los efectos que Rive no admite.
- Los personajes vectoriales mantienen el .riv ligero y nítido a cualquier tamaño, por eso el arte plano es el mejor punto de partida.
¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.
¿Rive admite la importación de SVG?
Sí. Rive incluye SVG entre sus formatos importables y señala que los SVG "se convierten en objetos vectoriales de Rive en lugar de exportarse como archivos independientes". Esa es la ventaja clave frente a un PNG: puedes seleccionar cualquier trazado, cambiar sus puntos, cambiarle el color y vincularlo directamente a los huesos.
¿Cómo debo preparar el SVG?
- Agrupa por parte del cuerpo. Cabeza, ojos, boca, cuerpo, brazo izquierdo, brazo derecho, accesorios. Cada grupo se convierte en algo que puedes rotar por separado.
- Nombra las capas. Los nombres pasan a la jerarquía y te evitan tener que adivinar después.
- Dibuja lo que queda oculto. Si un brazo se va a balancear, el cuerpo que hay detrás debe estar completo; si no, aparece un hueco.
- Mantenlo simple. Convierte los trazos complejos en contornos, transforma el texto en formas y aplana los filtros y efectos de fusión que no tienen equivalente en trazados vectoriales.
¿Cómo riggeo un SVG importado?
Coloca el origen de cada grupo en el punto donde debe rotar (el hombro para un brazo, el cuello para la cabeza). Para las partes rígidas, basta con emparentarlas a un hueso. Para las partes que deben doblarse, vincula los vértices del trazado a una cadena de huesos; Rive te permite vincular vértices y manejadores Bézier con influencia ponderada. Luego crea los keyframes en las líneas de tiempo y arma la máquina de estados (state machine), como se explica en la guía de PNG a Rive.
¿Por qué mi SVG se ve mal en Rive?
- Faltan degradados o efectos: los filtros SVG, las máscaras y algunos modos de fusión no tienen un equivalente directo; recréalos con los rellenos propios de Rive o aplánalos en la herramienta de diseño.
- Miles de trazados diminutos: los SVG vectorizados automáticamente suelen importarse como cientos de formas. Limpia primero la vectorización; un archivo más ligero se anima y se renderiza mejor.
- Todo en un solo grupo: reagrupa antes de riggear, o la jerarquía te estorbará en cada keyframe.
¿Puedo obtener un .riv riggeado sin hacerlo yo?
Si prefieres no riggear ni crear keyframes, Charmotion genera el .riv a partir de una imagen de tu personaje: vectoriza el arte plano en partes, define los pivotes, lo riggea, crea los keyframes de 17 animaciones y conecta tanto un view model con Data Binding como una máquina de estados clásica. Sube una exportación PNG, JPEG o WebP del SVG. Mira la vista previa con tu personaje antes de elegir un plan.
Preguntas frecuentes
¿Rive mantiene mi SVG como vectores?
Sí. Los SVG importados se convierten en objetos vectoriales nativos de Rive que puedes editar, no en una imagen incrustada.
¿Puedo exportar una animación de Rive de vuelta a SVG?
No como SVG animado. Rive exporta .riv para sus runtimes, además de video y secuencias de imágenes para otros usos.
¿Debo vectorizar mi PNG a SVG antes de usar Rive?
Para arte plano de colores sólidos, sí: los vectores se animan con más flexibilidad y mantienen bajo el peso del archivo. Para arte detallado o con sombreado, conserva el PNG y usa mallas.
Respuestas rápidas de esta guía
Fuentes
- Importing assets, Rive
- Bones, Rive
- Meshes, Rive
- State Machine, Rive
- Exporting for video and static design, Rive