Scatena la potenza delle animazioni dei percorsi con SVGator

(Questo è un articolo sponsorizzato.) L'anno scorso, un'introduzione completa all'uso di base di SVGator è stata pubblicata qui su Smashing Magazine. Se desideri conoscere i fondamenti di SVGator, impostare i tuoi primi progetti e creare le tue prime animazioni, ti consigliamo vivamente di leggerlo prima di continuare con questo articolo.

Oggi daremo una seconda occhiata per esplorare alcune delle nuove funzionalità che sono state aggiunte negli ultimi mesi, incluso il nuovissimo Path Animator .

Nota : Path Animator è una funzionalità premium di SVGator e non è disponibile per gli utenti di prova. Durante una prova di sette giorni, puoi vedere come funziona Path Animator nel progetto di esempio che troverai nell'app, ma non potrai applicarlo ai tuoi SVG a meno che tu non abbia attivato un Piano. SVGator è un servizio in abbonamento. Attualmente, puoi scegliere tra un piano mensile ($ 18 USD/mese) e un piano annuale ($ 144 USD in totale, $ 12 USD/mese). Per progetti più lunghi, ti consigliamo di considerare l'opzione annuale.

Path Animator è solo la prima delle funzionalità premium che SVGator prevede di rilasciare nei prossimi mesi. Tutte le nuove funzionalità saranno disponibili per tutti gli utenti a pagamento, indipendentemente da quando si sono iscritti.

Il fascino delle animazioni di percorso

Le animazioni del percorso SVG non sono affatto una novità. Negli ultimi anni, questo modo di arricchire la grafica vettoriale è stato ampiamente utilizzato in tutto il web:

Le animazioni dei percorsi hanno guadagnato popolarità soprattutto a causa della loro relativa semplicità: anche se a prima vista potrebbero sembrare impressionanti e complesse, la regola sottostante è in realtà molto semplice.

Come funzionano le animazioni dei percorsi?

Potresti pensare che le animazioni del percorso SVG richiedano alcune funzioni di disegno e trasformazione estremamente complicate. Ma è molto più semplice di quanto sembri. Per ottenere effetti simili all'esempio precedente, non è necessario generare, disegnare o animare i percorsi effettivi: è sufficiente animare i loro tratti. Questo brillante concetto ti consente di creare animazioni apparentemente complesse animando un singolo attributo SVG: stroke-dashoffset .

L'animazione di questa piccola proprietà è responsabile dell'intero effetto. Una volta che hai una linea tratteggiata, puoi giocare con la posizione di trattini e spazi vuoti. Combinalo con le impostazioni giuste e ti darà l'effetto desiderato di un percorso SVG auto-disegnato.

Se questo suona ancora piuttosto misterioso o se desideri semplicemente conoscere in modo più dettagliato come vengono realizzate le animazioni dei percorsi, troverai alcune risorse utili su questo argomento alla fine dell'articolo.

Non importa quanto semplici animazioni di percorso vengano confrontate con l'aspetto che hanno, non pensare che la loro codifica sia sempre semplice. Man mano che i tuoi file diventano più complicati, lo fa anche l'animazione. Ed è qui che SVGator viene in soccorso.

Inoltre, a volte potresti preferire non toccare i file SVG grezzi. O forse non ti piace molto scrivere del codice. Allora SVGator ti copre. Con il nuovo Path Animator, puoi creare anche le animazioni di percorsi SVG più complesse senza toccare una riga di codice. Puoi anche combinare la codifica con l'utilizzo di SVGator.

Per comprendere meglio le possibilità che Path Animator ci offre, tratteremo tre esempi separati che presentano diversi casi d'uso delle animazioni di percorso.

Esempio n. 1: testo animato

Nel primo esempio, animeremo il testo, creando l'impressione di lettere che si scrivono da sole.

Spesso utilizzato per le scritte, questo simpatico effetto può essere applicato anche ad altri elementi, come disegni e illustrazioni. C'è un problema, però: l'elemento animato deve avere uno stile con tratti piuttosto che riempimenti. Il che significa, per il nostro testo, che non possiamo utilizzare alcun font esistente.

