Un'occhiata alla grafica vettoriale scalabile (SVG)

La grafica vettoriale è stata ampiamente applicata nei supporti di stampa. In un sito Web, possiamo anche aggiungere grafica vettoriale con SVG o Grafica vettoriale scalabile. Citando le specifiche ufficiali su W3.org, SVG è descritto come:

Un linguaggio per descrivere grafica bidimensionale in XML. SVG consente tre tipi di oggetti ßgraphic: forme grafiche vettoriali (ad es. Tracciati costituiti da linee rette e curve), immagini e testo.

È in realtà dal 1999 e dal 16 agosto 2011 è diventata una raccomandazione del W3C. Tuttavia, SVG è ancora notevolmente sottoutilizzato, mentre ci sono molti vantaggi nell'usare Vector piuttosto che Bitmap per fornire immagini o immagini su un sito web.

Vantaggi SVG

In termini di pubblicazione di grafica su siti Web, SVG offre alcuni vantaggi rispetto a Bitmap, alcuni dei quali includono:

Risoluzione indipendente

L'immagine bitmap / raster dipende dalla risoluzione: è costruita su pixel. La grafica servita apparirà pixel quando viene ridimensionata a un determinato livello di zoom. Ciò non accade al vettore grafico, che è indipendente dalla risoluzione, poiché il grafico è espresso con un'equazione matematica che lo rende scalabile a qualsiasi livello di zoom mantenendo la qualità, anche a Retina Display.

Riduzione della richiesta HTTP

SVG può essere incorporato direttamente in un documento HTML con svg tag, quindi il browser non ha bisogno di fare una richiesta per servire l'immagine. Ciò si traduce anche in migliori prestazioni di carico per il sito web.

Styling e scripting

Incorporamento direttamente con svg il tag ci permetterà anche di modellare facilmente la grafica tramite CSS. Noi possiamo cambia le proprietà dell'oggetto come il colore di sfondo, l'opacità, i bordi, ecc. allo stesso modo con il normale tag HTML. Allo stesso modo, possiamo anche manipolare il grafico tramite JavaScript.

Può essere animato e modificato

L'oggetto SVG può essere animato quando utilizza l'elemento di animazione o tramite JavaScript Library come jQuery. L'oggetto SVG può anche essere modificato con qualsiasi editor di codice di testo o un software grafico come Inkscape (che è gratuito) o Adobe Illustrator.

Dimensione file più piccola

SVG ha una dimensione del file più piccola rispetto a Bitmap, che ha una presentazione grafica simile.

Disegnare forme base con SVG

Secondo le specifiche, possiamo disegnare alcune forme base come la rettangolo, cerchio, linea, ellisse, polilinea e poligono con SVG e affinché il browser possa visualizzare la grafica SVG, tutti gli elementi grafici devono essere inseriti all'interno di etichetta. Vediamo gli esempi sotto per maggiori dettagli:

Linea

Disegnare una linea in SVG possiamo usare il elemento. Questo elemento è usato per disegnare una singola linea retta, quindi sarà composta solo da due punti, inizio e fine.

Come puoi vedere sopra, la coordinata del punto iniziale della linea è espressa con i primi due attributi x1 e x2, mentre la coordinata del punto finale della linea è espressa con Y1 e y2.

Ci sono anche altri due attributi, il ictus e stroke-width che sono usati per definire il colore del bordo e la larghezza del bordo, rispettivamente. In alternativa, possiamo anche definire questi attributi all'interno di uno stile in linea, in questo modo:

alla fine fa lo stesso.

• Visualizza la demo “Linea”

polilinea

È quasi simile al , ma con il elemento possiamo disegnare più linee invece di una sola. Ecco un esempio:

l'elemento ha punti attributi che memorizzano tutte le coordinate che formano le linee.

• Visualizza la demo “polilinea”

Rettangolo

Disegnare un rettangolo è anche semplice con questo elemento. Abbiamo solo bisogno di specificare la larghezza e l'altezza, in questo modo:

• Visualizza la demo “Rettangolo”

Cerchio

Possiamo anche disegnare un cerchio con il elemento. Nell'esempio seguente, creeremo un cerchio con 100 raggio che è definito con r attributo:

I primi due attributi, cx e cy stanno definendo la coordinata del centro del cerchio. Nell'esempio sopra, abbiamo impostato 102 entrambi per il X e y coordinare, se questi attributi non sono specificati, 0 sarà preso come valore predefinito.

• Visualizza la demo “Cerchio”

Ellisse

Possiamo disegnare un'ellisse con . Funziona in modo abbastanza simile al cerchio, ma questa volta possiamo controllare specificamente il X raggio di linea e y raggio di linea con rx e ry attributo;

• Visualizza la demo “Ellisse”

Poligono

Con il elemento, possiamo disegnare più lati di forme come un triangolo, un esagono e persino un rettangolo. Ecco un esempio:

• Visualizza la demo “Poligono”

Utilizzando l'editor grafico vettoriale

Come puoi vedere, disegnare oggetti semplici con SVG in HTML è abbastanza facile. Tuttavia, quando l'oggetto diventa più complesso, quella pratica non è più l'ideale e ti darà un mal di testa.

Fortunatamente, come detto sopra, possiamo usare un editor di grafica vettoriale come Adobe Illustrator o Inkscape fare il lavoro Se si ha familiarità con questi software, è sicuramente molto più facile disegnare oggetti con la loro GUI piuttosto che codificare l'immagine da soli nel tag HTML.

Se stai lavorando con Inkscape, è possibile salvare la grafica vettoriale come semplice SVG e quindi aprirla nell'editor di codice di testo. Ora dovresti trovare i codici SVG nel file. Copia tutti i codici e incollali nel tuo documento HTML.

Oppure puoi anche incorporare il .svg file attraverso uno di questi elementi; incorporare, iframe e oggetto, per esempio;

I risultati alla fine saranno gli stessi.

In questo esempio, utilizzo questo iPod Apple da OpenClipArt.org.

• Visualizza la demo “iPod”

Supporto del browser

Per quanto riguarda il supporto del browser, SVG è stato supportato molto bene in tutti i principali browser, ad eccezione di IE8 e precedenti. Ma questo argomento può essere risolto con questa libreria JavaScript, chiamata Raphael.js. Per semplificare le cose useremo questo strumento, ReadySetRaphael.com, per convertire il nostro codice SVG in formato supportato da Raphael. Ecco come.

Prima di tutto, scarica e includi il Raphaël.js libreria al tuo documento HTML. Quindi, carica il .svg file al sito, copia e incolla il codice generato all'interno del seguente carico funzione;

 window.onload = function () // il codice Raphael va qui 

Dentro il corpo tag, inserisci quanto segue div con rsr attributo id;

Ecco, hai finito. Guarda l'esempio dal link sottostante.

• Visualizza la demo “Raphael”

Pensieri finali

Ecco le basi con SVG. Speriamo ora di avere una buona comprensione di questo argomento. È il modo migliore per ottimizzare il tuo sito per qualsiasi risoluzione dello schermo, anche per l'uso sul display Retina.

Come sempre, se sei una persona avventurosa, qui abbiamo inserito alcuni altri riferimenti e discussioni per approfondire questo argomento.

• Un'introduzione a SVG - W3 Schools
• Risoluzione indipendente con SVG - Smashing Magazine
• Perché non stai usando SVG? - NetTuts

Grazie per la lettura e speriamo che ti sia piaciuto questo post.

• Visualizza la demo
• Scarica fonte