PerfectVector
Di Irene Kim10 min di lettura

Importare SVG in Apple Motion: verifica prima di animare

Importa un SVG statico in Apple Motion, controlla trasparenza e funzionalità non supportate e decidi se servono oggetti separati prima dell'animazione.

In questa pagina

Apple Motion supporta l'importazione SVG. La guida alle funzionalità di Motion 6.3 di Apple elenca il supporto SVG, quindi i vecchi consigli che fanno passare ogni SVG attraverso un altro formato non sono un punto di partenza affidabile per quella versione. Inizia con un file statico, importalo come media e verifica il risultato prima di costruire l'animazione.

Ci sono tre domande diverse a cui rispondere: la grafica appare, la trasparenza è corretta e puoi controllare le parti che devono muoversi indipendentemente? Una grafica visibile nella tela risponde soltanto alla prima. Non dimostra che ogni tracciato SVG sia diventato una forma nativa di Motion.

Questo flusso usa un semplice emblema con anello e disco per rendere visibili questi controlli. È una procedura documentata da provare nella versione installata, non il resoconto di un test di importazione in Motion nativo.

Adatta il flusso alla versione di Motion e al lavoro

Controlla la versione installata prima di seguire un vecchio post di forum o importare una grande raccolta. Le indicazioni SVG attuali di Apple descrivono sia gli usi supportati sia limiti specifici. Se l'installazione differisce dalla versione documentata, controlla la guida corrispondente prima di diagnosticare la grafica stessa.

Decidi cosa deve accadere dopo l'importazione:

Risultato previstoCosa deve fornire la consegnaControllo di accettazione
Spostare o ridimensionare l'intero emblemaUna grafica statica visualizzata correttamenteL'intero disegno risponde insieme
Spostare il piccolo disco indipendentementeOggetti controllabili separatamenteSpostare il disco lascia invariato l'anello
Rimodellare l'anello nel tempoUna forma nativa adatta o un'altra costruzione modificabileI controlli geometrici richiesti sono disponibili
Preservare un'animazione SVG esistenteUna modalità di consegna dell'animazione progettata separatamenteFotogrammi e tempi previsti sopravvivono a quella modalità

L'ultima riga è particolarmente importante. La documentazione SVG di Motion dice che gli SVG animati mostrano soltanto il primo fotogramma. Importare un file animato non equivale a importarne l'animazione.

Se stai scegliendo fra applicazioni di animazione, la guida al ricalco dei loghi in After Effects e il flusso di ricalco Adobe Animate spiegano i rispettivi oggetti di destinazione. I loro comandi e tipi di oggetti non sono intercambiabili con l'importazione di media di Motion.

Parti da una sorgente che puoi esaminare

Salva questo esempio originale come orbit-mark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
  <circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
  <circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>

L'anello verde petrolio ha un centro vuoto. Un disco corallo più piccolo si trova sopra e alla sua destra, separato da uno spazio. Il file non ha rettangolo di sfondo, testo, riferimento a immagini esterne, script o animazione. Queste scelte ne fanno una base utile per controllare in seguito un emblema più elaborato.

Aprilo prima nell'editor sorgente. Controlla l'apertura dell'anello, lo spazio e il bordo della tela. Conserva l'originale modificabile, perché correggere la grafica e correggere un'impostazione di importazione sono lavori diversi.

Per il tuo file, semplifica la copia da consegnare soltanto dove una funzionalità specifica causa problemi. Un disegno con lettere richiede una strategia esplicita per i caratteri; usa la lista di controllo sui cambi di carattere SVG prima dell'esportazione. Conserva il testo modificabile nell'originale anche se la copia da consegnare richiede lettere convertite in tracciati. Non ricalcare un vettore già utilizzabile soltanto perché l'applicazione di destinazione è diversa.

Illustrazione che confronta un emblema con anello e disco controllato come grafica unica con lo stesso anello e disco preparati come oggetti separati
Illustrazione: una grafica intera e parti controllate indipendentemente sono consegne diverse. Spostare soltanto il disco corallo è il controllo pratico; un emblema nitido non dimostra la conversione in forme native.