I caratteri di contorno, non importa quanto siano sottili, risultano sempre in forme chiuse anziché in percorsi aperti. Non ci sono caratteri regolari basati su linee e tratti.

Pertanto, se vogliamo animare il testo utilizzando le animazioni di percorso, dobbiamo disegnarlo noi stessi (o trovare delle lettere vettoriali già pronte adatte a questo scopo). Quando disegni le tue lettere, sentiti libero di usare alcuni font o tipografia esistenti come riferimento, però non violare alcun diritto d'autore! Tieni presente che non è possibile utilizzare i caratteri fuori dagli schemi.

Preparazione del file

Invece di iniziare con un carattere tipografico esistente, inizieremo con un semplice schizzo disegnato a mano:

Ora è il momento di ridisegnare lo schizzo in uno strumento di progettazione. Ho usato Figma, ma puoi usare qualsiasi app che supporti le esportazioni SVG, come Sketch, Adobe XD o Adobe Illustrator.

Di solito, inizio con lo strumento Penna e seguo approssimativamente lo schizzo importato come livello sottostante:

Una volta fatto, rimuovo lo schizzo dallo sfondo e perfeziono i percorsi finché non sono soddisfatto del risultato. Indipendentemente dagli strumenti utilizzati, né dalla tecnica, la cosa più importante è preparare il disegno come linee e utilizzare solo tratti, senza riempimenti.

In questo esempio, abbiamo quattro di questi percorsi. La prima è la lettera “H”; la seconda sono le tre lettere centrali “ell”; e "o" è il terzo. Il quarto percorso è la linea del punto esclamativo.

Il punto di "!" è un'eccezione: è l'unico livello che modelleremo con un riempimento, anziché con un tratto. Sarà animato in modo diverso rispetto agli altri livelli, senza utilizzare Path Animator.

Nota che tutti i percorsi che andremo ad animare con Path Animator sono aperti, ad eccezione della "o", che è un'ellisse. Sebbene l'animazione di percorsi chiusi (come ellissi o poligoni) con Path Animator sia assolutamente fattibile e fattibile, vale anche la pena renderlo un percorso aperto, perché questo è il modo più semplice per controllare esattamente dove inizia l'animazione. Per questo esempio, ho aggiunto un piccolo spazio vuoto nell'ellisse proprio alla fine della lettera "l" poiché è lì che di solito inizi a scrivere "o" nella scrittura a mano.

Prima di importare i nostri livelli in SVGator, è meglio ripulire la struttura dei livelli e rinominarli in modo descrittivo. Questo ti aiuterà a trovare rapidamente la tua strada intorno al tuo file una volta che hai lavorato in SVGator.

Se desideri saperne di più sulla preparazione delle forme per le animazioni dei percorsi, ti consiglio di dare un'occhiata a questo tutorial di SVGator.

Vale la pena preparare i tuoi strati con cura e pensare al futuro il più possibile. Al momento della scrittura, in SVGator non puoi reimportare il file in un'animazione già esistente. Durante l'animazione, se scopri un problema che richiede alcune modifiche al file originale, dovrai importarlo di nuovo in SVGator come un nuovo progetto e iniziare a lavorare sull'animazione da zero.

Creazione di un'animazione

Una volta che sei soddisfatto della struttura e della denominazione dei tuoi livelli, importali in SVGator. Quindi aggiungi il primo percorso alla timeline e applica ad esso Path Animator scegliendolo dall'elenco Animatori o premendo Maiusc + T .

Per ottenere un effetto di auto-disegno, il nostro obiettivo è trasformare il tratto del percorso in una linea tratteggiata. La lunghezza di un trattino e di uno spazio vuoto dovrebbe essere uguale alla lunghezza dell'intero percorso. Questo ci permette di coprire l'intero percorso con uno spazio vuoto per farlo scomparire. Una volta nascosto, cambia stroke-dashoffset nel punto in cui l'intero percorso è coperto da un trattino.

