Immagini Vettoriali – I migliori SVG Editor Online del 2021

Condividi

SOMMARIO ARTICOLO – In questo articolo andremo ad evidenziare alcuni strumenti utili per i professionisti riguardo le immagini vettoriali e daremo uno sguardo ai migliori svg editor e generatori per le forme, gli sfondi, dai visualizzatori di percorso SVG ai generatori SVG > JSX.

immagini vettoriali - svg editor
I migliori generatori ed editor di Immagini vettoriali svg online

Generatori di sfondo Immagini vettoriali SVG

Sappiamo quanto è importante una buona grafica di sfondo, soprattutto se vogliamo attirare l’attenzione dell’utente verso un post in particolare, oppure, semplicemente rinvigorire il nostro profilo sulle piattaforme sociali. Per rendere il passaggio di creazione di sfondi colorati e astratti facile, Coolbackgrounds racchiude adesso, in un unico posto, fantastici generatori di sfondo in formato vettoriale i raster.

Modelli e generatori di Doodle

Da forme geometriche di base possiamo arrivare davvero ovunque e creare immagini vettoriali e raster di ogni tipo, e grazie alla creatura di alcuni designer, ovver Tabbied, possiamo generare colorati doodles geometrici da preset già prefabbricati.

Selezioniamo un preset, i colori, griglia, frequenza di un pattern, colori effettivi e scarichiamo il disegno come PNG o SVG per il formato vettoriale.

SVG Editor – Color Matrix Mixer per i Filtri

Insieme ai filtri CSS, quelli SVG vengono utilizzati per le immagini bitmap, al fine di perfezionarle, anche se possono fare ancora di più; SVG Color Matrix Mixer ci permette di generare filtri matrice di colori complessi per i componenti della pagina, qualunque essi siano, e utilizzare feColorMatrix filtro SVG come valore per la filter proprietà CSS e cambiare il colore agli elementi HTML. Questo piccolo strumento ci fornisce anche uno snippet code da applicare al filtro, immediatamente.


SVG Repeating Patterns Generators – Generator di Pattern vettoriali

Per la ripetizione delle immagini di sfondo, e per molto altro, ci sono adesso tante altre opzioni; con HeroPatterns possiamo avere svariati patterns ripetuti, adatti per immagini vettoriali o raster di sfondo, trame o tessere, oltre a poter regolare i colori di sfondo e quelli di primo piano. Abbiamo anche da segnalare:

  • PatternMonster: Vi sono 180 modelli – di cui è possibile cercare quello specifico – che possiamo scremare per colore e modalità.
  • Wowpatterns: Un’infinità di modelli vettoriali gratuiti basati su forme, organiche (forme) e temi.
  • Plain Pattern: Permette il caricamento di forme SVG per la creazione di un pattern ripetuto e la possibilità di esportarlo come file SVG. Oppure possiamo utilizzare la forma SVG già esistente.
  • PatternFills: Una moltitudine di modelli in bianco e nero, disponibili anche dalla riga di comando.

SVG Squircicle Maker

Si tratta di un generatore di immagini vettoriali di forme organiche per qualsiasi tipo di immagine o grafica di sfondo; dovremo soltanto occuparci della scala, rotazione, curvatura, colore e riempimento e Squircircle farà tutto il lavoro. L’SVG esportato dal generatore potrà successivamente essere da noi inserito nel codice HTML / CSS o nell’applicazione di progettazione.

Se il nostro obiettivo ci obbligasse ad un editor più avanzato per le nostre risorse SVG (come scene blob o onde a strati ad esempio), allora la scelta potrebbe ricadere su Haikei, uno strumento completo con tutti i tipi di generatori con risorse disponibili come PNG e SVG.

Generatore di forme geometriche vettoriali SVG

Se vogliamo distinguerci dalla massa e portare personalità ai nostri progetti digitali, la firma è una delle cose che dobbiamo definire che può essere composta da forme insolite, un effetto glitch o uno scarabocchio a matita, per esempio. Possiamo produrre linee geometriche casuali, regolare le formule e le distanze tra le forme disegnate, e poi esportarle come SVG grazie a Flow Lines Generator. Proprio perché nessun altro avrebbe quel preciso trattamento visivo varrebbe la pena dargli un’occhiata.

