Import SVG Rive : préparer un dessin éditable pour l’animation

Tu peux importer un SVG dans Rive en glissant le fichier dans l’éditeur ou via le panneau Assets. Rive convertit le dessin en objets vectoriels natifs éditables. Le résultat nécessite deux vérifications : a-t-il la bonne apparence et peux-tu sélectionner les parties à animer ? La documentation SVG de Rive explique la conversion et ses limites.

Commence par le fichier vectoriel original si tu l’as. Si ta source est un PNG ou JPG, choisis entre le garder comme image, dessiner les formes nécessaires ou le vectoriser d’abord en SVG. La vectorisation reconstruit des contours éditables ; tu dois toujours les organiser pour l’animation.

Que devient un SVG dans Rive ?

Après l’import, tu travailles avec des objets Rive. Le SVG source n’est pas inclus dans le .riv exporté et les moteurs d’exécution Rive ne convertissent pas actuellement de ressources SVG à l’exécution. Termine la préparation et l’import SVG dans l’éditeur avant d’exporter le fichier Rive. Le comportement d’export de Rive décrit cette limite.

La distinction compte aussi pour sélectionner le dessin. Un calque de forme contrôle remplissage et contour, tandis que ses tracés définissent la géométrie. Déploie une forme dans Hierarchy pour examiner ces tracés. Sélectionner un groupe parent peut déplacer toute l’illustration même si ses enfants sont éditables. Le guide Rive des formes et tracés montre cette structure.

Si le SVG source lui-même ne se sépare pas, utilise le diagnostic des objets et de la dissociation SVG pour identifier groupe, tracé composé ou image intégrée avant modification.

Préparer les parties avant l’export

Note les mouvements voulus avant de combiner ou aplatir le dessin. Considère une lampe de bureau : l’abat-jour doit basculer, le bras s’incliner et la base rester fixe. Ces mouvements suggèrent des pièces séparées sélectionnables et organisables.

La même méthode fonctionne pour paupières de personnage, main qui salue ou élément de logo : nomme le mouvement, puis vérifie si la source contient la pièce nécessaire.

Prévois les parties mobiles

Nomme les parties significatives dans la source et conserve un original. Garde les détails liés ensemble lorsqu’ils doivent bouger ensemble. Évite de fusionner toute l’illustration en un tracé simplement pour raccourcir la liste d’objets.

Après l’import, utilise les groupes Rive pour organiser ces pièces et leur donner des commandes de transformation distinctes. Rive permet de créer un groupe et d’y placer des objets dans Hierarchy. Tu peux aussi grouper une sélection avec Command+G sur macOS ou Ctrl+G sur Windows. La documentation des groupes Rive décrit ces commandes.

Importer depuis un SVG, Figma ou Illustrator

Un fichier SVG enregistré

1. Enregistre un export SVG distinct pour garder l’original éditable disponible.
2. Glisse le fichier dans Rive, ou clique sur + dans Assets et choisis le fichier à importer.
3. Place le dessin où nécessaire et déploie sa structure dans Hierarchy.
4. Sélectionne une petite partie, change son remplissage, puis annule. Vérifie que seule la région prévue change.

Les deux méthodes d’import de fichier sont décrites dans la présentation des ressources Rive. Un import réussi commence la vérification d’édition.

Figma

Utilise Copy as SVG sur le dessin prévu dans Figma, puis colle dans l’éditeur Rive. Vérifie formes et apparence importées avant de copier le reste d’une grande composition. C’est la méthode d’import Figma documentée par Rive.

Illustrator

Définis le style SVG sur Presentation Attributes. Rive décrit des libellés légèrement différents selon les méthodes d’export Illustrator :

• Save As : dans SVG Options, définis CSS Properties sur Presentation Attributes.
• Export As : dans SVG Options, définis Styling sur Presentation Attributes.
• Copier-coller direct : vérifie les options de style SVG de Export As, car Illustrator utilise ces réglages pour cette méthode.

Désactive aussi Preserve Illustrator Editing Capabilities dans le SVG livré. Garde l’original Illustrator séparément. Rive avertit que cette option ajoute des données Illustrator supplémentaires, augmente la taille du fichier et peut inclure des données inconnues de l’importateur. Les consignes Illustrator de Rive sont la source de ces réglages.

Associer le symptôme d’import à la première vérification

Rive prend en charge les dégradés linéaires et radiaux, mais ne reproduit pas toutes les fonctionnalités SVG. Le tableau traduit sa liste de fonctionnalités non prises en charge en ordre de réparation. La colonne de première vérification est une suggestion de diagnostic, pas une garantie pour ton fichier.

Si un SVG Illustrator apparaît noir, commence par le réglage d’export Presentation Attributes, puis examine les couleurs de la forme concernée. Un dessin noir seul n’identifie pas la cause. Ne le confonds pas avec le remplacement blanc documenté de Rive pour inherit.