SVGator lo rende molto conveniente per noi fornendo automaticamente la lunghezza del percorso. Tutto quello che dobbiamo fare è copiarlo con un clic e incollarlo nei due parametri richiesti da SVGator : Dash e Offset . Incollare il valore in Tratti trasforma il tratto in una linea tratteggiata. Non puoi vederlo immediatamente poiché il primo trattino della linea copre l'intero percorso. L'impostazione dell'Offset cambierà l'offset stroke-dashoffset modo che lo spazio vuoto copra il percorso.

Una volta terminato, creiamo un'animazione aggiungendo un nuovo fotogramma chiave più avanti lungo la timeline. Riporta Offset a zero e... ta-da! Hai appena creato un'animazione di lettera auto-disegno.

C'è un piccolo problema con la nostra animazione, però. La lettera è animata, ma al contrario. Cioè, l'animazione inizia all'estremità sbagliata del percorso. Ci sono, almeno, alcuni modi per risolverlo. Innanzitutto, invece di animare l'offset da un valore positivo a zero, possiamo iniziare con un offset negativo e portarlo a zero. Sfortunatamente, questo potrebbe non funzionare come previsto in alcuni browser (ad esempio, Safari non accetta offset di tratto negativi). Mentre aspettiamo che questo bug venga corretto, scegliamo un approccio diverso.

Cambiamo il valore dei trattini in modo che il percorso inizi con uno spazio vuoto seguito da un trattino (per impostazione predefinita, le linee tratteggiate iniziano sempre con un trattino). Quindi invertire i valori dell'animazione Offset. Questo animerà la linea nella direzione opposta.

Ora che abbiamo finito con "H" possiamo passare all'animazione di tutti gli altri percorsi allo stesso modo. Alla fine, finiamo animando il punto del punto esclamativo. Poiché è un cerchio con un riempimento, non un contorno, non useremo Path Animator. Invece, usiamo Scale Animator per far apparire il punto alla fine dell'animazione.

Ricorda sempre di controllare la posizione dell'origine di trasformazione di un elemento quando giochi con le animazioni in scala. In SVG, tutti gli elementi hanno la loro origine di trasformazione nell'angolo in alto a sinistra della tela per impostazione predefinita. Questo spesso rende le funzioni di trasformazione del codice un compito molto difficile e noioso. Fortunatamente, SVGator ci salva da tutta questa seccatura calcolando tutte le trasformazioni in relazione all'oggetto, piuttosto che alla tela. Per impostazione predefinita, SVGator imposta l'origine di trasformazione di ogni elemento nel proprio angolo in alto a sinistra. Puoi cambiarne la posizione dalla timeline, usando un pulsante accanto al nome del livello.

Aggiungiamo il tocco finale all'animazione e regoliamo le funzioni di temporizzazione. Le funzioni di temporizzazione definiscono la velocità nel tempo degli oggetti animati, consentendoci di manipolarne la dinamica e rendere l'animazione più naturale.

In questo caso, vogliamo dare l'impressione che il testo venga scritto da un unico movimento continuo di una mano. Pertanto, ho applicato una funzione Ease-in alla prima lettera e una funzione Ease-out all'ultima lettera, lasciando le lettere centrali con una funzione lineare predefinita. In SVGator, le funzioni di temporizzazione possono essere applicate dalla timeline, accanto ai parametri dell'Animator:

Dopo aver applicato la stessa logica al punto esclamativo, la nostra animazione è fatta e pronta per essere esportata!

Esempio n. 2: icona animata

Ora analizziamo un esempio più incentrato sull'interfaccia utente. Qui useremo SVGator per replicare una popolare animazione di icone: trasformare un menu di hamburger in un pulsante di chiusura.

L'obiettivo dell'animazione è trasformare in modo fluido l'icona in modo che la barra centrale dell'hamburger diventi un cerchio e le barre circostanti si incrocino creando un'icona vicina.

Preparazione del file

Per capire meglio cosa stiamo costruendo e come preparare un file per tale animazione, è utile iniziare con uno schizzo di massima che rappresenta gli stati chiave dell'animazione.

