Introduzione alla grafica vettoriale scalabile (SVG). Cos'è SVG: pro e contro dell'uso degli overlay e come disegnarli

22.04.2024Intestazione: Internet

Buon Giorno della Vittoria a tutti! E oggi scrivo il primo articolo di una serie in cui lo scopriremo cos'è SVG e come usarlo.

SVG (grafica vettoriale scalabile)è un linguaggio per descrivere la grafica bidimensionale basata su XML. Questa tecnologia sta gradualmente guadagnando slancio e ciò è dovuto a quanto segue:

Quando ridimensioni le forme SVG, le forme vengono sempre ridisegnate, quindi vedrai sempre un'immagine fluida e bella senza pixel
Il browser non ha bisogno di richiedere l'immagine dal server, perché lo disegna lui stesso, quindi la produttività aumenta
Puoi definire lo stile degli oggetti utilizzando CSS, come i normali elementi HTML, o utilizzando JavaScript
Può essere modificato o animato utilizzando CSS e JavaScript
Taglia più piccola

Quindi, penso che tu abbia già capito perché è necessaria e perché è migliore di un'immagine normale, e ora passiamo a come usarla.

Per cominciare, vale la pena notare che tutte le nostre figure devono essere presenti nel tag svg, ora disegniamo linea. Un tag viene utilizzato per visualizzare la riga linea, che ha i seguenti attributi:

x1- Inizia la coordinata x
x2- Fine della coordinata x
y1- Inizia la coordinata y
y2- Termina la coordinata y
larghezza del tratto- Larghezza della linea
colpo- Colore della linea

E se avessimo bisogno di disegnare subito? diverse righe? Utilizza più tag linea non sarebbe molto carino. C'è un tag per questo polilinea.

All'etichetta polilinea c'è un attributo punti, dove indichiamo le coordinate X E sì separati da una virgola, poi fate uno spazio e scrivete le coordinate del punto successivo e così via. Nota che qui c'è un attributo riempire, in cui possiamo specificare il colore in uno qualsiasi dei formati css, che riempirà lo spazio tra le righe. Se vuoi che lo spazio tra le righe sia vuoto, specifica il valore nessuno.

Passiamo a forme più complesse e disegniamo rettangolo.

Per disegnare un rettangolo, è necessario utilizzare il tag rect, dove in attributi larghezza E altezza indicare larghezza E altezza di conseguenza, e gli attributi rimanenti ti sono già familiari e svolgono assolutamente le stesse funzioni delle linee.

Per disegnare un cerchio, usa il tag cerchio e attributi cx, ci E R per impostare le coordinate centro del cerchio e lui raggio.

Un altro elemento - ellisse viene disegnato esattamente come un cerchio, ma lì possiamo impostare noi stessi i raggi lungo l'asse X e lungo l'asse sì. Il tag viene utilizzato per renderizzarlo ellisse

Se hai bisogno di ritirarti figure poliedriche, ad esempio un pentagono, quindi utilizza il tag poligono

Attributo punti all'etichetta poligono funziona allo stesso modo dell'attributo punti all'etichetta polilinea.

Se l'oggetto è molto complesso, puoi utilizzare qualsiasi editor di grafica vettoriale e disegnarlo lì, quindi inserirlo semplicemente in questo modo

SVG supportato CIOÈ. C 9 versioni, Mozilla Firefox Con 1.5 , Google Chrome Con 3.0 E musica lirica Con 8.0 .

Questo conclude l'articolo. Si è rivelato grande, ma semplice. Nel prossimo continueremo a studiare questa interessante tecnologia, ma questo è tutto. Buona fortuna!

Ciao a tutti, nostri cari fan della conversione gratuita. Oggi abbiamo un progetto interessante sul nostro desktop, nome in codice Scalable Vector Graphics o SVG in breve. Perché in una lingua straniera? In modo che nessuno indovinasse.

Per condurre la ricerca avremo bisogno di alcune risorse materiali, inclusa una sorta di valuta liberamente convertibile, possibilmente rubli.