Importa nella composizione, poi controlla il media

Seleziona il gruppo in cui vuoi far apparire l'emblema. Nel flusso di importazione Motion attuale, scegli File > Import > Media, oppure premi Command-I, seleziona l'SVG e importalo. Puoi anche trascinare il file dal Finder nella tela o in un gruppo dell'elenco Layers.

Dopo l'importazione, cerca la grafica nella tela e il suo livello nel gruppo previsto. Evita di giudicare il file soltanto in base alla presenza del nome nell'elenco Media. Apple documenta anche l'importazione in quell'elenco senza aggiungere il media alla composizione; in quel caso non apparirà ancora nella tela o nell'elenco Layers.

Metti l'emblema sopra uno sfondo contrastante per esaminarlo. Guarda il centro aperto e lo spazio fra le due parti. Uno sfondo scuro del visualizzatore può far sembrare ingannevolmente simili contenuto mancante e contenuto trasparente.

Per controllare la sostituzione dello sfondo in Motion, fai clic su Media nel pannello Project e seleziona l'oggetto SVG. Apri il Media Inspector. La pagina SVG di Apple documenta Use Background Color e i controlli di colore associati. Lascia disattivata questa sostituzione quando vuoi conservare le aree trasparenti della sorgente; attivala soltanto quando un colore sostitutivo è intenzionale.

Un rettangolo opaco già disegnato dentro l'SVG è un problema separato. Disattivare un'opzione di sfondo del media non rimuove un tracciato che appartiene alla grafica. La guida allo sfondo SVG trasparente tratta questa diagnosi a livello di sorgente.

Verifica il controllo delle parti prima di aggiungere fotogrammi chiave

Seleziona l'emblema importato e cambia leggermente la posizione in modo reversibile. Se anello e disco si spostano insieme, è un comportamento utile per una grafica unica. Ripristina la posizione, poi chiediti se l'animazione prevista richieda più controllo.

Per un disco che si muove indipendentemente, prova a selezionare e spostare soltanto quella parte. Accetta la consegna soltanto quando l'anello resta fermo e l'oggetto previsto è controllabile indipendentemente. Un nome di gruppo SVG, uno spazio visibile o una miniatura di livello non sono da soli prove sufficienti.

Se l'oggetto disponibile non espone i controlli necessari, scegli una costruzione che li offra. Per questo esempio semplice, disegnare un anello e un disco come forme native separate è un'opzione ragionevole. La guida alle forme semplici di Apple spiega lo strumento Circle e i suoi controlli di colore e contorno. Costruisci l'anello con un contorno e un riempimento vuoto, e il disco con un riempimento pieno, poi controlla separatamente la selezione di ogni oggetto.

Per grafica più elaborata, un'altra opzione è preparare file sorgente separati per le parti che devono muoversi indipendentemente. Mantieni una tela comune e registra il loro allineamento previsto nell'editor sorgente. Verifica il posizionamento dopo l'importazione; una raccolta di file non è automaticamente una disposizione pronta per l'animazione.

È una decisione sugli oggetti richiesti, non una promessa che l'importazione SVG separi la grafica in forme native. Se ti serve una deformazione a livello di punti, stabilisci che la costruzione scelta fornisca i controlli geometrici richiesti prima di impegnarti nell'animazione.

Diagnostica contenuti non supportati con una copia più semplice

I limiti SVG di Apple identificano diversi motivi per cui un file può differire dall'editor sorgente. Usa il sintomo per scegliere il controllo successivo.

SintomoLimite documentato o controllo probabilePasso successivo
Un SVG animato resta fermoMotion visualizza il primo fotogrammaTratta l'importazione come statica; progetta il movimento separatamente
Un SVG con dissolvenza in entrata appare vuotoIl primo fotogramma può essere trasparenteEsporta uno stato statico visibile per consegnare la grafica
Un file con caratteri personalizzati non viene importatoGli SVG con caratteri personalizzati non sono supportatiPrepara una copia adatta alla consegna e conserva l'originale modificabile
Un'immagine prevista diventa un segnapostoI riferimenti a immagini esterne non sono supportatiSostituisci la dipendenza con una risorsa autonoma adatta alla consegna e verificala
Manca contenuto collegato o gestito da scriptOggetti JavaScript e link incorporati non appaionoElimina la dipendenza dal comportamento interattivo
Forme parzialmente trasparenti appaiono diverseL'opacità variabile delle forme può essere renderizzata diversamenteConfronta una copia semplificata con il composito previsto