Una volta che abbiamo un'idea generale di cosa consiste la nostra animazione, possiamo disegnare le forme che ci permetteranno di crearla. Cominciamo con il cerchio. Poiché utilizzeremo l'animazione del percorso, dobbiamo creare un percorso che copra l'intero percorso della linea, iniziando come una barra dritta al centro del menu dell'hamburger e finendo come un cerchio attorno ad esso.

Le altre due barre dell'icona del menu hanno un compito più semplice: le ruoteremo e ci allineeremo al centro del cerchio. Una volta combinate tutte le forme insieme, siamo pronti per esportare il file come SVG e importarlo in SVGator.

Creazione di un'animazione

Iniziamo aggiungendo la prima forma alla timeline e applicandovi Path Animator. Per lo stato iniziale, vogliamo che sia visibile solo la linea orizzontale nel mezzo, mentre il resto del percorso rimane nascosto. Per ottenerlo, imposta la lunghezza del trattino in modo che sia uguale alla lunghezza delle linee dell'hamburger. Questo renderà la nostra linea centrale dritta dell'icona del menu. Per trovare il valore corretto, puoi utilizzare la lunghezza di una delle altre linee dell'hamburger. Puoi copiarlo dalla timeline o dal pannello Proprietà nella barra laterale destra dell'app.

Quindi imposta la lunghezza dello spazio successivo su un valore maggiore della lunghezza rimanente del percorso in modo che diventi trasparente.

Lo stato iniziale della nostra animazione è ora pronto. Quello che succede dopo è che trasformiamo questa linea in un cerchio. Per fare ciò, due cose devono accadere contemporaneamente. Innanzitutto, utilizziamo Offset per spostare la linea lungo il percorso. In secondo luogo, cambiamo la larghezza del trattino per allungare la linea e coprire l'intero cerchio.

Con il cerchio pronto, occupiamoci dell'icona di chiusura. Proprio come prima, dobbiamo aggiungere due animazioni contemporaneamente. Innanzitutto, vogliamo che la linea superiore si pieghi verso il basso (45 gradi) e la linea inferiore si muova verso l'alto (-45 gradi) finché non si incrociano simmetricamente. In secondo luogo, dobbiamo spostare le linee leggermente a destra in modo che rimangano allineate con il cerchio.

Come potresti ricordare dall'esempio precedente, in SVGator, le origini di trasformazione si trovano nell'angolo in alto a sinistra per impostazione predefinita. Questo è molto conveniente per noi perché, in questo caso, è esattamente dove vogliamo che siano. Tutto quello che dobbiamo fare è applicare gli angoli di rotazione corretti.

Quando si tratta di allineare le linee con il cerchio, si noti che non è necessario spostarle separatamente. Invece di aggiungere Animatori a entrambe le linee, possiamo aggiungere un gruppo che li contiene entrambi alla timeline e animarli insieme a un singolo Animatore di posizione. Questo è uno di quei momenti in cui una struttura di file bella e pulita ripaga.

La prossima cosa da fare è aggiungere un'animazione inversa che trasforma il pulsante di chiusura in un menu di hamburger. Per raggiungere questo obiettivo, possiamo sostanzialmente seguire i passaggi precedenti in ordine inverso. Per velocizzare un po' le cose, copia e incolla i fotogrammi chiave esistenti sulla timeline: questo è l'ennesimo miglioramento che SVGator ha introdotto negli ultimi mesi.

Una volta fatto, non dimenticare di regolare le funzioni di cronometraggio. Qui, ho deciso di utilizzare un effetto Facilità in uscita su tutti gli elementi. La nostra icona è pronta per l'azione.

Implementazione

Anche se l'implementazione delle microinterazioni va ben oltre lo scopo di questo articolo, vorrei dedicare un momento a descrivere brevemente come tale animazione può essere realizzata in un progetto reale.

Le illustrazioni e l'animazione decorativa sono generalmente più semplici. Abbastanza spesso, puoi utilizzare i file SVG generati da SVGator fuori dagli schemi. Non possiamo dire questo della nostra icona, però. Vogliamo che la prima parte dell'animazione venga attivata quando gli utenti fanno clic sul pulsante per aprire il cassetto del menu e che la seconda parte dell'animazione venga riprodotta dopo aver fatto clic per la seconda volta per chiudere il menu.