immagini vettoriali svg editor

Generatori di Divisori di Sezione SVG

Le sezioni in una pagina non è raro separarle con un cambiamento, seppur leggero, di colore di sfondo; con ShapeDivider possiamo generare divisori di forma personalizzati ed esportarli in SVG. Tra i dieci presenti definiamo il colore, regoliamo altezza e larghezza insieme ad altre piccole impostazioni e, su schermi stretti e grandi, ne possiamo visualizzare l’anteprima in tempo reale.

Generatori di Immagini vettoriali SVG in stile onde

Nell’ultimo biennio, una larga e corposa fetta di generatori di onde è stata rilasciata ai professionisti, segno che i divisori di sezione richiedono un po’ di attenzione in più. Tra questi abbiamo SVGwave che ci permette di scegliere un’opzione generata casualmente ed esportarla in SVG o PNG dopo averne regolato colori e vari livelli. Per qualcosa di più sofisticato abbiamo:

  • Waverly: onde morbide, lineari e nitide tra cui scegliere
  • SVG Gradient Wave Generator: Tonalità, saturazione, ampiezza e levigatezza, quindi si spinge ancora oltre
  • Loading.io: oltre a generarle ci permette anche di animarle. Quindi, se i nostri progetti prevedessero le onde, qui andremmo sul sicuro

SVG Woodworking Patterns

Poter generare i cosiddetti modelli kumiko, modelli utilizzati in una tecnica molto antica della lavorazione del legno giapponese grazie all’inserimento di tanti pezzettini di legno in un reticolo. Con Kumiko Generator, dopo aver caricato l’immagine, potremo giocare con una serie di modelli predefiniti ed esportare il lavoro in SVG.

Se stiamo cercando qualcosa di simile, magari che ruota attorno a mosaici, strade cittadine, grafici a linee di cresta o griglia isomorfa, possiamo dare un’occhiata ai generatori collezionati da Mark Surguy.

SVG Warping Generator

Giocare con il testo SVG al fine di piegarlo o deformarlo è un processo che, fatto manualmente, richiede un bel po’ di tempo. Con Warp SVG possiamo regolare il numero dei punti di ancoraggio al fine di trascinarli per la deformazione – oppure possiamo regolarne il livello di levigatezza – tenendo premuto space possiamo regolare il testo attorno al canvas.

Path Visualizers SVG

Riusciamo e leggere e visualizzare SVG? No, probabilmente. Ma se avessimo bisogno di aggiustare rapidamente qualcosa, senza editor SVG (oppure colorare o rimuovere del tutto una forma), comprendere come un’illustrazione SVG viene effettivamente disegnata sullo schermo potrebbe essere un’ottima idea, ed in questo SVG Path Visualizer corre in nostro aiuto. Possiamo inserire di un percorso SVG e lo strumento, in un linguaggio comprensibile a noi umani, ci spiega quello che accade dietro le quinte.

Successivamente, è possibile utilizzare un editor di tracciati SVG al fine di regolarli leggermente. Oppure, se necessitasse regolare a livello di programmazione i percorsi, possiamo utilizzare svgpathtools: una suite di strumenti atti alla manipolazione e all’analisi di curve di Bezier e oggetti Path SVG.

Strumenti di ritaglio – SVG Cropping tools

Capita di ricevere qualche file SVG da un illustratore – o, comunque, da terze parti – e vedere che attorno all’illustrazione vi è del blank space, che causa inutile spazio vuoto attorno ad un’illustrazione dopo averla posizionata su una pagina. Oppure ci troviamo con immagini di dimensioni, seppur leggermente, diverse e dobbiamo normalizzarle. In giro ci sono strumenti appositi a questi scopi e uno di questi è SVG Crop, strumento grazie al quale possiamo rimuovere lo spazio vuoto. Basta caricare il file SVG e lo strumento troverà le dimensioni del contenuto e le manipolerà di conseguenza. Possiamo caricarne più d’uno alla volta e, a processo terminato, copiarli negli appunti o scaricare gli SVG ritagliati con un file zip.

