20 utili strumenti SVG per una grafica migliore
SVG sta guadagnando popolarità nel web design in questi giorni e puoi usare strumenti come Illustrator o Inkscape per creare grafica SVG. Ma quando si tratta di web design, dovremmo sempre ottimizzare per risultati più leggeri.
Qui il 20 strumenti che è possibile utilizzare per lavorare con SVG in modo rapido ed efficiente. Disponiamo principalmente di strumenti online che possono aiutare nell'ottimizzazione, conversione, creazione di modelli e altro ancora.
Sistema di coordinate SVG interattivo
Quando lavori con SVG non puoi lasciare le sue coordinate. Questo è un grande strumento interattivo di Sara Souiden, per aiutarti scopri come funzionano le coordinate SVG. Usando il viewBox e preserveAspectRatio su SVG, guidato da linee arancioni e viola e un pratico righello, puoi giocare mentre impari come funzionano le coordinate SVG.
B64
B64 è uno strumento semplice per ottimizzare le immagini e trasformarle nel formato base64. Puoi rilasciare le tue immagini SVG (anche altri formati come JPG e PNG funzionano) e poi catturare il CSS con base64 background-image come risultato.
SVGO
SVG che può essere esportato informazioni inutili che può essere rimosso senza alterare il risultato del rendering. Se lo desidera rimuovi i metadati dell'editor, i commenti o gli elementi nascosti, puoi usare SVGO.
È possibile installare SVGO tramite npm, $ [sudo] npm install -g svgo oppure utilizzare la versione della GUI che offre il trascinamento della selezione per l'ottimizzazione di SVG.
SVG OMG
SVG OMG gira la riga di comando di SVGO (lo strumento precedente) in a Versione GUI più intuitivo e facile da usare. Appena attiva i pulsanti per attivare o disattivare ciascuna funzione. Alla fine puoi prendere il risultato anche come file immagine e codice.
SVG ora
Quando lavori su Illustrator, l'SVG esportato contiene alcune informazioni che non sono necessarie. Con questo strumento lo farai ottieni la versione ottimizzata del tuo SVG esportato direttamente dallo spazio di lavoro di Illustrator. Questo strumento aggiunge un pannello con alcune opzioni per ottimizzare SVG. Puoi scaricare SVG ora dalla pagina dei componenti aggiuntivi di Creative Cloud.
Convertitore da SVG a PNG
Volere esportare file SVG in formato PNG? Senza aprire applicazioni come Illustrator per farlo? Usa questo strumento di conversione da SVG a PNG per ottenere output di immagini in formato PNG e anche URI di dati PNG Base64 se ne hai bisogno.
SVG Circus
Se pensi che le animazioni del caricatore siano interessanti, ora puoi crearlo facilmente utilizzando SVG con SVG Circus. Gli strumenti ti permettono di crea il tuo caricatore, spinner o qualcosa di simile usando l'animazione in loop. Imposta "Attore", posizione, dimensione, colore e altri dal pannello, quindi esporta per ottenere i risultati.
SVG Sprite
SVG Sprite è un modulo Node.js, che ottimizza un mucchio di file SVG, e li trasforma in tipi di sprite SVG inclusi sprite CSS tradizionali per immagini di sfondo e / o in primo piano, pile SVG e altro.
Quasi
Con quasi puoi generare immagini Quasicrystal come quello che vedi qui sotto. Questo generatore è sperimentale, ma i risultati sono decisamente interessanti. Puoi giocare cambiando il valore delle opzioni, quindi scarica i risultati con il pulsante 'Salva SVG'.
Modello semplice
Creazione di modelli con SVG non è mai stato più facile o più divertente. Carica la tua immagine, ridimensiona o modifica la spaziatura, ruota e ricolora fino a ottenere uno splendido motivo. Puoi vedere in anteprima il risultato prima di scaricarlo.
Trianglify Generator
Crea splendidi motivi geometrici SVG con Trianglify Generator. È possibile impostare la casualità / variante del colore, la dimensione della granularità e scegliere una tavolozza di colori con cui lavorare. Questo strumento è una versione GUI di Trianglify.
Gradiente SVG
Sai che puoi creare sfumature con i CSS, ma lo sapevi che puoi fare lo stesso con SVG? Il modo più semplice per generare gradiente su SVG è usando questo strumento. Basta inserire start e stop color per ottenere il codice per il risultato generato. È inclusa anche una riserva sui CSS.
Esporta PSD in SVG
Se si utilizza Photoshop come editor di immagini per il proprio lavoro, a volte potrebbe essere necessario converti il tuo disegno nello spazio di lavoro di Photoshop in SVG, che è un formato non supportato in Photoshop. Scarica lo script su questo strumento, quindi copia su Adobe Photoshop / predefiniti / script cartella.
Rinominare un nome di livello vettoriale con l'estensione SVG (ad esempio layer1 diventa layer1.svg) e ora è possibile eseguire lo script da File> Script> PS in SVG.
Filtri SVG
Sai che con SVG sei in grado di aggiungere effetti come tonalità, saturazione, sfocatura, sovrapposizione di colori lineari e molti altri alle immagini? Ecco uno strumento che visualizza questi effetti, quindi ti dà uno snippet per renderlo facile incorporare l'effetto nel tuo progetto.
SVG Morpheous
SVG Morpheous è una libreria JavaScript che ti permette di trasforma un'icona SVG da una forma all'altra. È possibile impostare l'effetto di andamento, la durata delle animazioni di transizione e anche la direzione di rotazione.
Generatore di clip path
SVG ti consente di fare clic sulla clip immagine con Shape. Questo è abbastanza facile se la forma è sotto forma di un quadrato o un cerchio. Ma cosa se la forma è una con molti punti o è una forma poligonale? Ecco dove hai bisogno di questo strumento Clip Path Generator.
Chartist.js
Chartist.js è una libreria per creare grafici reattivi altamente personalizzabili. Utilizza SVG per visualizzare i grafici, che possono anche essere animati utilizzando SMIL. Con questa libreria, è possibile creare grafico a linee, grafico a torta, grafico a barre e altri tipi di grafici e persino aggiungere loro un'animazione.
Generatore di tratti di tratto SVG
Questo è uno strumento semplice per generare linee tratteggiate utilizzando SVG ictus dasharray. Prima scegli un tipo di trattino dall'elenco, quindi personalizzalo in termini di larghezza, altezza, rotazione o colore. Successivamente puoi prendere il codice HTML e il CSS per applicare questa lineetta nel tuo progetto.
Method Draw: un semplice editor SVG
Method Draw è un editor SVG basato sul web, con un interfaccia intuitiva fornita con strumenti su entrambi i lati della tela. È possibile disegnare linee, forme, inserire testo o utilizzare forme incorporate, quindi modificare le proprietà degli oggetti disegnati. Esporta l'immagine in formato SVG (anche in formato SVG base64) o salva direttamente in PNG.
Esporta Flash in SVG animato
Anche se non è più molto popolare, c'è la possibilità che alcuni di voi abbiano difficoltà a lasciare andare Flash. Se è così, puoi trasforma l'animazione flash in SVG per mantenerla compatibile con le nuove tecnologie. Questo strumento costituisce un'estensione dell'applicazione Flash e può funzionare su CS5, CS6 e CC.
Puoi esportare in SVG quando si tratta di forme, simboli bitmap, tweens di movimento classico, interpolazioni di forma (per altri, si può dire che il successo è discutibile).