Per fare ciò, dobbiamo suddividere la nostra animazione in alcuni pezzi separati. Non discuteremo qui i dettagli tecnici dell'implementazione di tale animazione, poiché dipende molto dall'ambiente e dallo stack tecnologico con cui stai lavorando; ma ispezioniamo almeno il file SVG generato per estrarre gli stati di animazione cruciali.

Inizieremo nascondendo lo sfondo e regolando le dimensioni della tela in modo che corrispondano alle dimensioni dell'icona. In SVGator, possiamo farlo in qualsiasi momento e non ci sono restrizioni alle dimensioni della nostra tela. Possiamo anche modificare gli stili dell'icona, come il colore e la larghezza del tratto, e testare come apparirà la tua grafica su uno sfondo scuro usando un interruttore nell'angolo in alto a destra.

Quando siamo pronti, possiamo esportare l'icona in SVG e aprirla in un editor di testo.

Gli elementi che vedi nel corpo del documento sono i componenti della tua grafica. Dovresti anche notare che la prima riga di codice è eccezionalmente lunga. Subito dopo il tag di apertura <svg> , c'è un elemento <style> con un sacco di CSS minimizzato all'interno. È lì che avviene tutta l'animazione.

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

È davvero carino da parte di SVGator minimizzare il codice per noi. Tuttavia, dovremo annullarlo. Una volta che il codice CSS è stato scritto per intero (puoi farlo negli strumenti di sviluppo del tuo browser o in uno dei tanti formattatori di codice online), vedrai che è un lungo elenco di @keyframes seguito da un elenco di regole di id che utilizzano i @keyframes nelle loro proprietà di animation .

Il codice può sembrare illeggibile (anche se ben formattato) ma, piuttosto, è molto ripetitivo. Una volta compresa la regola sottostante, seguirla non è più così difficile. Innanzitutto, abbiamo i @keyframes . Ogni elemento animato ha la propria @keyframes @. Sono ordinati nello stesso ordine degli elementi in SVGator. Pertanto, nel nostro caso, la prima regola @ si applica alla barra centrale dell'icona dell'hamburger, la seconda alla barra in alto e così via. I fotogrammi chiave all'interno corrispondono anche all'ordine dei fotogrammi chiave creati in SVGator:

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

Tutto ciò che devi fare ora è utilizzare questi valori dai fotogrammi chiave per codificare la tua interazione. C'è ancora molto lavoro da fare, ma grazie a SVGator la parte cruciale è già stata fatta.

Quello che succede dopo è un'altra storia. Tuttavia, se sei curioso di vedere un esempio di come questa animazione potrebbe funzionare in pratica, ecco un piccolo CodePen per te:

L'esempio è costruito con React e utilizza gli stati per cambiare le classi CSS e attivare le transizioni tra i rispettivi valori CSS. Pertanto, non sono necessarie proprietà di animation e @keyframes @-regole.

Puoi utilizzare una serie di priorità personalizzate CSS elencate nella parte superiore del codice SCSS per controllare lo stile dell'icona e la durata delle transizioni.

Esempio n. 3: illustrazione animata

Per il terzo e ultimo esempio di questo articolo, creeremo un'illustrazione animata di un atomo con particelle orbitanti.

Linee tratteggiate e linee tratteggiate

Nei due esempi precedenti, abbiamo sfruttato i percorsi SVG tratteggiati. Le linee tratteggiate sono fantastiche ma sapevi che SVG supporta anche le linee tratteggiate? Una linea tratteggiata in SVG non è né più né meno di una linea tratteggiata con maiuscolo rotondo e la lunghezza dei trattini è uguale a zero.

Se possiamo avere un percorso con molti punti, chi ha detto che non possiamo avere un percorso con un solo punto? Anima l'offset del tratto e hai un'animazione di un cerchio che segue qualsiasi percorso desideri. In questo esempio, il percorso sarà un'ellisse e un cerchio rappresenterà una particella orbitante.

Preparazione del file

