Incorporamento di svg in css. Aggiunta di SVG a una pagina utilizzando un tag

Articolo dettagliato sullo stile del contenuto in un elemento SVG e superando i problemi associati.

La grafica in formato SVG è usata particolarmente spesso per creare icone e una delle tecniche più comuni per questo sono gli sprite SVG che usano l'uso di SVG per istanziare le icone in posto giusto documento.

Creazione di istanze di icone o qualsiasi altro contenuto SVG in un elemento causa difficoltà nella progettazione di singole copie. Lo scopo di questo articolo è quello di darvi una panoramica di alcuni modi possibili aggirare le restrizioni di progettazione associate all'uso di .

Ma prima di iniziare, diamo una rapida occhiata alla struttura di base e al raggruppamento degli elementi in SVG, passando gradualmente a , DOM e poi di nuovo in CSS. Analizzeremo perché il design può causare difficoltà e come superarle.

Una rapida occhiata alla struttura SVG, al raggruppamento e ai riferimenti agli elementi in SVG

SVG include 4 elementi principali per definire, strutturare e collegare il contenuto SVG in un documento. Questi elementi consentono di riutilizzare le immagini mantenendo il codice leggibile e manutenibile. A causa della natura di SVG, alcuni di questi elementi hanno funzionalità simili ai comandi corrispondenti negli editor grafici.

I 4 elementi di raggruppamento e collegamento di base di SVG sono , , e .

Elemento (abbreviazione di "gruppo") viene utilizzato per raggruppare logicamente insiemi di correlati elementi grafici. In termini di editor grafici (come Adobe Illustrator) elemento simile per funzionalità alla funzione "Raggruppa oggetti". Puoi anche pensare a un gruppo come a un livello editore grafico.

Il raggruppamento di elementi è utile quando si desidera applicare uno stile a tutti gli elementi di un gruppo e anche quando si desidera animare tutti gli elementi di un gruppo mantenendone la relazione.

Elemento viene utilizzato per definire molte cose, principalmente per definire modelli come gradienti che possono quindi essere utilizzati per riempire altri elementi SVG. Può essere utilizzato per definire qualsiasi elemento che utilizzerai in qualsiasi punto della tela.

Elemento unisce le possibilità e in uno che viene utilizzato per raggruppare elementi con un modello a cui è possibile fare riferimento in altre parti del documento. a differenza di , non utilizzato per impostare modelli; in genere viene utilizzato per creare simboli come icone, che vengono poi applicati in tutto il documento.

All'elemento ce n'è uno in più vantaggio importante: accetta un attributo viewBox che consente lo zoom all'interno di qualsiasi viewport.

Elemento consente di utilizzare un elemento precedentemente definito in qualsiasi punto del documento. Ti consente di riutilizzare gli elementi, offre funzionalità simili al copia-incolla in un editor grafico. Può essere usato come elemento separato, e il gruppo ha ceduto , o .

Per utilizzare un elemento è necessario passare un collegamento a quell'elemento, l'id è l'attributo xlink:href, e posizionarlo impostando gli attributi xey. Puoi applicare stili a un elemento e si riverseranno sul contenuto di quell'elemento.

Ma qual è il contenuto ? Dove clona? E come funziona la cascata CSS con esso?

Prima di rispondere a queste domande, e dato che abbiamo solo scalfito la superficie della struttura e del raggruppamento SVG, vale la pena menzionare un paio di articoli che ti permetteranno di saperne di più su questi elementi, così come sull'attributo viewBox su un elemento. :

• Strutturazione, raggruppamento e collegamento in SVG - Gli elementi g, use, defs e symbol
• Comprendere il sistema di coordinate SVG (Parte 1): Viewport, viewBox e PreserveAspectRatio

SVG e DOM ombra

Quando fai riferimento a un elemento con , il tuo codice è simile a questo:

Sullo schermo viene visualizzata un'icona il cui contenuto è definito all'interno , ma in realtà è il contenuto dell'elemento , che è un clone .

Ma l'elemento è solo un elemento a chiusura automatica: non ha contenuto tra i tag di apertura e chiusura, quindi dove viene clonato il contenuto ?

La risposta è dentro ombra DOM(per qualche ragione, lo associo sempre a Batman, non so perché).

Cos'è il DOM ombra?

Il DOM ombra è identico al DOM normale, tranne per il fatto che invece di far parte dell'albero del documento principale, i nodi DOM ombra si riferiscono a un frammento del documento che è parallelo al documento principale, ma inaccessibile ai suoi script e stili. Ciò consente agli autori di creare componenti modulari, incapsulando script e stili. Se hai mai utilizzato un elemento video o un intervallo di input in HTML5 e non hai capito da dove provengano i controlli o lo slider del video player, la risposta è la stessa: DOM ombra.

Nel caso di un elemento SVG , il contenuto a cui fa riferimento viene clonato nel frammento di documento "ospitato". . IN questo caso questo è un host ombra.

Quindi il contenuto (un clone o una copia dell'elemento a cui si riferisce) è presente all'interno del frammento ombra del documento.

In altre parole, il contenuto c'è, ma è invisibile. Come il normale contenuto DOM, ma non accessibile da strumenti di alto livello come i selettori CSS e JavaScript, copiati nel frammento di documento collegato a .

Ora, se sei un designer, potresti pensare: "OK, ho capito, ma c'è un modo per ispezionare questo documento secondario e vederne il contenuto". La risposta è sì, puoi visualizzare i contenuti del DOM ombra utilizzando gli strumenti di sviluppo in Chrome (in Firefox su questo momento questa funzione non è disponibile). Ma prima devi attivare l'ispettore DOM ombra nella scheda Generale del pannello delle impostazioni. Questo è descritto in dettaglio.

Dopo aver abilitato Shadow DOM Inspection negli Strumenti per sviluppatori, puoi vedere gli elementi clonati nel pannello Elementi proprio come i normali elementi DOM. L'immagine seguente mostra un elemento di esempio A che si riferisce al contenuto dell'elemento . Nota che "#shadow-root" e il suo contenuto sono cloni del contenuto .

Utilizzo degli strumenti sviluppatore Chrome, puoi ispezionare il contenuto dell'elemento use all'interno del DOM shadow ("#shadow-root", linea in grigio). Questa schermata esamina il logo Codrops dall'esempio che vedremo nella prossima sezione.

Osservando il codice che viene ispezionato, puoi vedere che il DOM ombra è molto simile al DOM normale, tranne per il modo in cui viene gestito dai CSS e JavaScript del documento principale. Ci sono anche altre differenze tra loro che non tratteremo in questo articolo a causa della loro lunghezza, quindi se vuoi saperne di più, ti consiglio i seguenti articoli:

• Shadow DOM 101 (traduzione in Frontender.info)
• Introduzione a Shadow DOM (Video)

Data la mia esperienza limitata con il DOM ombra, lo vedo come un normale DOM che deve essere gestito in modo diverso in termini di accesso CSS e JavaScript ai suoi elementi. Questo è ciò che è importante per noi quando lavoriamo con SVG: come influenzare il contenuto all'interno del DOM ombra perché è importante per noi essere in grado di modellarlo. L'intero punto di utilizzo è la capacità di creare copie diverse di un elemento e nella maggior parte dei casi vogliamo essere in grado di dare uno stile diverso a ciascuna copia. Ad esempio, può essere un logo con due temi di colore o icone multicolori per diversi temi di colore. Quindi è importante per noi essere in grado di farlo con i CSS.

Come affermato, il contenuto del DOM ombra non è accessibile ai CSS, a differenza del DOM normale. Allora come lo stiliamo? Non possiamo usare un percorso figlio come questo:

Usa percorso#linea ( tratto: #009966; )

Perché non abbiamo accesso al DOM ombra con i normali selettori CSS.

Forse, come me, ti aspetti che gli attributi di presentazione abbiano la più alta specificità di tutte le regole di stile. Dopotutto, di solito gli stili esterni vengono sovrascritti da dichiarazioni interne e quelle, a loro volta, vengono sovrascritte da stili di attributi inline: hanno la massima specificità e, di conseguenza, la priorità rispetto ad altri stili. Sebbene questa aspettativa abbia senso, il meccanismo effettivo è diverso.

In effetti, gli attributi di presentazione sono trattati come "fogli di stile dell'autore" di basso livello e sono sovrascritti dal resto delle dichiarazioni di stile: stili esterni, interni e inline. La loro unica forza è che hanno la precedenza sugli stili ereditati. E questo è tutto.

Ora che l'abbiamo capito, torniamo al nostro elemento. e il suo contenuto.

Sappiamo che non possiamo modellare dentro usando Selettori CSS.

Ma lo sappiamo anche, come con l'elemento , stili applicati a sarà ereditato da tutti i suoi figli (che si trovano nel DOM ombra).

Quindi prima proviamo a cambiare il colore di riempimento dell'elemento all'interno applicando il selettore all'elemento stesso con l'aspettativa che la cascata e l'eredità facciano il loro lavoro.

Tuttavia, questo solleva un paio di domande:

1. Il colore di riempimento verrà ereditato tutti i discendenti elemento , anche quelli a cui non vuoi applicare gli stili (ma se all'interno hai solo un elemento, quindi questo problema non sarà).
2. Se hai esportato l'SVG da un editor grafico, o per qualche altro motivo non puoi modificare il codice SVG, finirai per lavorare con un SVG che ha già gli attributi di presentazione applicati (a meno che tu non lo sovrascriva esplicitamente durante l'esportazione in formato SVG) e i valori di questi attributi avranno la precedenza su quelli ereditati da .

E anche se puoi modificare il codice SVG e sbarazzartene, ti consiglio vivamente di non farlo. i seguenti motivi:

1. La rimozione degli attributi per l'impostazione di determinate proprietà in un secondo momento ripristinerà i valori di queste proprietà sui valori predefiniti e questo, di regola, è un riempimento e un tratto neri (in relazione ai colori).
2. Reimpostando i valori, ti stai costringendo a definire lo stile dell'intero set di proprietà.
3. Gli attributi di presentazione inizialmente impostati sono un ottimo ripiego in caso di problemi con gli stili esterni. Se il CSS non viene caricato, le tue icone saranno comunque belle.

Quindi abbiamo questi attributi, ma vogliamo anche dare uno stile diverso a istanze di icone diverse.

Questo viene fatto forzando gli attributi di presentazione ad ereditare gli stili dati da o trovare un modo per aggirare le sostituzioni di questi valori. Per fare ciò, dovremo utilizzare tutta la potenza del CSS CSS.

Iniziamo con semplici esempi e passare gradualmente a quelli complessi.

Riscrittura dei valori degli attributi di presentazione con CSS

Gli attributi di presentazione sono sovrascritti da qualsiasi dichiarazione di stile. Possiamo usarlo per fare in modo che l'attributo di presentazione ottenga il valore ereditato dagli stili. .

Questo è semplicemente dovuto alla chiave css parola eredita. Date un'occhiata al prossimo esempio- un'icona di gelato disegnata con un unico contorno, il cui colore vogliamo cambiare in diverse istanze. Icona realizzata da Erin Agnoli del Noun Project.

Il contenuto della nostra icona gelato (percorso) è definito all'interno dell'elemento , il che significa che non verrà visualizzato sull'area di disegno per impostazione predefinita.

Produciamo più istanze dell'icona con .

Impostiamo la larghezza e l'altezza delle icone usando i CSS. Sto usando le stesse dimensioni di viewBox , ma non devono essere identiche. Tuttavia, per evitare uno spazio bianco in eccesso all'interno dell'SVG, assicurati di mantenere le proporzioni.

Icona (larghezza: 100px; altezza: 125px; )

Con questo codice abbiamo ottenuto il seguente risultato:

Nota che grazie ai bordi neri aggiunti attorno ai nostri SVG, puoi vedere i bordi di ciascuno di essi, incluso il primo, in cui il contenuto non è renderizzato. Ricorda: il documento SVG in cui hai definito il simbolo verrà visualizzato nella pagina, ma senza il contenuto. Per evitare ciò, utilizzare la proprietà display: none sul primo SVG. Se non nascondi l'SVG con le definizioni delle icone, verrà comunque visualizzato anche se non ne imposti le dimensioni: verrà impostato automaticamente su 300 per 150 pixel (che è l'impostazione predefinita per gli elementi non sostituiti in CSS) e ti ritroverai con una casella vuota sullo schermo che non ti serve. .