Se le nostre necessità fossero più importanti, se volessimo più controllo e un ritaglio più certosino per cerchio, poligono o forme personalizzate (e molto altro) c’è SVG Cropper.

Generatori di poligoni SVG

Anche se più semplici da costruire rispetto alle onde, i poligoni non ci obbligano a crearli con le nostre mani; SVG Polygon Generator ci offre la possibilità di definire il raggio, il numero dei lati, la spaziatura e genererà un elemento polygon tutto per noi.

Generatore di visualizzazione dati SVG

Se abbiamo raccolto una moltitudine di dati, pagine e pagine di fogli di calcolo e vogliamo dargli un senso ed esportarli più rapidamente, possiamo trasformarli in una sorta di visualizzazione; con RAWgraph possiamo inserire i dati, scegliere tra i modelli disponibili (possiamo costruire il nostro oppure scegliere tra sunburst, dendogramma circolare o scafo convesso multiplo) regolare e verrà generato il nostro SVG. Presenti anche una serie di video tutorial per poter utilizzare al meglio lo strumento, utility per la riga di comando e una galleria delle creazioni fatte per mezzo dello strumento (che utilizza D3.js, ottima libreria JS per la manipolazione di documenti che si basano sui dati).

JPG/PNG a SVG Transformation

Magari possediamo un’immagine bitmap e desideriamo trasformarla nella sua controparte vettoriale, anche al fine di animarla; bene, possiamo tracciarli al fine di creare un’alternativa vettoriale vista l’impossibilità di convertirli uno in un altro. Gli editor vettoriali possiederanno una funzionalità del genere che, per impostazione predefinita, molti di loro avranno Potrace o simili.

  • PicSVG: Si tratta di uno dei tanti strumenti disponibili in rete che ci consente di caricare un’immagine (fino a 4 MB) e traccerà l’immagine in questione per noi.
  • Oppure, se si vuol andare oltre, creando piccoli segnaposto SVG, animandoli e passando poi ad un’immagine reale con una transizione CSS in dissolvenza, possiamo utilizzare i segnaposto SVG dinamici (presente anche come componente gatsby-image).

SVG a JSX – JSX Transformation

Convertitore SVG JSX
Da SVG a JSX

Bisogna cambiare gli attributi SVG con i gemelli validi per JSX per utilizzare SVG in React e, naturalmente, al fine di ottenere questi risultati, esistono un paio di strumenti tili allo scopo:

  • SVG to JSX è uno strumento online (disponibile anche offline) e può essere installato come PWA dalla barra degli indirizzi.
  • SVG2JSX ci permette di scegliere tra functional e class del nostro componente, virgolette singole o doppie e altre poche varie impostazioni.
  • SVGR: permette di sostituire i valori degli attributi, aggiungere props SVG e offre versioni aggiuntive per TypeScript e React Native (nel caso avessimo bisogno di ulteriori chiarimenti o informazioni, avremo la possibilità di sfogliare un tutorial completo che offre, in un unico articolo “Come utilizzare SVGs in React“, tutti i dettagli).

Favicon Generator SVG

Si tratta di un processo che richiede un po’ più di tempo del dovuto; parliamo della creazione di una semplice favicon basata su lettere che, grazie a Hossein Sham, può essere semplificata grazie alla sua creazione, il tool gratuito Favicon Maker per la creazione di una favicon basata su lettere ed emoji, in formato PNG o SVG – a seconda delle nostre preferenze – in pochissimi secondi. Possiamo selezionare caratteri (anche quelli Google che sono supportati), emoji o lettera, la variante grassetto o corsivo, la dimensione, il colore e la forma dello sfondo. A risultato terminato possiamo copiare il codice sul nostro progetto oppure scaricare il file SVG o PNG.

SVG Sprites Generators

