34: Un tour del software SVG - Trucchi CSS

Anonim

C'è molto che puoi fare con SVG senza alcun software. Supponendo che tu abbia una buona fonte di immagini SVG online, potresti usarle direttamente. Ma è abbastanza comune che avremo bisogno di aggiustarli un po '. So che il mio flusso di lavoro più comune è trovare qualcosa di simile a ciò di cui ho bisogno da siti di fotografia stock o set di icone o simili, e quindi manipolarlo per essere esattamente come voglio. Modificare le forme, eliminare elementi, cambiare i colori, adattare la tavola da disegno, tutto quel materiale. È molto più facile fare cose del genere con un software fatto apposta, piuttosto che manualmente nel codice.

Il software più comune che abbiamo utilizzato in questa serie è Adobe Illustrator ($ 19,99 / mese). Illustrator è un software grande e robusto per Mac o PC. Un sacco di funzioni. Ed è un po 'come scegliere la chitarra come strumento che vuoi imparare. Ci sono un sacco di tutorial là fuori che lo usano. Ci sono un sacco di persone là fuori che lo usano a cui puoi rivolgerti. Illustrator può SALVARE COME in SVG, il che significa che è un formato di file nativo con cui puoi lavorare, il che è piuttosto carino.

In tutti i diversi software che esaminiamo, nessuno di essi produce l'SVG ottimizzato come probabilmente lo vorresti per il web. Tutti inseriscono alcuni commenti generici e cose di tipo metadati che dicono in quale software è stato creato e simili, che è completamente inutile per l'uso sul web. Peggio ancora, in realtà, poiché aumenta la dimensione del file che rende le cose più lente. Dovrai sempre ottimizzare l'SVG che ottieni da qualsiasi software (faremo presto uno screencast sull'ottimizzazione).

Inkscape è un'altra opzione popolare per l'editing SVG. Penso che sia probabile perché è multipiattaforma (lavoro figlio Mac, PC, Linux) ed è gratuito. È anche in circolazione da molto tempo e ha un robusto set di funzionalità. Lo trovo un po 'imbarazzante, principalmente come utente Mac perché l'interfaccia è così stranamente diversa da qualsiasi altra cosa a cui sono abituato.

Mi è piaciuto Sketch, che è solo per Mac ($ 99). Mi piace particolarmente che tu possa selezionare oggetti e gruppi e poi "Rendi esportabile" e quindi SVG è un'opzione per esportare come, che ti dà SVG ritagliato e perfettamente utilizzabile da usare.

Abbiamo anche esaminato iDraw (Mac $ 24,99 e iOS $ 8,99). C'è anche WebCode (Mac $ 39,99).

Non li abbiamo esaminati specificamente nel video, ma ci sono anche alcuni editor SVG basati su browser che sono davvero carini:

  • Modifica SVG
  • Metodo
  • Mondrian