Importare SVG in Rive: grafica per l'animazione

Puoi importare un SVG in Rive trascinando il file nell'editor o usando il pannello Assets. Rive converte la grafica in oggetti vettoriali nativi modificabili. Il risultato importato richiede due controlli: appare corretto e puoi selezionare le parti che intendi animare? La documentazione SVG di Rive spiega conversione e limiti.

Inizia dal file vettoriale originale quando lo possiedi. Se il sorgente è un PNG o JPG, scegli fra mantenerlo come immagine, disegnare le forme richieste o ricalcarlo prima in SVG. Il ricalco è utile per recuperare contorni modificabili; devi comunque organizzare quei contorni per l'animazione.

Cosa succede a un SVG dentro Rive?

Dopo l'importazione, lavori con oggetti Rive. Il sorgente SVG non è incluso nel file .riv esportato, e i runtime Rive attualmente non convertono risorse SVG a runtime. Completa preparazione e importazione SVG nell'editor prima di esportare il file Rive. Il comportamento di esportazione di Rive descrive questo confine.

La distinzione conta anche quando selezioni la grafica. Un livello forma controlla riempimento e tratto, mentre i tracciati al suo interno definiscono la geometria. Espandi una forma nella Hierarchy per ispezionare quei tracciati. Selezionare un gruppo genitore può far muovere tutta l'illustrazione anche quando i figli sono modificabili. La guida di Rive a forme e tracciati mostra quella struttura.

Se il sorgente SVG stesso non si separa, usa la diagnosi di oggetti SVG e gruppi inseparabili per identificare un gruppo, un tracciato composto o un'immagine incorporata prima di cambiarlo.

Prepara le parti prima dell'esportazione

Scrivi i movimenti desiderati prima di combinare o appiattire la grafica. Considera una lampada da scrivania: il paralume deve inclinarsi, il braccio inclinarsi e la base rimanere ferma. Quei movimenti suggeriscono pezzi separati selezionabili e organizzabili.

Lo stesso metodo funziona per palpebre di un personaggio, una mano che saluta o un elemento di logo: nomina il movimento, poi controlla se il sorgente contenga il pezzo necessario a realizzarlo.

Pianifica le parti mobili

Dai nomi alle parti significative nel documento sorgente e conserva una copia originale. Mantieni insieme i dettagli collegati quando devono muoversi insieme. Evita di unire tutta un'illustrazione in un tracciato soltanto per accorciare l'elenco degli oggetti.

Una volta importati, usa i gruppi Rive per organizzare quei pezzi e assegnare loro controlli di trasformazione separati. Rive permette di creare un gruppo e inserirvi oggetti nella Hierarchy. Puoi anche raggruppare una selezione con Command+G su macOS o Ctrl+G su Windows. La documentazione dei gruppi Rive tratta questi controlli.

Importa da SVG, Figma o Illustrator

Un file SVG salvato

1. Salva un'esportazione SVG separata affinché l'originale modificabile rimanga disponibile.
2. Trascina il file in Rive oppure fai clic su + nel pannello Assets e scegli il file da importare.
3. Posiziona la grafica dove serve ed espandine la struttura nella Hierarchy.
4. Seleziona una piccola parte, cambiane il riempimento e annulla la modifica. Controlla che sia cambiata soltanto la regione prevista.

I due metodi di importazione dei file sono documentati nella panoramica Assets di Rive. Un'importazione riuscita è l'inizio del controllo di modifica.

Figma

Usa Copy as SVG per la grafica prevista in Figma, poi incolla nell'editor Rive. Controlla forme importate e aspetto prima di copiare il resto di una composizione ampia. È il metodo di importazione Figma documentato da Rive.

Illustrator

Imposta lo stile SVG su Presentation Attributes. Rive documenta etichette leggermente diverse per i metodi di esportazione Illustrator:

• Save As: in SVG Options, imposta CSS Properties su Presentation Attributes.
• Export As: in SVG Options, imposta Styling su Presentation Attributes.
• Copia e incolla diretti: controlla le opzioni di stile SVG di Export As, perché Illustrator usa quelle impostazioni per questo metodo.

Disattiva inoltre Preserve Illustrator Editing Capabilities nell'SVG da consegnare. Conserva separatamente l'originale Illustrator. Rive avverte che questa opzione aggiunge dati extra di Illustrator, aumenta le dimensioni del file e può includere dati che l'importatore non riconosce. Le indicazioni di Rive per Illustrator sono la fonte di queste impostazioni.

Collega il sintomo di importazione al primo controllo

Rive supporta gradienti lineari e radiali, ma non riproduce ogni funzionalità SVG. La tabella seguente traduce il suo elenco di funzionalità non supportate in un ordine di riparazione. La colonna del primo controllo è un suggerimento diagnostico, non una garanzia sul tuo file.

Se un SVG Illustrator appare nero, inizia dall'impostazione di esportazione Presentation Attributes, poi ispeziona il colore della forma interessata. La sola grafica nera non identifica la causa. Non deve essere confusa con il ripiego bianco documentato da Rive per inherit.