Pour une image manquante, le guide du matriciel intégré SVG explique comment vérifier si le fichier contient de vrais tracés ou une image dans un conteneur SVG. Rive peut importer JPEG, PNG et WebP comme ressources image propres, selon sa liste de types de ressources. Garder un fond texturé comme matriciel distinct peut être le bon choix.

Si l’import ne se termine jamais

Essaie un petit SVG simple dans la même session. S’il échoue aussi, sauvegarde ton travail et redémarre l’éditeur avant de reconstruire le dessin. Si un seul fichier échoue, isole ses groupes dans des copies d’export distinctes jusqu’à trouver la section concernée. Cela distingue problème de session et problème de fichier ; cela n’établit pas une limite universelle de complexité.

Quand PerfectVector appartient à cette procédure

PerfectVector est utile lorsque la source est matricielle et que tu as besoin de contours vectoriels éditables pour Rive. Pour une illustration PNG ou JPG à aplats, convertis l’image en tracés SVG, puis examine le résultat dans un éditeur vectoriel avant import. Vérifie silhouette, petits espaces et limites entre parties nécessitant des mouvements séparés. La vectorisation reconstruit des régions visibles ; elle ne retrouve pas les noms de calques originaux et ne décide pas de l’emplacement des articulations.

Reviens à la lampe. Si bras et base sont devenus une forme connectée unique, sépare ou redessine cette limite. Si une pièce mobile révèle une région cachée dans la source, dessine-la toi-même. Fais-le avant de construire l’animation autour de la structure importée.

Utilise le SVG original s’il contient déjà des tracés adaptés. Utilise des outils natifs pour quelques parties géométriques simples. Garde photos et textures peintes comme ressources matricielles lorsque leur apparence compte davantage que les contours éditables. Notre présentation de la vectorisation d’images explique les compromis de source ; le guide de vectorisation Adobe Animate traite d’une procédure distincte si Animate est ta destination.

Vérifier un mouvement avant de construire l’animation

Sur une copie de travail, sélectionne l’abat-jour et tourne-le légèrement. Confirme que les détails prévus le suivent tandis que la base reste fixe. Annule, sélectionne le bras et répète. Si les mauvaises parties bougent, examine l’organisation parent-enfant avant de modifier d’autres tracés.

Vérifie aussi le pivot. Dans Rive, les enfants héritent des transformations du parent et l’origine détermine où rotation ou échelle ont lieu. Freeze permet de repositionner un parent sans déplacer ses enfants ; active-le avec Y et désactive-le après ajustement de l’origine. Suis le guide Freeze et Origin de Rive pour les commandes.

Avant de t’engager dans l’animation, confirme que :

• chaque pièce nécessaire peut être sélectionnée indépendamment ;
• remplissages, contours, trous et dégradés correspondent toujours à l’apparence voulue ;
• les matriciels importés séparément sont présents où tu as choisi de les garder ;
• le mouvement n’expose ni espaces accidentels ni dessin caché manquant ;
• chaque pièce mobile tourne autour de l’articulation prévue ;
• la source originale et une copie d’import propre restent disponibles.

FAQ

Importer un SVG le rend-il éditable dans Rive ? Oui, pour les fonctionnalités SVG prises en charge par Rive. Déploie le dessin importé dans Hierarchy pour sélectionner la partie voulue. Si plusieurs régions agissent encore comme un objet, examine leur regroupement et la structure des tracés.

Pourquoi l’image de mon SVG a-t-elle disparu ? Rive ignore les images intégrées pendant l’import SVG. Trouve le matriciel original et importe-le comme ressource image, ou vectorise un dessin adapté en tracés si tu as besoin de contours éditables.

Rive prend-il en charge les dégradés SVG ? Les dégradés linéaires et radiaux sont pris en charge. Les transformations de dégradé sont ignorées ; leur placement peut donc demander un ajustement après import.

Vectoriser un PNG crée-t-il une animation Rive ? La vectorisation peut créer une géométrie SVG depuis un dessin matriciel adapté. Tu dois toujours examiner et séparer les parties mobiles, définir leur hiérarchie et leurs origines et créer l’animation dans Rive.

Sources

1. Rive — SVG et ressources vectorielles — Conversion en objets natifs, import Illustrator et Figma, comportement d’export à l’exécution et fonctionnalités SVG non prises en charge.
2. Rive — Ressources — Commandes d’import de fichiers et ressources image matricielles distinctes.
3. Rive — Présentation des formes et tracés — Styles de forme et géométrie de tracé dans un calque de forme.
4. Rive — Groupes — Organisation des parties et commandes de regroupement dans Hierarchy.
5. Rive — Freeze et Origin — Transformations parent-enfant et repositionnement d’une origine sans déplacer les dessins enfants.

---

Si ton dessin part d’un PNG ou JPG et nécessite des contours éditables, prépare un SVG avec PerfectVector. Examine les parties vectorisées, importe le fichier dans Rive et teste un mouvement indépendant avant de construire le reste de l’animation.