Ora proviamo a cambiare il colore di riempimento per ogni istanza dell'icona:

use.ic-1 ( riempimento: azzurro; ) use.ic-2 ( riempimento: #FDC646; )

Il colore di riempimento delle icone continua a non cambiare perché il colore ereditato viene sovrascritto dall'attributo fill="#000" sull'elemento del percorso. Per evitare che ciò accada, dobbiamo forzare il percorso per ereditare il colore:

Percorso SVG ( riempimento: eredita; )

Ecco! Colori, data agli elementi vengono ora applicati al percorso di ciascuno. Dai un'occhiata alla demo e sperimenta i valori creando istanze e impostandole colori differenti:

Ora questa tecnica funziona dopo aver forzato il contenuto ereditare gli stili. Ma in molti casi, questo non è esattamente ciò di cui hai bisogno. Ci sono altri modi per progettare, ora passeremo ad alcuni di essi.

Stile dei contenuti utilizzando la proprietà all CSS

Tempo fa, mentre si lavorava su un'icona attivata con , avevo bisogno di uno degli elementi al suo interno per ereditare tutti gli stili , come riempimento , tratto , larghezza tratto , opacità e persino trasforma . Quindi avevo bisogno di controllare tutti questi attributi tramite CSS, mantenendo tutti gli attributi di presentazione nel markup come ripiego.

Se esegui un'attività simile, probabilmente scoprirai che impiega troppo tempo se eseguita in CSS:

Path#myPath ( riempimento: ereditare; tratto: ereditare; larghezza tratto: ereditare; trasformare: ereditare; /* ... */ )

Dopo aver esaminato questo frammento, noterai un modello, il che significa che avrebbe senso combinare tutte le proprietà specificate in una e impostarla ereditare il valore.

Per fortuna possiamo aiutare css proprietà tutti . Il mio riferimento CSS menziona l'utilizzo della proprietà all per lo stile degli SVG, ma vale la pena rispolverare le nostre conoscenze.

Usando la proprietà all possiamo fare questo:

Percorso#mioPercorso ( tutto: eredita; )

Funziona bene in tutti i browser che supportano all , ma tieni presente quanto segue punto importante: Questa dichiarazione dice all'elemento di ereditare letteralmente tutte le proprietà del suo genitore, comprese quelle che non vuoi che l'elemento erediti. Quindi, se non vuoi che tutte le proprietà CSS abbiano uno stile, questo non funzionerà per te: questa è l'ultima risorsa e solo parzialmente adatta quando hai un elemento senza stile e pieno controllo sulle sue proprietà in CSS. Se usi questa dichiarazione e non definisci i valori per tutte le proprietà CSS, questi si sovrapporranno fino a quando non troveranno un valore da cui ereditare, nella maggior parte dei casi stili di browser predefiniti.

Nota che questo si applica solo agli attributi che possono essere impostati con CSS, non agli attributi che sono impostati solo in SVG. Se l'attributo può essere impostato utilizzando CSS, erediterà gli stili, altrimenti no.

Possibilità di attivare l'ereditarietà per attributi di presentazione di tutti gli stili , ma cosa succede se si dispone di un'icona composta da più elementi e non si desidera che tutti ereditino lo stesso colore di riempimento? Che cosa succede se si desidera applicare più colori differenti riempie per diversi discendenti? Specificando uno stile in non si adatta più. Abbiamo bisogno di qualcos'altro a cascata colori desiderati a gli elementi giusti.

Utilizzo della variabile CSS currentColor per lo stile del contenuto

L'utilizzo della variabile CSS currentColor, unita alla tecnica sopra descritta, consente di definire due colori per un elemento, anziché uno. Fabrice Weinberg ne ha scritto un anno fa.

L'idea è di applicare contemporaneamente a riempimento e colore, quindi sovrapponi tali proprietà al contenuto , utilizzando le capacità della variabile currentColor. Diamo un'occhiata a un esempio di codice per capire come funziona.

Diciamo che vogliamo dare uno stile a questo logo minimalista di Codrops usando 2 colori: uno per la parte anteriore e uno per la parte posteriore.

Innanzitutto, iniziamo con il codice per questa immagine: abbiamo un simbolo contenente una descrizione dell'icona e tre istanze di , creando tre istanze del logo.

Se impostiamo il colore di riempimento su un elemento per ogni istanza, quel colore sarà ereditato da entrambe le gocce, che non è il nostro obiettivo.

Quindi, invece di definire un colore di riempimento e applicarlo a cascata nel solito modo, useremo la variabile currentColor per rendere la goccia più piccola in primo piano un colore diverso e imposteremo questo valore con proprietà del colore.

Per prima cosa, dobbiamo inserire currentColor dove vogliamo applicare questo colore: questo sarà il punto nel markup in cui è definita l'icona, cioè all'interno . Ora questo frammento si presenta così:

Abbiamo quindi bisogno di rimuovere l'attributo di riempimento di presentazione dalla seconda goccia e lasciare che erediti il ​​colore di riempimento dall'elemento usando eredita .

Se dovessimo utilizzare la parola chiave inherit per forzare gli attributi di presentazione ad ereditare i valori da , entrambe le parti erediteranno stesso valore e currentColor non avrebbe alcun effetto. Pertanto, in questa tecnica, dobbiamo rimuovere l'attributo che vogliamo impostare tramite CSS e lasciare solo quello in cui utilizzeremo currentColor .

Ora, usando le proprietà di riempimento e colore in aggiungeremo stili alla goccia dal logo:

Codrops-1 ( riempimento: #4BC0A5; colore: #A4DFD1; ) .codrops-2 ( riempimento: #0099CC; colore: #7FCBE5; ) .codrops-3 ( riempimento: #5F5EC0; colore: #AEAFDD; )

Ogni elemento riceve autovalore riempi e colora. In ognuno di questi, il colore di riempimento viene sovrapposto per riempire il primo percorso che non ha un attributo di riempimento e il colore della proprietà del colore viene utilizzato per impostare l'attributo di riempimento sul secondo percorso.

Quindi quello che è successo è che il valore del colore corrente è trapelato negli stili di contenuto dell'elemento utilizzando la variabile currentColor. Elegante, vero?

Ecco una demo con il codice utilizzato:

Questa tecnica bicolore è ottima per i loghi bicolore. Nel suo articolo Fabrice ha creato tre diverse versioni del logo Sass cambiando il colore del testo rispetto allo sfondo.

La parola chiave currentColor è l'unica variabile CSS attualmente disponibile. Tuttavia, se avessimo più variabili, potremmo usarle per riempirne di più di più valori nel contenuto ? Sì, potremmo. Amelia Bellamy-Royds ha introdotto il concetto di questo sul suo blog Codepen un anno fa. Vediamo come funziona.

Il futuro: progettazione dei contenuti usando le variabili CSS

Il codice del robot contiene tutti i colori che lo compongono:

Ora, non utilizzeremo le variabili CSS come valori dell'attributo di riempimento per ogni percorso. Invece, li useremo come colori di riempimento usando la proprietà di riempimento CSS, mantenendo tutti gli attributi di riempimento in posizione. Questi attributi verranno utilizzati come ripiego per i browser che non supportano le variabili CSS: l'immagine apparirà così com'è quando le variabili CSS non funzionano.

Con aggiunto codice variabile sarà il seguente:

Poiché i tag di stile in linea sovrascrivono gli attributi di presentazione, i browser che supportano le variabili CSS utilizzeranno queste variabili per impostare il colore di riempimento. E i browser che non li supportano utilizzeranno l'attributo di riempimento.

Successivamente, dobbiamo impostare i valori per le variabili nel CSS. Ma prima istanziamo l'immagine con :

Dopodiché, impostiamo i valori delle variabili da utilizzare in modo che possano scorrere al suo contenuto. I colori che scegli creeranno combinazione di colori disegno. Poiché il nostro robot utilizza tre colori primari, li chiameremo primari, secondari e terziari.

#robot-1 ( --primary-color: #0099CC; --secondary-color: #FFDF34; --tertiary-color: #333; )

Puoi ancora utilizzare le proprietà di riempimento e colore con queste variabili, ma puoi cavartela senza di esse. Quindi, con i colori impostati nelle nostre variabili, il robot si presenta così:

Puoi utilizzare tutte le copie di un'immagine che desideri e impostare un diverso set di colori per ciascuna di esse creando vari temi. Questo è in parte utile quando vuoi dare uno stile a un logo. diversi modi a seconda del contesto e in altri casi simili.

Come accennato, i browser che non supportano le variabili CSS utilizzano gli attributi di presentazione forniti come ripiego, mentre i browser che lo fanno Variabili CSS usarli per popolare la proprietà di riempimento e riscrivere gli attributi. Ma cosa succede se il browser supporta le variabili CSS, ma hai dimenticato di impostare queste variabili negli stili o di impostare il valore sbagliato?

Per il nostro robot hipster, abbiamo impostato tre variabili e solo alcuni dei suoi frammenti non dipendono da esse - dopotutto, è stato originariamente sviluppato per possibili temi. Quindi, se esegui questo codice in un browser che supporta le variabili CSS e rimuovi tutte le dichiarazioni delle variabili, otterrai il seguente output:

Se i valori delle variabili non sono impostati o non sono corretti, il browser utilizzerà il suo colore predefinito, che solitamente è nero per riempimento e tratto in SVG.

Puoi aggirare questo problema impostando un colore diverso come fallback per i browser supportati. La sintassi della variabile CSS ti consente di farlo: invece di passare il nome della variabile come argomento alla funzione var(), passi due argomenti separati da virgole: il nome della variabile e un fallback, in questo caso il valore per l'attributo di presentazione .

Quindi ora il nostro codice robot è simile a questo:

Ed è tutto. Se una variabile non viene impostata, il browser avrà sempre un colore di fallback impostato. Sorprendente.

Usando questa tecnica, puoi visualizzare questo robot in qualsiasi punto della pagina con , dando a ogni istanza un colore diverso e diventando diverso temi di colore infine.

Puoi sperimentare la demo, creare tutte le copie del robot che desideri e colorarlo con qualsiasi colore - ricorda solo che devi utilizzare un browser che supporti le variabili CSS per questo:

Se visualizzi questa demo in un browser che supporta le variabili CSS, vedrai, tra le altre cose, una versione blu e gialla del robot, come abbiamo impostato nelle variabili CSS. Altrimenti, vedrai tre robot identici con un colore di fallback.

Riassumendo

È stato un ottimo articolo.

Utilizzando la potenza della cascata CSS, lo styling dei contenuti memorizzato nel DOM ombra diventa meno complesso. E con le variabili CSS (currentColor o proprietà personalizzate), possiamo entrare nel DOM ombra e personalizzare la nostra grafica come vogliamo, creando un fallback in caso di problemi.

Personalmente, mi piace molto la combinazione di variabili CSS e SVG. Mi piace la loro funzionalità articolare, soprattutto in termini di creazione di un meccanismo di fallback.

Potremmo anche ottenere altri modi per definire lo stile dei contenuti in futuro man mano che le discussioni continuano sull'utilizzo delle variabili CSS come parametri SVG, quindi questo articolo non tratterà tutto ciò che c'è da sapere su questo argomento.

La gestione del contenuto SVG riutilizzabile è una delle cose complicate di SVG, ha a che fare con il comportamento e la posizione del codice clonato. Ciò solleva molte questioni correlate che possono diventare l'argomento di articoli separati.

Il supporto per Scalable Vector Graphics (SVG) funziona alla grande in tutto browser moderni, il formato dell'immagine appare in contesti sorprendenti su molte pagine web differenti. Ma nonostante sia lo standard da quasi due decenni, SVG rimane un formato in qualche modo nuovo per alcuni designer e sviluppatori, lasciandoli confusi su come dovrebbe essere utilizzato su un sito web. Ecco alcuni motivi per cui dovresti usare SVG:

Piccole dimensioni del file

Gli SVG tipici ben progettati sono molto più piccoli dei PNG equivalenti, il che significa che le pagine che li utilizzano si caricano più velocemente per gli utenti.

Scalabilità

Perché SVG è costruito da formule matematiche, non da pixel fissi grafica raster, le immagini SVG possono essere ridimensionate senza perdere la qualità, il che le rende ideali per i moderni siti Web reattivi.

Interagisce con il DOM

SVG viene talvolta definito "disegno con markup": ogni elemento in un'immagine SVG interagisce con il DOM, il che significa che CSS e JavaScript possono manipolare parti di un documento SVG. A differenza della grafica bitmap, ogni singola forma in SVG può avere il proprio ID o classe.

Facile da modificare e adattare

La qualità dei componenti SVG significa che i documenti SVG ben formati possono essere facilmente modificati in qualsiasi editor di testo senza che sia necessario programmi specializzati richiesto per le bitmap. E poiché SVG interagisce con il DOM, i suoi elementi possono essere modificati con CSS. Il formato SVG è ottimo per visualizzare:

loghi

• illustrazioni e disegni

Strumenti per lavorare con SVG

Mentre puoi creare un documento SVG con any editor di testo, di solito lo sono programmi di illustrazione vettoriale come Adobe Illustrator o Inkscape la scelta migliore(anche se va notato che altre applicazioni, inclusi programmi 3D come Blender e applicazioni server, può esportare SVG).

Qualunque cosa tu usi, dovresti essere consapevole del fatto che la generazione di SVG dalle applicazioni a volte lascia ancora molto a desiderare: il documento risultante è spesso ricodificato e talvolta formattato male. Un file .svg può essere reso più piccolo, più compatto elaborandolo con un ottimizzatore come SVGOMG. A volte passare il documento .svg sbagliato attraverso il validatore W3C può aiutarti a identificare i problemi.

Integrazione SVG

Esistono tre modi principali in cui SVG può essere utilizzato direttamente su una pagina Web:

Poiché SVG è basato su XML, può essere integrato direttamente nel codice della tua pagina. Il codice SVG riduce la latenza e il tempo di caricamento complessivo della tua pagina.


Piace bitmap, il file SVG può essere referenziato dal tag o tramite CSS come immagine di sfondo. È spesso Il modo migliore, a meno che gli SVG non richiedano l'attenzione individuale CSS e JavaScript.


Inserito come