In secondo luogo, abbiamo bisogno di un monitor per computer, non importa se si tratta di un desktop o di uno smartphone. Dato che stai leggendo questo testo, significa che hai già una risorsa. Non resta che disturbare alcune delle brave persone che si trovano nelle vicinanze e prendere in prestito qualche migliaio di rubli o, nel peggiore dei casi, un paio di centinaia di dollari.

Tutto questo è assolutamente necessario per capire chiaramente cos'è SVG e con cosa è meglio utilizzarlo.

Grafica vettoriale scalabile

Partiamo dall'involucro esterno, passiamo al contenuto interno e poi, non temiamo questa parola, penetriamo nell'essenza stessa del fenomeno studiato.

Come avrai sentito, ci sono due tipi di grafica.

Raster.
Vettore.

Inizia togliendoti gli occhiali e avvicinando gli occhi al monitor tremolante del computer.

Cosa vedi?

Esatto: l'immagine è composta da milioni di punti multicolori. Questo è quello che è raster. Ecco perché questo tipo di grafica viene chiamata "raster".

Passiamo alla seconda parte dell'esperimento. Credimi, ti divertirai molto di più e forse ti troverai anche qualche avventura.

Indossa i tuoi vestiti più alla moda, chiama la tua amica o la tua ragazza. Andiamo in una discoteca. Per quello? Studia la grafica vettoriale.

Quando gli ospiti si sono riscaldati adeguatamente al bar e sulla pista iniziano a ballare con i tamburelli, il DJ preme un piccolo pulsante e nuvole di fumo di glicerina traslucida riempiono il cielo.

Quando il fumo si addensa abbastanza, il DJ preme un altro pulsante. La pistola laser viene lanciata e qualcosa di simile all'aurora boreale inizia a danzare sopra le teste della folla danzante.

Questa è la grafica vettoriale. Il raggio laser è continuo e disegna immagini secondo l'algoritmo incorporato nel programma del computer: un'immagine visiva digitale.

Questo è esattamente il modo in cui funziona SVG: è una descrizione software digitale di immagini grafiche, colori e il loro comportamento.

Non per niente abbiamo scelto come esempio una discoteca. Il punto è che il laser crea linee continue, ma il fumo di glicerina ha una trama dispersa e raster. Cioè, questa nebbia artificiale è costituita da minuscole goccioline di liquido sospese nell'aria, da cui viene riflesso un raggio laser in modo che si formino immagini visive nella retina dei nostri occhi.

Sugli schermi dei computer, i vettori continui vengono convertiti in pixel di matrice multicolore e il nostro cervello, secondo il suo algoritmo, forma la percezione di un'immagine fluida.

Soluzione tecnologica SVG

Bene, abbiamo risolto il guscio esterno, ora passiamo all'essenza interiore del fenomeno. Puoi dire: perché abbiamo bisogno di tutta questa scienza, è meglio dirlo direttamente - perché è necessario questo SVG?

Prenditi il tuo tempo. Il fatto è che è la tecnologia a determinare tutti gli effetti esterni. Ora ti sveliamo un terribile segreto. SVG è il fratello del linguaggio di markup ipertestuale HTML, con l'aiuto del quale vengono progettati siti web belli e dinamici.

Esatto, un file grafico SVG è un file di testo XML pieno di tag simili a HTML e dati strutturati in XML. È logico supporre che la grafica SVG possa essere integrata direttamente nel codice HTML di una pagina web, formattata utilizzando fogli di stile CSS e persino includere script di programmazione Javascript.

Lascia correre la tua immaginazione (magari un cappuccino, per favore) e prova a fornire le infinite possibilità della grafica vettoriale geneticamente modificata con tag HTML5.

In primo luogo, la grafica vettoriale, per definizione, viene ridimensionata senza perdita di qualità dell'immagine (perché non ci sono pixel e una volta ingrandita, l'immagine non si trasformerà in un dipinto di un artista cubista).
In secondo luogo, SVG è pienamente compatibile con le tecnologie web e diventa quindi una parte integrante dei siti web.
In terzo luogo, aggiungendo oggetti alla descrizione digitale dell'immagine e collegando ad essi script Javascript, rendiamo l'immagine interattiva, cioè reattiva a determinate azioni dell'utente con determinate risposte.
In quarto luogo, SVG è un formato di testo, quindi puoi ottimizzare il file per il SEO senza meta tag esterni inserendo direttamente le parole chiave nel codice dell'immagine.