Poiché nessun elemento SVG può avere due tratti contemporaneamente, per ciascuna delle particelle abbiamo bisogno di due ellissi. Il primo sarà un'orbita, il secondo sarà per la particella. Moltiplicalo per tre, combinalo con un altro cerchio al centro per il nucleo ed eccolo qui: una semplice illustrazione di un atomo, pronta per essere animata.

Nota : al momento della scrittura, creare linee tratteggiate in Figma è un compito difficile. Non solo non puoi impostare la lunghezza di un trattino su zero, ma non puoi nemmeno creare uno spazio tra i trattini abbastanza lungo da coprire l'intero percorso. E quando si tratta di esportare, tutte le impostazioni sono andate comunque. Tuttavia, se stai lavorando con Figma, non scoraggiarti. Risolveremo facilmente tutti questi problemi in SVGator. E se stai lavorando in Sketch, Illustrator o simili, non dovresti riscontrare affatto questi problemi.

Creazione di un'animazione

Dopo aver importato il file SVG in SVGator, inizieremo correggendo le linee tratteggiate. Come accennato in precedenza, per ottenere un punto circolare perfetto, abbiamo bisogno di una lunghezza del trattino impostata su zero. Impostiamo anche la lunghezza del divario uguale alla lunghezza del percorso (copiato dall'alto). Questo renderà il nostro punto l'unico visibile.

Con tutte e tre le particelle pronte, possiamo aggiungere nuovi fotogrammi chiave e animare gli offset di un'intera lunghezza del percorso. Infine, giochiamo un po' con i valori di Offset per rendere le posizioni dei punti un po' più casuali.

Ricorda che se trovi la tua animazione troppo veloce o troppo lenta puoi sempre cambiarne la durata nelle impostazioni. Al momento, SVGator supporta animazioni lunghe fino a 30 secondi.

Come tocco finale, ho aggiunto un po' di rimbalzo all'intera grafica.

Ora l'animazione è pronta e può essere utilizzata, magari come grafica del caricatore.

Una breve parola sull'accessibilità

Come puoi vedere, non c'è quasi un limite a ciò che può essere ottenuto con SVG. E le animazioni del percorso sono una parte molto importante del suo kit di strumenti. Ma come disse una volta un uomo saggio, da un grande potere derivano grandi responsabilità. Si prega di astenersi dall'abusarne. L'animazione può aggiungere vita al tuo prodotto e deliziare gli utenti, ma troppe animazioni possono anche rovinare l'intera esperienza.

Inoltre, considera la possibilità di consentire agli utenti di disabilitare le animazioni. Le persone che soffrono di cinetosi e altre condizioni correlate troveranno questa opzione molto utile.

Conclusione

Questo è tutto per oggi. Spero che questo viaggio attraverso le possibilità delle animazioni dei percorsi vi sia piaciuto. Per provarli tu stesso, visita il sito Web di SVGator dove puoi anche conoscere le sue altre funzionalità e prezzi. Se hai commenti o domande, non esitare ad aggiungerli nei commenti. E resta sintonizzato per i prossimi aggiornamenti su SVGator: ci sono molte altre fantastiche nuove funzionalità già in arrivo!

Ulteriori letture

• "Come funziona l'animazione della linea SVG", Chris Coyer Una guida illustrata alle animazioni dei percorsi SVG che spiega magnificamente come funzionano davvero.
• "Una guida pratica a SVG e strumenti di progettazione", Mikolaj Dobrucki Una guida completa alle nozioni di base di SVG per aiutarti a capire come SVG viene generato dagli strumenti di progettazione e come lavorarci a tuo vantaggio.
• "Revisiting Prefers-Reduced-Motion, The Reduced Motion Media Query", Eric Bailey Un'ottima introduzione al tema dell'animazione e dell'accessibilità.
• "Come creare un'animazione di percorso", SVGator Un breve e dolce tutorial video di YouTube su Path Animator

Risorse utili

• Animazioni di percorso SVGator Leggi di più su Path Animator dalla sua pagina di destinazione originale.
• Tutorial SVGator Una serie di tutorial video che spiegano le caratteristiche cruciali di SVGator.
• Centro assistenza di SVGator Risposte alle domande più comuni su SVGator, le sue funzionalità e i piani di abbonamento.