Non interpretare il limite sui riferimenti esterni come prova che ogni possibile funzionalità SVG autonoma funzioni. Un file base più piccolo aiuta a isolare la dipendenza, ma la grafica finale richiede comunque una verifica propria.

Una volta corretto l'aspetto statico, verifica l'emblema alle dimensioni minima e massima usate nella composizione. Osserva l'apertura interna dell'anello e lo spazio accanto al disco. Poi controlla una breve sezione esportata alla risoluzione di consegna prevista. La geometria sorgente vettoriale non elimina la necessità di verificare compositing, effetti e fotogramma video finale.

Prepara per Motion un emblema disponibile solo come raster

Se manca l'emblema modificabile e resta soltanto un semplice PNG o JPG, il flusso da immagine a vettore di PerfectVector può aiutare a preparare un candidato SVG statico. Ritaglia sull'emblema, controlla nell'anteprima eventuali aperture dell'anello riempite, un disco unito o forme di sfondo indesiderate e confronta il candidato con la sorgente. Scarica la grafica approvata, poi ripeti i controlli di importazione e indipendenza degli oggetti.

La vettorializzazione non ricostruisce fotogrammi chiave, tempi, livelli Motion nativi o un rig di animazione. Usa l'originale vettoriale esistente quando disponibile. Mantieni raster fotografie e immagini ricche di effetti quando ciò ne conserva meglio l'aspetto; disegna un semplice anello e disco direttamente in Motion quando il controllo degli oggetti nativi è l'esigenza effettiva.

Prima di consegnare il progetto a qualcun altro, registra nome del file sorgente, versione di Motion, scelta dello sfondo ed elementi che devono restare separati. Includi l'originale modificabile e un riferimento che mostri la disposizione prevista. I flussi grafici del blog trattano le decisioni di preparazione che precedono quella consegna.

FAQ

Apple Motion può importare direttamente file SVG? Sì. La documentazione di Motion 6.3 di Apple elenca il supporto SVG. Usa il flusso di importazione della versione installata, poi controlla la grafica e i controlli richiesti.

Importare un SVG ne conserva l'animazione? No. Motion mostra soltanto il primo fotogramma di un SVG animato. Se quel fotogramma è trasparente, la grafica importata può apparire vuota.

Perché il mio SVG ha uno sfondo colorato in Motion? Controlla Use Background Color nel Media Inspector e cerca nella sorgente una forma di sfondo opaca. Un'impostazione di sfondo del media e un rettangolo disegnato nell'SVG sono cause separate.

Ogni tracciato SVG diventa una forma Motion modificabile? Non presumerlo da un'importazione riuscita. Verifica se sono disponibili le parti e i controlli geometrici richiesti. Prepara oggetti separati o usa una costruzione nativa appropriata quando l'animazione richiede controllo indipendente.

Fonti

  1. Apple — Novità di Motion — Supporto SVG documentato di Motion 6.3.
  2. Apple — Lavorare con file SVG in Motion — Controlli di trasparenza e limiti delle funzionalità SVG.
  3. Apple — Importare media in Motion — Importazione media, posizionamento nei gruppi e importazione nel solo elenco Media.
  4. Apple — Disegnare forme semplici in Motion — Un'alternativa nativa per geometria semplice controllata separatamente.

Controlla aspetto e struttura degli oggetti di un emblema prima di preparare l'intera sequenza. Se resta soltanto grafica raster, prepara un candidato SVG statico, controlla le parti separate e valida il file approvato in Motion prima di animarlo.

Altro dal blog

Riparti da un SVG più pulito
e facile da modificare