Sulla base di queste specifiche tecniche, dedurremo l'ambito di applicazione di SVG.

Come puoi utilizzare SVG a tuo vantaggio

Secondo i principi del marketing equo, bisogna ammettere che l’SVG ha i suoi inconvenienti. Man mano che il dettaglio dell'immagine aumenta, il peso del file inizia ad aumentare alla velocità di una valanga.

Quindi, sfortunatamente, SVG è del tutto inadatto per fotografie realistiche ad alta risoluzione e mappe dettagliate del terreno.

Il formato SVG è ottimale per immagini piccole, ma scalabili e interattive.

Barre di navigazione e pulsanti con effetti animati.
Loghi che non perdono la qualità dell'immagine se ingranditi o ridotti.
Le immagini che sono come la gomma si adattano a qualsiasi formato e risoluzione dello schermo di un computer. SVG è indispensabile per i siti reattivi ottimizzati per dispositivi mobili.

Molto utile: la grafica SVG è più adatta per l'e-commerce.

Ad esempio, sul sito web di un negozio online viene pubblicata un'immagine del prodotto venduto. L'utente può fare clic su singole parti dell'immagine e inizia una bellissima animazione, trasformando l'immagine in qualcos'altro.

Su questa base è possibile sviluppare una revisione interattiva del prodotto da tutti i lati e anche dall'interno.

Oppure su un sito medico, utilizzando un programma grafico di questo tipo, puoi eseguire un test di gravidanza. Oppure un plugin diagnostico per chi vuole sottoporsi ad un'analisi rapida e scoprire di cosa morirà da giovane.

Dopo che il cliente ha appreso il terribile segreto della sua terribile malattia, la mano stessa si allunga per fare clic con il mouse sulla sezione adiacente dell'immagine SVG con il pulsante rosso "Acquista una cura per tutte le malattie". È sufficiente una compressa. Prezzo$ 1000.

Che invenzione utile è questa SVG.

Metodi per la conversione in SVG

Sul nostro sito web ti offriamo la conversione utilizzando vari metodi:

C'è un modo per ridurre le dimensioni dell'SVG?

SÌ! Utilizzando programmi speciali come SVGO o sul nostro sito Web utilizzando la funzione di ottimizzazione SVG.

Il nostro servizio si basa sull'utilizzo di componenti aperti, in particolare SVGO. Con questo ottimizzatore SVG puoi ridurre la dimensione delle immagini SVG rimuovendo informazioni non necessarie, come:

cancellare gli attributi da nuove righe e oggetti ripetuti;
eliminazione della descrizione del tipo di documento;
rimozione delle istruzioni XML;
eliminare commenti;
rimuovere i metadati;
e altre informazioni.

Questo post è il primo di una serie di articoli sulla grafica SVG (Scalable Vector Graphic), che copre le basi della grafica vettoriale sul sito.

La grafica vettoriale è ampiamente utilizzata nella stampa. Per i siti web c'è SVG, che secondo le specifiche ufficiali su w3.org è un linguaggio per descrivere la grafica bidimensionale in XML. SVG include tre tipi di oggetti: forme, immagini e testo. SVG esiste dal 1999 ed è incluso nelle raccomandazioni dal 16 agosto 2011 W3C. SVG è altamente sottovalutato dagli sviluppatori web, sebbene presenti diversi importanti vantaggi.

Vantaggi dell'SVG

Ridimensionamento: a differenza della grafica raster, SVG non perde qualità quando viene ridimensionato, quindi è conveniente utilizzarlo per lo sviluppo Retina.
Riduzione delle richieste HTTP: quando si utilizza SVG, il numero di chiamate al server si riduce e la velocità di caricamento del sito aumenta di conseguenza.
Styling e scripting: utilizzando i CSS è possibile modificare le impostazioni grafiche del sito, come sfondo, trasparenza o bordi.
Animazione e modifica: utilizzando Javascript puoi animare SVG, nonché modificarlo in un editor di testo o grafica (InkScape o Adobe Illustrator).
Dimensioni ridotte: gli oggetti SVG pesano molto meno delle immagini raster.