In tempi di HTTP 2 e 3, parlare di Sprite CSS potrebbe sembrare un qualcosa che appartiene al paleolitico, è vero. Ma, se abbiamo dozzine e dozzine di icone nella nostra interfaccia, caricarle allo stesso tempo potrebbe essere molto più che utile, ed è qui che gli Sprite CSS potrebbero tornarci utili se non per i PNG per gli SVG. Quindi, per evitare che molti SVG vadano ad intasare il markup usiamolo <use>

  • svg spreact ci consente di piazzare SVG al fine di creare uno sprite in modo che lo strumento lo riordinerà, ottimizzandolo e producendo uno sprite insieme al markup, e una demo, su CodePen.

SVG Icon Transitition Generator

Se abbiamo due icone SVG e vogliamo creare una transizione tra loro possiamo utilizzare Icon Transition Generator che ci permette di caricare le nostre icone in questione e lo strumento – basato sul browser – esporterà un singolo file SVG, codice JS per le animazioni incluso. Possibilità di scegliere tipo di interazione (passaggio del mouse) e tipo di animazione (rotazione o scala).

svgator svg editor
svgator è uno dei migliori svg editor online attualmente disponibili

Strumenti di animazione SVG

Anche se il bello dell’SVG sta nel poter creare animazioni composite lavorando direttamente con il codice (e, ovviamente, tutto il resto), non è detto che dobbiamo scrivere, da zero, ogni animazione:

  • Possiamo animare i tratti SVG con Vivus Instant
  • SVGArtista ha già diverse basic fill e stroke animation e con lo strumento possiamo definire direzione, ritardi, durata e andamento delle animazioni. Possiamo minimizzare il codice generato e utilizzare Autoprefixer per impostazione predefinita.
  • Se invece amiamo giochicchiare direttamente con il codice, con GSAP possiamo animare con JS, che si tratti di proprietà CSS, React, Canvas, SVG o qualunque cosa.

Simple Online SVG Editor

Se il nostro lavoro ci obbliga ad apportare qualche correzione ad un file SVG ma, al contempo, non vogliamo utilizzare app o software di grandi dimensioni, abbiamo due ottime alternative per questo: Boxy SVG ed Editor Method sono due ottime applicazioni web con funzionalità di modifica SVG di base e un editor visuale.

  • Vecta è uno strumento un po’ più avanzato che include strumenti per collaborazione in team, disegni Autocad e Vision e altro ancora
  • Per l’editing SVG sofisticato abbiamo uno strumento completo, un editor SVG, SVG-Edit
  • Per Mac, una più che leggera app open source per animazioni ed editing SVG, MacSVG

SVG Compression

Gli SVG esportati, per impostazione predefinita, potrebbero contenere dettagli non necessari e una montagna di meta informazioni (come duplicazioni o percorsi nascosti, tanto per citarne un paio). Al fine di ripulire per sempre, i file SVG possiamo utilizzare SVGOMG; possiamo specificare il livello di precisione e scegliere le funzionalità da rimuovere dagli SVG e, invece, quali desideriamo mantenere.

Se si necessitasse di utilizzare lo strumento dalla riga di comando, SVGO (strumento Node.js) che può essere utilizzato e configurato come parte del processo di compilazione, con ogni funzionalità disponibile come plug-in predefinito.

Gestore risorse SVG

Come teniamo traccia di tutti gli SVG sparsi e sapere come e dove trovarne uno facilmente? Con un gestore di risorse SVG desktop possiamo mantenerli tutti in un unico posto. Su SVGX possiamo aggiungere segnalibri, modificare il markup in tempo reale, cercare e visualizzare in anteprima le icone SVG (e tanto altro) con un solo clic.

svg editor

Code Snippet Generator

Anche se non si tratta di uno strumento prettamente legato agli SVG è comunque abbastanza utile specie quando si vuol condividere uno snippet code. Ray.so farà gran parte del lavoro e con lui possiamo scegliere tra alcune pre-impostazioni, modalità chiara o scura, lingua e padding. L’output è un PNG ad alta risoluzione che possiamo inserire direttamente nel canale Slack.

Conclusioni

Ci sono migliaia di app e software in giro per il web e speriamo che quasta lunga carrellata possa aiutarvi a risolvere alcuni problemini, a svolgere il vostro lavoro più serenamente possibile e togliervi qualche fastidio, che si incontra sempre, nel corso dei lavori quotidiani.

Buona fortuna!

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo