L’ambiente del web è in continua evoluzione e con e per lui vengono studiate continuamente nuove soluzioni per migliorarne le prestazioni e le caratteristiche. In questo articolo vedremo come utilizzare Adobe Illustrator per creare i file svg e incorporarli nelle nostre pagine web.
Cosa sono i file Svg
L’acronimo che costituisce il nome del formato del file significa letteralmente: Scalable Vector Graphics. Quindi da qui possiamo intuire che si tratti di un tipo di file scalabile all’infinito e ci troviamo quindi di fronte al concetto di file vettoriale. Abbiamo già visto la differenza tra immagine grafica o raster e vettoriale in questo articolo.
I file svg sono sostanzialmente generati da un codice scritto con marcatore XML, che restituisce un formato visivo vettoriale che non perde qualità in qualsiasi dimensione esso venga messo in opera. L’insieme di coordinate spaziali e css collegato al codice stabiliranno la rappresentazione dell’immagine che verrà letta e restituita dai vari browser.
Che cos’è Adobe Illustrator e a cosa serve
Illustrator è un software molto famoso e altrettanto potente della famiglia Adobe per il trattamento di immagini vettoriali. Per intenderci, se per le immagini raster (cioè ottenute da dispositivi fotografici o scansioni) il non plus ultra è costituto dal blasonatissimo Photoshop, allora il “cugino” Illustrator è la manna dal cielo per quanto riguarda la generazione e modifica dei formati vettoriali.
Normalmente Illustrator viene utilizzato per la realizzazione di elaborati grafici per la stampa, per la serigrafia, loghi, interfacce, ma non si tira indietro per venire incontro alle esigenze del web.
Il vantaggio essenziale dell’impiego di questo software è appunto quello di poter generare file .eps, .pdf, .ai che, se anche sviluppati nel formato di un francobollo, possono essere poi scalati (ingranditi all’infinito senza perdere qualità). Questo significa che grazie all’impiego di file .svg, che sono compatibili con i browser, si possono utilizzare tutte le immagini nelle diverse declinazioni dimensionali necessarie per adattarsi a tutti i device di consultazione senza perdere qualità.
Per dovere di cronaca un altro importante software per l’elaborazione di file in formato vettoriale è l’altrettanto famoso CorelDRAW.
Come generare file svg con Adobe Illustrator
Una volta realizzato il proprio elaborato grafico in Illustrator (a patto che non contenga file come jpg o png, ma solo elementi vettoriali) saremo pronti per compiere l’esportazione in formato .svg e potremo seguire due strade diverse.
Metodo di esportazione “tradizionale” con file .svg:
Dalla versione di Illustrator CC 2017 è stata introdotta la funzione “Esporta per schermi”
- Quindi dal menu principale premere “Esporta per schermi”
- Una volta fatto l’accesso alla finestra di dialogo premere il tab “Risorse”.
- A questo punto premere il tasto “Pannello esportazione risorse”
- Quando si sarà aperto il suddetto pannello scegliere l’elaborato grafico desiderato e trascinarlo e rilasciarlo all’interno del pannello
- Dal menu a tendina in basso scegliere il formato .svg
- Premere il tasto “Esporta risorsa” e scegliere la cartella di destinazione all’interno della quale salvare l’immagine vettoriale desiderata.
In questa maniera potremo ottenere un file .svg da caricare attraverso ftp e richiamare all’interno delle pagine che desideriamo del nostro sito
Metodo di esportazione attraverso codice
Più semplice del metodo precedente e ottenendo un risultato differente.
Una volta realizzata la “forma” desiderata dovremo solo selezionarla all’interno del foglio di lavoro di illustrator e copiarla con il comando “copia” all’interno del pannello “modifica” o con la combinazione di tasti ctrl+c per pc o cmd+c per mac e poi incollarla all’interno del documento desiderato.
In questo caso avremo tutte le informazioni relative sotto forma di codice, che potremo manipolare a nostro piacimento.
I vantaggi di caricare un file Svg su di un sito
I vantaggi principali sono essenzialmente due:
- leggerezza dell’immagine da caricare anche se di dimensioni elevate
- versabilità della stessa immagine che può essere caricata in dimensioni diverse senza però perdere qualità e quindi garantendo una maggiore malleabilità rispetto ai file .jpg o .png
Come inserire i file svg all’interno di un sito
Metodo tradizionale con il file .svg
Per chi è avvezzo all’uso del linguaggio html sarà familiare l’inserimento del file .svg come una qualsiasi immagine jpg, png, gif, quindi la sintassi sarà : <img src=”percorso del file/file.svg>.
All’interno del tag img potremo poi personalizzare il file per alcune sue caratteristiche come per esempio la larghezza attraverso l’attributo “width” con:valore desiderato px/% o altri parametri del medesimo genere css.
In altra maniera potremo anche utilizzare style=”” e al suo interno mettere i parametri desiderati in elenco.
Metodo Xml con codice
Avendo copiato la forma desiderata in illustrator potremo incollare dove vogliamo il nostro codice all’interno di una pagina e manipolare direttamente in essa la forma. Per esemplificare meglio di seguito vi propongo l’esempio di un quadrato realizzato con Illustrator e riportabile poi via codice:
Codice
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271.67 271.67">
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #1d1d1b;
stroke-miterlimit: 10;
}
</style>
</defs>
<rect class="cls-1" x=".5" y=".5" width="270.67" height="270.67"/>
</svg>
Risultato
A chi è pratico di css si saranno rizzate le orecchie perché avrà già compreso che la personalizzazione della forma sarà molto semplice,facilmente modificabile e fortemente caratterizzabile a proprio piacimento attraverso il codice.
I limiti del formato svg e problemi di sicurezza
Non è tutto oro quello che luccica, infatti i file .svg essendo composti da codice possono contenere anche javascript. È quindi facile poter incappare in file infetti che potrebbero influenzare il comportamento del sito rendendolo inagibile, soprattutto attraverso redirect che puntano ad altri siti. Se non abbiamo generato noi il file .svg da caricare sul nostro sito, sarebbe buona cosa “purgarlo” da eventuali linguaggi malevoli contenuti al suo interno attraverso servizi online.
Possiamo prenderne ad esempio: SVG Sanitizer Test https://svg.enshrined.co.uk/
Utilizzare Illustrator per creare i file svg ci permetterà di creare file puliti e senza rischi.
WordPress e i file Svg
WordPress, per i motivi del punto precedente, di deafult non accetta il caricamento dei file .svg data la loro tendenza a poter essere compromessi da un punto di vista di sicurezza. Per questo esistono diversi Plugin, che una volta installati, si occuperanno di bonificare il codice eventualmente infetto contenuto nel file svg. Un esempio tra i più famosi plugin per l’importazione dei file .svg è sicuramente Safe SVG.
Usare lo strumento “ricalco immagine” di Adobe illustrator per creare un file Svg da un’immagine raster
Illustrator è un programma che richiede una certa preparazione per realizzare degli elaborati a partire da zero.
Il software ha una serie di strumenti base per il disegno di forme semplici e talvolta creare delle semplici icone potrebbe non essere semplice perché richiede l’impiego di diverse tecniche, a volte anche avanzate.
Tuttavia, essendo illustrator uno strumento molto potente, varrebbe la pena fare un tentativo con lo strumento “ricalco immagine” a disposizione nel menu “oggetto” del software. Il comando, dotato di un pannello specifico per il proprio uso, dispone di diverse opzioni. Questo articolo non si propone come tutorial del comando “ricalco immagine”, dato che sarebbe un capitolo a parte, ma ha l’intento di rendere nota questa tecnica, che può essere approfondita e appresa attraverso numerosi tutorial che si possono trovare online.
Conclusioni su : Adobe Illustrator per creare file svg
Dati gli eventuali problemi relativi alla sicurezza legati agli svg che potremmo scaricare dal web, la scelta migliore è quella di generare i propri svg in autonomia. Illustrator, per creare i file svg, resta una delle scelte migliori e anche la più scontata.
Sebbene l’utilizzo di Illustrator non sia semplicissimo e immediato, utilizzando determinate tecniche come il “ricalco immagine”, potrebbe essere possibile realizzare facilmente illustrazioni svg partendo da immagini già esistenti. In buona sostanza Illustrator è un ottimo programma per la creazione di immagini per il web e soprattutto per gli svg.