Forme SVG di base

Secondo le specifiche ufficiali, puoi disegnare oggetti semplici utilizzando SVG: rettangolo, cerchio, linea, ellisse, polilinea o poligono utilizzando un tag svg.

Linea semplice utilizzando il tag linea con solo due parametri: punti iniziali (x1 e x2) e punti finali (y1 e y2):

Puoi anche aggiungere attributi o stili del tratto e della larghezza del tratto per impostare il colore e la larghezza:

Stile="stroke-width:1; ictus:rgb(0,0,0);"

linea spezzata

La sintassi è simile alla precedente, viene utilizzato il tag polilinea, attributo punti imposta i punti:

Rettangolo

Chiamato dal tag rect, puoi aggiungere alcuni attributi:

Cerchio

Chiamato tramite tag cerchio, nell'esempio utilizzando l'attributo R imposta il raggio, cx E ci specificare le coordinate del centro:

Ellisse

Chiamato tramite tag ellisse, funziona in modo simile cerchio, ma puoi specificare due raggi: rx E ry:

Poligono

Chiamato tramite tag poligono, un poligono può avere un numero diverso di lati:

Utilizzo degli editor

Come puoi vedere dagli esempi, disegnare forme SVG di base è molto semplice, ma gli oggetti possono essere molto più complessi. Per questi, è necessario utilizzare editor di grafica vettoriale, come Adobe Illustrator o Inkscape, dove è possibile salvare i file in formato SVG e poi modificarli in un editor di testo. Puoi inserire SVG in una pagina utilizzando incorporamento, iframe e oggetto:

Un esempio è un'immagine di un iPod da OpenClipArt.org:

Supporto del browser

SVG è supportato da quasi tutti i browser moderni ad eccezione di Internet Explorer 8 e versioni precedenti. Ma questo può anche essere risolto utilizzando la libreria javascript Raphael.js. Puoi convertire un file SVG in questo formato di libreria su ReadySetRaphael.com.

Per prima cosa bisogna collegare la libreria Raphael.js alla pagina desiderata, poi scaricare il file SVG, copiare e incollare il codice generato nella funzione:

Window.onload=function() ( //inserisci qui il codice Raffaello)

Inserisci a pag div con attributo RSR.

Preparare SVG per l'utilizzo sul Web è un processo molto semplice, non più complicato dell'esportazione di JPEG o PNG. Utilizza qualsiasi editor grafico con cui hai familiarità (Illustrator, Sketch, Inkscape [gratuito], ecc. [o anche Photoshop se utilizzi livelli forma]) con le dimensioni dell'immagine che intendi utilizzare. Di solito lavoro in Illustrator, quindi spiegherò alcuni modi per preparare i file in quel programma, ma generalmente si applicano a qualsiasi programma. Potresti voler convertire il tuo testo in curve, poiché molto probabilmente il carattere verrà visualizzato in modo errato, a meno che tu non preveda di modellarli con il carattere web utilizzato nella pagina (il che è possibile!). Inoltre, non è una buona idea convertire tutti gli oggetti in forme singole, soprattutto se sono presenti tratti che dovranno essere manipolati sulla pagina, soprattutto perché la conversione degli oggetti spesso non riduce le dimensioni del file. Tutti i nomi assegnati a gruppi o livelli verranno aggiunti all'SVG come ID elemento. Questo è abbastanza comodo per lo styling, ma aumenterà leggermente la dimensione complessiva del file.

Prima di esportare, devi verificare che tutte le immagini siano in una griglia di pixel interi (ovvero, ad esempio, non 23,3 px × 86,8 px). Altrimenti, molto probabilmente l'immagine non avrà sufficiente chiarezza e parte dell'immagine verrà tagliata. In Illustrator questo può essere fatto come segue: Oggetto > Tavole da disegno > Adatta ai limiti dell'opera d'arte. Quindi fare clic su Salva con nome e selezionare SVG e lasciare le impostazioni predefinite. C'è una piccola ottimizzazione che possiamo fare qui, ma in realtà non ne vale la pena dato che utilizzeremo varie tecniche di miglioramento in seguito, quindi per ora non perderemo tempo con queste modifiche.

Trucchi per ridurre le dimensioni dei file.

(Vedi ottimizzazione)

Per ottenere la dimensione SVG più piccola, sarebbe logico rimuovere da esso tutto ciò che non è necessario. Il programma più famoso e utile (almeno credo) per l'elaborazione di SVG è SVGO. Rimuove tutto il codice non necessario. Ma! Fai attenzione quando usi questo programma se prevedi di manipolare SVG con CSS/JS, poiché potrebbe ripulire troppo il codice, rendendo difficili le modifiche future. SVGO è utile anche in quanto può essere incluso nel processo di creazione automatica del progetto, ma è anche possibile utilizzarlo GUI se vuoi.

Dopo aver compreso più nel dettaglio la corretta rimozione di tutto ciò che non è necessario, possiamo fare qualcos'altro nell'editor grafico. Per prima cosa devi assicurarti di utilizzare il minor numero possibile di percorsi/forme, nonché di punti su tali percorsi. Puoi combinare e semplificare tutto ciò che può essere semplificato e rimuovere tutti i punti non necessari. Illustrator ha un plug-in VectorScribe con uno strumento Pennello Smart Remove che ti aiuterà a rimuovere i punti mantenendo la stessa forma generale.

Pre-ottimizzazione

Lo strumento Pennello di rimozione intelligente ha rimosso i punti

Successivamente ingrandiremo l'immagine. In Illustrator è utile attivare Visualizza > Anteprima pixel e verificare come sono posizionati i contorni. Ci vorrà un po' di tempo per posizionare i contorni sulla griglia, ma lo sforzo sarà ripagato e si tradurrà in un rendering più pulito (è meglio prestare attenzione a questo in anticipo).

Punti fuori griglia

Allinea alla griglia

Se ci sono due o più oggetti da allineare, vale la pena rimuovere tutte le sovrapposizioni non necessarie. A volte, anche se i contorni sono accuratamente allineati, può essere visibile una sottile linea bianca. Per evitare ciò, puoi sovrapporre leggermente gli oggetti nei punti in cui si sovrappongono. Importante: in SVG, lo z-index ha un certo ordine, che dipende dall'oggetto sottostante, quindi vale la pena posizionare l'oggetto in alto alla fine del file nel codice.

E infine, ultimo ma non meno importante, qualcosa che di solito viene dimenticato è abilitare la compressione gzip di SVG sul tuo sito nel file .htaccess.

AddType immagine/svg+xml SVGzz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... ecc.

Come esempio di quanto sia efficace questa tecnica, prenderò il logo originale di Breaking Borders e lo ottimizzerò in questo modo: aumenterò le dimensioni a quello che dovrebbe essere; Metto in ordine i contorni; Eliminerò quanti più punti possibile; spostare i punti di pixel interi; Sposterò tutte le aree di sovrapposizione e invierò il tutto a SVGO.

Originale: 1.413b

Dopo l'ottimizzazione: 409b

Di conseguenza, la dimensione del file è diventata più piccola del 71% circa (e dell'83% circa quando compresso)

Questo post è il primo di una serie di articoli su SVG (Scalable Vector Graphic), che copre le basi della grafica vettoriale sul sito.

La grafica vettoriale è ampiamente utilizzata nella stampa. Per i siti web c'è SVG, che secondo le specifiche ufficiali su w3.org lo è un linguaggio per descrivere la grafica bidimensionale in XML. SVG include tre tipi di oggetti: forme, immagini e testo. SVG esiste dal 1999 e dal 16 agosto 2011 è stato incluso nelle raccomandazioni del W3C. SVG è altamente sottovalutato dagli sviluppatori web, sebbene presenti diversi importanti vantaggi.