Per contenuto immagine mancante, la guida ai raster incorporati negli SVG spiega come controllare se il file contenga tracciati effettivi o un'immagine dentro un contenitore SVG. Rive può importare JPEG, PNG e WebP come risorse immagine proprie, secondo il suo elenco dei tipi di risorse. Mantenere uno sfondo con texture come raster separato può essere la scelta giusta.

Se l'importazione non termina

Prova un piccolo SVG semplice nella stessa sessione. Se fallisce anche quello, salva il lavoro e riavvia l'editor prima di ricostruire la grafica. Se fallisce soltanto un file, isola i suoi gruppi in copie esportate separate finché individui la sezione interessata. Questo separa un problema di sessione da uno specifico del file; non stabilisce un limite universale di complessità.

Quando PerfectVector è adatto a questa procedura

PerfectVector è utile quando la grafica sorgente è raster e servono contorni vettoriali modificabili per Rive. Per un'illustrazione piatta PNG o JPG, converti l'immagine in tracciati SVG, poi ispeziona il risultato in un editor vettoriale prima di importare. Controlla sagoma, piccoli spazi e confini fra parti che richiedono movimenti separati. Un ricalco ricostruisce regioni visibili; non recupera i nomi originali dei livelli e non decide dove vadano le articolazioni dell'animazione.

Torna all'esempio della lampada. Se braccio e base sono diventati un'unica forma connessa, separa o ridisegna quel confine. Se un pezzo mobile rivela un'area nascosta nell'immagine sorgente, disegna tu l'area mancante. Fallo prima di costruire l'animazione intorno alla struttura importata.

Usa l'SVG originale quando contiene già tracciati adatti. Usa gli strumenti di disegno nativi per poche parti geometriche semplici. Mantieni fotografie e texture dipinte come risorse raster quando l'aspetto conta più dei contorni modificabili. La nostra panoramica sulla vettorializzazione delle immagini spiega i compromessi dell'immagine sorgente; la guida al ricalco in Adobe Animate tratta una procedura separata se Animate è la destinazione.

Controlla un movimento prima di costruire l'animazione

Su una copia di lavoro, seleziona il paralume e ruotalo leggermente. Conferma che i dettagli previsti lo seguano mentre la base rimane ferma. Annulla, seleziona il braccio e ripeti. Se si muovono le parti sbagliate, ispeziona la disposizione genitore-figlio prima di modificare altri tracciati.

Controlla anche il punto di rotazione. In Rive, i figli ereditano le trasformazioni di un genitore e l'origine determina dove avvengano rotazione o ridimensionamento. Freeze permette di riposizionare un genitore senza muovere i figli; attivalo o disattivalo con Y e disattivalo dopo aver regolato l'origine. Segui la guida Freeze and Origin di Rive per i controlli.

Prima di impegnarti nell'animazione, conferma che:

• ogni pezzo richiesto sia selezionabile indipendentemente;
• riempimenti, contorni, fori e gradienti corrispondano ancora all'aspetto previsto;
• i raster importati separatamente siano presenti dove hai scelto di mantenerli;
• il movimento non esponga spazi accidentali o grafica nascosta mancante;
• ogni pezzo mobile ruoti intorno all'articolazione prevista;
• sorgente originale e copia di importazione pulita rimangano disponibili.

FAQ

Importare un SVG lo rende modificabile in Rive? Sì, per le funzionalità SVG supportate da Rive. Espandi la grafica importata nella Hierarchy per selezionare la parte necessaria. Se diverse regioni agiscono ancora come un oggetto, ispeziona gruppi e struttura dei tracciati.

Perché l'immagine dentro l'SVG è scomparsa? Rive ignora le immagini incorporate durante l'importazione SVG. Trova il raster originale e importalo come risorsa immagine, oppure ricalca grafica adatta in tracciati quando servono contorni modificabili.

Rive supporta i gradienti SVG? I gradienti lineari e radiali sono supportati. Le trasformazioni dei gradienti vengono ignorate, quindi il posizionamento di un gradiente potrebbe richiedere regolazioni dopo l'importazione.

Ricalcare un PNG crea un'animazione Rive? Il ricalco può creare geometria SVG da grafica raster adatta. Devi comunque ispezionare e separare le parti mobili, impostare gerarchia e origini e costruire l'animazione in Rive.

Fonti

1. Rive — Risorse SVG e vettoriali — Conversione in oggetti nativi, importazione Illustrator e Figma, comportamento di esportazione a runtime e funzionalità SVG non supportate.
2. Rive — Risorse — Controlli di importazione dei file e risorse immagine raster separate.
3. Rive — Panoramica di forme e tracciati — Stili delle forme e geometria dei tracciati dentro un livello forma.
4. Rive — Gruppi — Organizzazione delle parti e controlli di raggruppamento nella Hierarchy.
5. Rive — Freeze and Origin — Trasformazioni genitore-figlio e riposizionamento di un'origine senza muovere la grafica figlia.

---

Se la grafica parte da un PNG o JPG e richiede contorni modificabili, prepara un SVG con PerfectVector. Ispeziona le parti ricalcate, importa il file in Rive e prova un movimento indipendente prima di costruire il resto dell'animazione.