Share
Scalable Vector Graphics (SVG) è un formato di immagine vettoriale che ha iniziato la sua vita nel 1998. È stato sempre sviluppato pensando al web, ma solo ora il web ha effettivamente iniziato a recuperare terreno. Non si può negare la sua rilevanza oggi, quindi diamo un'occhiata alle basi per portare SVG da Illustrator al browser web.
Nota: Sto usando Adobe Illustrator CC per dimostrare le cose qui, ma altre versioni hanno strumenti e opzioni simili (se non identiche).
Il formato SVG è stato sviluppato e continua a essere mantenuto dal World Wide Web Consortium (W3C). Il W3C comprende un gruppo di persone intelligenti, che si sforzano di standardizzare il web, rendendolo un luogo aperto e accessibile a tutti.
SVG è buono per il web, soprattutto in questi giorni, poiché aggira il problema della risoluzione dello schermo. Non importa quanto siano densi i pixel del tuo nuovo smartphone, i vettori saranno sempre visualizzati in modo così netto come la neve appena caduta, il che non è sempre vero per le immagini rasterizzate.
La dimensione del file è sempre un problema con il web (nessuno vuole aspettare che un'immagine a 5Tb venga caricata nel browser tramite una connessione mobile) e quindi SVG è un formato vettoriale semplificato. È costruito con XML e molte "cose" non necessarie vengono rimosse, dando un file relativamente leggero.
Infine, dati questi blocchi di costruzione XML, i contenuti di un file SVG possono essere manipolati e disegnati come qualsiasi altro elemento di una pagina web. Le parti all'interno di un SVG possono essere isolate, i colori possono essere modificati, il peso del tratto può essere modificato, la trasparenza, possiamo persino applicare alcuni filtri (come la sfocatura), anche animare - tutto attraverso CSS e JavaScript.
I vantaggi di una qualità della linea nitida e la capacità di manipolare un elemento grafico sono autoesplicativi, ma dove puoi approfittarne? Ecco una breve lista di situazioni in cui SVG ha le sue caratteristiche:
Ogni giorno la grafica: Se stai utilizzando un'immagine su un sito Web, valuta se potrebbe essere o meno il formato SVG. Se è così, perché non usarlo? La fotografia sarebbe un esempio in cui l'SVG non ha senso, ma per tutto il resto, pensaci.
Icone: I siti web di tutto il mondo sono pieni di icone; sono universalmente compresi (se usati correttamente) e riducono il tempo necessario a un utente per elaborare un'interfaccia. Le icone in questi giorni vengono spesso applicate ai siti Web tramite i caratteri Web, ma possono anche essere inserite in una pagina come SVG. Icone perfettamente pulite e nitide per tutti, adorabili.
Loghi: Se c'è una cosa che un'azienda dovrebbe mantenere preziosa, è la sua identità. SVG offre il modo migliore per mostrare il marchio sul web, in modo semplice e semplice. I colori possono essere precisi, la qualità della linea è immacolata e lo stesso file può essere utilizzato ripetutamente su un sito Web, ma modificato a seconda delle circostanze. Perfezionare.
Riconosci questo logo? Decorazione: Non ho bisogno di vendere questa idea a un carico di artisti del vettore, vero??
Animazione: Attraverso CSS3 e JavaScript, un intero mondo di animazione si è aperto al web. Anche SVG è il veicolo perfetto, per tutti i motivi che ho elencato finora. Riesci ad immaginare i pulsanti che si animano quando li passi sopra? Icone che ti danno un feedback personalizzato diretto? Il cielo è davvero il limite.
Ecco cos'è SVG. Un formato vettoriale, sviluppato pensando al Web. Diamo un'occhiata a come possiamo usarlo.
Lavoreremo con un'immagine di base, per dimostrare cosa fa SVG.
Apri Illustrator, inizia un nuovo documento (File> Nuovo documento), assegnagli un nome se lo desideri e imposta la tavola da disegno a 300 x 300 px.
Fa poca differenza ciò che usi come vettore demo a questo punto, ma scegli qualcosa di relativamente semplice. Ho usato il glifo "No Pirates Allowed", liberamente disponibile con il font "Webdings" (non avrei mai pensato di usarlo per niente!)
Vai al glifi pannello (Tipo> Glifi) quindi selezionare il font "Webdings" per sfogliare i vari caratteri disponibili.
Con il Strumento di testo selezionato, fare clic sulla tavola da disegno, quindi doppio click il tuo glifo di scelta per farne uso.
Ora convertiremo questo glifo di tipo in contorni.
Nota: SVG supporta effettivamente gli oggetti di testo, ma per dimostrare le cose su un livello fondamentale, opteremo per i percorsi.
Seleziona il glifo, usando il Strumento di selezione (V):
Quindi vai a Tipo> Crea contorni.
Super! Ora abbiamo un oggetto vettoriale basato sul percorso.
Per salvare questo documento come SVG, vai a File> Salva, o File> Salva come ... Nel dialogo che si apre, scegli un percorso, dagli un nome al file (se non lo hai già fatto) e, soprattutto, seleziona SVG come formato:
Ti verrà quindi presentato un altro dialogo, questa volta con alcune opzioni SVG.
In verità, ignorare queste opzioni a questo punto ti servirà perfettamente. I valori predefiniti sono tutti come li vorresti in circostanze normali.
Tratteremo alcune di queste opzioni un po 'più tardi, ma per ora, colpisci ok.
Abbiamo un file SVG!
Abbiamo saltato le opzioni SVG perché non hai davvero bisogno di prestare molta attenzione a loro. Tuttavia, per il gusto di essere accurati, diamo un'occhiata.
Per cominciare, avremmo potuto scegliere due potenziali formati SVG nel dialogo di salvataggio.
SVGZ è fortemente compresso (zip, Suppongo) la versione di SVG. Fornisce una dimensione di file più piccola, ma trasforma l'XML all'interno del file stesso in termini senza senso, impedendoci di manipolare i vettori tramite CSS e JavaScript se vogliamo.
Il sempre mutevole panorama del web e il continuo sviluppo degli standard web fanno sì che SVG sia sempre in crescita. Puoi vedere questo grazie alla prima opzione quando si salva un file SVG: Profili SVG. Le scelte del profilo sono attualmente simili a questo:
Significano (più o meno) quanto segue:
Presto, saremo in grado di aggiungere SVG 2.0 a questa lista. In realtà, le sfumature di questi profili sono in gran parte irrilevanti per noi. SVG è in grado di gestire tutti i tipi di cose, ma per i vettori semplici attenersi all'attuale default di SVG 1.1 e la tua grafica andrà bene, per quanto possibile, sul web.
I file SVG possono contenere molto più dei semplici percorsi vettoriali. Gli oggetti di testo sono uno di questi esempi, e il Font opzione ti permette di determinare come vengono trattati gli oggetti di testo.
Parte dell'opzione di carattere implica subsetting. Questo è rilevante solo se hai scelto di non convertire il tuo testo in contorni.
La sottostringa incorpora i dettagli dei caratteri nel file SVG, consentendo al file di visualizzare caratteri che potrebbero non essere presenti sul sistema dell'utente. Incorporare interi caratteri (ovviamente) produce file molto più pesanti, anche se puoi scegliere quanti glifi devono essere inclusi.
Mentre siamo in tema di incorporamento, anche le ultime opzioni rimanenti possono avere un impatto sulle dimensioni del file.
Più o meno nello stesso modo in cui i file SVG dei caratteri possono contenere immagini bitmap. Dove vedi Posizione dell'immagine scegli "embed" per includere immagini nel file in forma di codice, o scegli "link" per fare in modo che le immagini facciano semplicemente riferimento. Funziona allo stesso modo del posizionamento delle immagini all'interno di Illustrator e ha un impatto notevole sulle dimensioni del file finale.
L'ultima casella di controllo qui consente di conservare le funzionalità di modifica di Illustrator, se necessario. Ciò significa che verranno mantenuti i dettagli di tutti i livelli, filtri ed effetti, simboli ecc. Di nuovo, tieni questo controllo deselezionato se SVG è pronto per la produzione e la dimensione del file è importante.
Nota: Si consiglia di mantenere un file .AI funzionante da utilizzare per la modifica.
Infine, i tre pulsanti al piede del dialogo delle opzioni eseguono le seguenti operazioni:
Se non sei abituato a lavorare direttamente con il web, HTML, i browser, tutte queste cose, ci sono alcune cose da prendere in considerazione a questo punto.
In primo luogo, dimostriamo che il tuo browser può gestire perfettamente questo formato. Pulsante destro del mouse il tuo nuovo file SVG lucido e scegli di aprirlo con il tuo browser web standard:
I browser meno recenti, come Internet Explorer 8 e versioni precedenti, non supportano il formato SVG e purtroppo non verranno riprodotti.
Ma fino a quando utilizzi un browser moderno, il file SVG si aprirà e verrà visualizzato senza problemi.
La prima cosa da notare è che il file SVG ha mantenuto le dimensioni che originariamente gli davamo. Il nostro SVG è stato aperto a 300 x 300 px, la tavola da disegno ha dettato i confini esterni e l'icona del pirata è posizionata come dovrebbe essere al centro.
Finora abbiamo creato un file SVG e l'abbiamo aperto in un browser per verificare che funzioni. Ora è il momento di utilizzare correttamente il nostro file all'interno di una pagina web.
Per cominciare abbiamo bisogno di una pagina web. Questo non deve essere niente di più complesso di un file vuoto, con il .html estensione del file, salvata da un normale editor di testo. Non dobbiamo preoccuparci di avere alcun codice all'interno di questo file, ma se sei interessato alle nozioni di base dell'HTML, dai un'occhiata a The Best Way to Learn HTML ad un certo punto.
Ecco il mio file, aperto in TextEdit per Mac OS X, ma puoi usare qualunque testo, o editor di codice, per favore.
Questo file si aprirà correttamente in un browser, ma è necessario aggiungere un codice di "markup" HTML per incorporare l'SVG. Ci sono alcuni approcci per farlo.
Accentsconagua
![]()
Innanzitutto, possiamo usare un tag immagine (che potresti essere abituato a usare per i file JPG, PNG ecc.) Che punta al percorso esatto del file all'interno del src = "" attributo. Incolla questo snippet nel tuo file HTML:
Supponendo che il percorso del file sia corretto, la tua pagina HTML si aprirà in un browser proprio come questo:
Sì, so che l'effetto generale in questa fase è esattamente lo stesso di quando abbiamo aperto SVG direttamente nel browser Web, ma ora abbiamo molto più potere! Ad esempio, possiamo rendere immediatamente SVG più grande, usando il width = "" attributo:
Questo approccio è forse il più semplice, ma ha i suoi problemi. Alcuni browser, per motivi di sicurezza, limiteranno ciò che sei in grado di fare SVG (con JavaScript, ad esempio). Diamo un'occhiata alle alternative.
Usando il il tag è simile, ma si punta al percorso del file in questo modo:
Il risultato è esattamente lo stesso:
Per i browser che non supportano SVG, puoi anche inserire un avviso all'interno del contenuto del file , da visualizzare se SVG non può essere:
Molti web designer concordano sul fatto che questo approccio è il modo più affidabile e flessibile di utilizzare SVG all'interno di una pagina web al momento.
Abbiamo parlato delle origini XML di SVG e se apri il file SVG con il tuo editor di testo vedrai qualcosa di simile a questo:
Wow, che assurdità! In realtà, una volta superato lo shock iniziale, dovresti essere in grado di vedere un po 'di buon senso. Possiamo usare questo codice XML in linea, incollando il contenuto direttamente nel nostro file HTML.
Quando diventerai un po 'più familiare con la struttura SVG XML, sarai in grado di tagliare i bit fuori dal file, il che aiuta tutti a raggiungere le dimensioni del file.
Sentiti libero di rimuovere il linea, il