Ugradnja svg u css. Dodavanje SVG-a na stranicu pomoću oznake

Detaljan članak o oblikovanju sadržaja u SVG elementu i prevladavanje povezanih problema.

Grafika u SVG formatu posebno se često koristi za stvaranje ikona, a jedna od najčešćih tehnika za to je SVG sprite koji koristi SVG za instanciranje ikona u pravo mjesto dokument.

Instanciranje ikona ili bilo kojeg drugog SVG sadržaja u elementu uzrokuje poteškoće u oblikovanju pojedinih primjeraka. Svrha ovog članka je dati vam pregled nekih mogući načini zaobići ograničenja dizajna povezana s korištenjem .

No prije nego počnemo, pogledajmo na brzinu osnovnu strukturu i grupiranje elemenata u SVG-u, postupno prelazimo na , DOM, a zatim natrag na CSS. Analizirat ćemo zašto dizajn može uzrokovati poteškoće i kako ih prevladati.

Brzi pogled na SVG strukturu, grupiranje i reference elemenata u SVG-u

SVG uključuje 4 glavna elementa za definiranje, strukturiranje i povezivanje SVG sadržaja u dokumentu. Ovi elementi dopuštaju ponovnu upotrebu slika uz zadržavanje čitljivosti i održavanja koda. Zbog prirode SVG-a, neki od ovih elemenata imaju funkcionalnost sličnu odgovarajućim naredbama u grafičkim uređivačima.

4 osnovna elementa grupiranja i povezivanja SVG-a su , , i .

Element (skraćeno od “group”) koristi se za logičko grupiranje skupova povezanih grafički elementi. Što se tiče grafičkih uređivača (npr Adobe Illustrator) element slična po funkcionalnosti funkciji "Grupni objekti". Grupu također možete zamisliti kao sloj u njemu grafički uređivač.

Grupiranje elemenata je korisno kada želite primijeniti stil na sve elemente u grupi, a također i kada želite animirati sve elemente u grupi uz zadržavanje njihovog odnosa.

Element koristi se za definiranje mnogih stvari, uglavnom za definiranje uzoraka kao što su gradijenti koji se zatim mogu koristiti za popunjavanje drugih SVG elemenata. Može se koristiti za definiranje svih elemenata koje ćete koristiti bilo gdje na platnu.

Element kombinira mogućnosti i u onom koji se koristi za grupiranje elemenata s predloškom koji se može referencirati drugdje u dokumentu. Za razliku od , ne koristi se za postavljanje uzoraka; obično se koristi za stvaranje simbola kao što su ikone, koje se zatim primjenjuju u cijelom dokumentu.

Na elementu postoji još jedan važna prednost: prihvaća atribut viewBox koji omogućuje zumiranje unutar bilo kojeg okvira za prikaz.

Element omogućuje korištenje prethodno definiranog elementa bilo gdje u dokumentu. Omogućuje vam ponovnu upotrebu elemenata, daje funkcionalnost sličnu copy-paste u grafičkom uređivaču. Može se koristiti kao zasebni element, i grupa koja se predala , ili .

Da biste koristili element, morate proslijediti vezu na taj element, id je atribut xlink:href i pozicionirati ga postavljanjem atributa x i y. Možete primijeniti stilove na element i oni će se preliti na sadržaj tog elementa.

Ali kakav je sadržaj ? Gdje klonira? I kako CSS kaskada radi s njim?

Prije nego odgovorimo na ova pitanja, a s obzirom na to da smo samo zagrebali po površini SVG strukture i grupiranja, vrijedno je spomenuti nekoliko članaka koji će vam omogućiti da saznate više o tim elementima, kao i atributu viewBox na elementu. :

• Strukturiranje, grupiranje i povezivanje u SVG - elementi g, upotreba, defs i simbol
• Razumijevanje SVG koordinatnog sustava (1. dio): Viewport, viewBox i PreserveAspectRatio

SVG i sjena DOM

Kada upućujete na element sa , vaš kod izgleda otprilike ovako:

Na ekranu se prikazuje ikona čiji je sadržaj definiran unutra , ali to je zapravo sadržaj elementa , što je klon .

Ali element to je samo jedan element koji se samozatvara - nema sadržaja između oznake otvaranja i zatvaranja, pa gdje je sadržaj kloniran ?

Odgovor je u sjena DOM(iz nekog razloga, uvijek ga povezujem s Batmanom, ne znam zašto).

Što je DOM sjena?

Sjenoviti DOM je identičan normalnom DOM-u, osim što umjesto da budu dio glavnog stabla dokumenta, sjenoviti DOM čvorovi se odnose na fragment dokumenta koji je paralelan s glavnim dokumentom, ali nedostupan njegovim skriptama i stilovima. To autorima omogućuje stvaranje modularne komponente, inkapsulirajući skripte i stilove. Ako ste ikada koristili video element ili unos raspona u HTML5 i niste razumjeli odakle dolaze kontrole ili klizač video playera, onda je odgovor isti - DOM sjena.

U slučaju SVG elementa , sadržaj na koji se odnosi klonira se u fragment dokumenta "hostiran" u . V ovaj slučaj ovo je domaćin sjene.

Dakle sadržaj (klon ili kopija elementa na koji se odnosi) nalazi se unutar fragmenta sjene dokumenta.

Drugim riječima, sadržaj postoji, ali je nevidljiv. Isto kao i uobičajeni DOM sadržaj, ali nije dostupan alatima visoke razine kao što su CSS i JavaScript selektori, kopirani u fragment dokumenta koji je povezan s .

Sada, ako ste dizajner, možda mislite: "U redu, shvaćam, ali postoji li način da pregledate ovaj poddokument i vidite njegov sadržaj." Odgovor je da, sadržaj DOM-a u sjeni možete vidjeti pomoću razvojnih alata u Chromeu (u Firefoxu na ovaj trenutak ova značajka nije dostupna). Ali prvo morate aktivirati DOM inspektor u sjeni na kartici Općenito na ploči s postavkama. Ovo je detaljno opisano.

Nakon što omogućite Shadow DOM Inspection u Alatima za razvojne programere, možete vidjeti klonirane elemente na ploči Elementi baš kao i normalni DOM elementi. Sljedeća slika prikazuje primjer elementa A koji se odnosi na sadržaj elementa . Imajte na umu da su “#shadow-root” i njegov sadržaj klonovi sadržaja .

Korištenje alata chrome programer, možete pregledati sadržaj elementa use unutar DOM-a u sjeni (“#shadow-root”, redak u sivoj boji). Ova snimka zaslona provjerava logotip Codrops iz primjera koji ćemo pogledati u sljedećem odjeljku.

Gledajući kod koji se provjerava, možete vidjeti da je DOM u sjeni vrlo sličan običnom DOM-u, osim kako njime rukuju CSS i JavaScript glavnog dokumenta. Postoje i druge razlike među njima koje nećemo obrađivati ​​u ovom članku zbog njihove dužine, pa ako želite saznati više, preporučam vam sljedeće članke:

• Shadow DOM 101 (prijevod na Frontender.info)
• Uvod u Shadow DOM (videozapis)

S obzirom na moje ograničeno iskustvo s DOM-om u sjeni, smatram ga normalnim DOM-om s kojim se treba drugačije rukovati u smislu CSS i JavaScript pristupa njegovim elementima. To je ono što nam je važno kada radimo sa SVG-om: kako utjecati na sadržaj unutar sjenovitog DOM-a jer nam je važno da ga možemo stilizirati. Cijeli smisao korištenja to je mogućnost stvaranja različitih kopija elementa i u većini slučajeva želimo imati mogućnost drugačijeg stiliziranja svake kopije. Na primjer, to može biti logotip u dvije boje ili višebojne ikone za različite teme boja. Stoga nam je važno da to možemo učiniti s CSS-om.

Kao što je navedeno, sadržaj DOM-a u sjeni nije dostupan CSS-u, za razliku od običnog DOM-a. Pa kako ga stiliziramo? Ne možemo koristiti podređeni put kao što je ovaj:

Koristi put #line ( potez: #009966; )

Budući da nemamo pristup sjenovitom DOM-u s redovnim CSS selektorima.

Možda, poput mene, očekujete da prezentacijski atributi imaju najveću specifičnost od svih stilskih pravila. Uostalom, obično se vanjski stilovi prepisuju unutarnjim deklaracijama, a oni se, pak, prepisuju stilovima umetnutih atributa - imaju maksimalnu specifičnost i, sukladno tome, prioritet u odnosu na druge stilove. Iako ovo očekivanje ima smisla, stvarni mehanizam je drugačiji.

Zapravo, prezentacijski atributi se tretiraju kao "autorski stilski listovi" niske razine i nadjačani su ostatkom deklaracija stila: vanjskim, unutarnjim i inline stilovima. Jedina im je snaga u tome što imaju prednost nad naslijeđenim stilovima. I to je sve.

Sada kada smo to shvatili, vratimo se našem elementu. i njegov sadržaj.

Znamo da ne možemo stilizirati iznutra korištenjem CSS selektori.

Ali znamo i to, kao i sa elementom , stilovi primijenjeni na će naslijediti sva njegova djeca (koja su u DOM-u u sjeni).

Dakle, prvo pokušajmo promijeniti boju ispune unutarnjeg elementa primjenom selektora na sam element s očekivanjem da će kaskada i nasljeđivanje obaviti svoj posao.

Međutim, ovo otvara nekoliko pitanja:

1. Boja ispune bit će naslijeđena svi potomci element , čak i one na koje ne želite primijeniti stilove (ali ako je unutra imate samo jedan element, onda ovaj problem neće biti).
2. Ako ste izvezli SVG iz grafičkog uređivača ili iz nekog drugog razloga ne možete izmijeniti SVG kod, na kraju ćete raditi sa SVG-om koji već ima primijenjene prezentacijske atribute (osim ako to izričito ne nadjačate prilikom izvoza u SVG format) i vrijednosti ovih atributa imat će prednost nad onima naslijeđenim od .

Čak i ako možete urediti SVG kod i riješiti ih se, toplo preporučujem da to ne činite. sljedećih razloga:

1. Uklanjanje atributa radi naknadnog postavljanja određenih svojstava vratit će vrijednosti tih svojstava na zadane, a to je u pravilu crna ispuna i potez (u odnosu na boje).
2. Poništavanjem vrijednosti prisiljavate se da stilizirate cijeli skup svojstava.
3. Atributi prezentacije koji su inicijalno postavljeni odlična su rezerva u slučaju da postoje problemi s vanjskim stilovima. Ako se CSS ne učita, vaše će ikone i dalje izgledati lijepo.

Dakle, imamo ove atribute, ali također želimo drugačije stilizirati različite instance ikona.

To se postiže prisiljavanjem prezentacijskih atributa da naslijede stilove dane od strane ili pronalaženje načina da se zaobiđu nadjačavanja ovih vrijednosti. Da bismo to učinili, morat ćemo upotrijebiti punu snagu CSS kaskadiranja.

Počnimo s jednostavni primjeri i postupno prelaziti na složene.

Prepisivanje vrijednosti atributa prezentacije pomoću CSS-a

Atributi prezentacije su nadjačani bilo kojom deklaracijom stila. Ovo možemo koristiti da atribut prezentacije dobije vrijednost naslijeđenu od stilova. .

To je jednostavno zbog ključa css riječ nasljeđuje. Pogledaj sljedeći primjer- ikona sladoleda nacrtana jednim obrisom, čiju boju želimo promijeniti u različitim slučajevima. Ikona koju je kreirala Erin Agnoli iz projekta Noun.

Sadržaj naše ikone sladoleda (puta) definiran je unutar elementa , što znači da se prema zadanim postavkama neće prikazati na platnu.

Iznosimo više instanci ikone sa .

Širinu i visinu ikona postavljamo pomoću CSS-a. Koristim iste dimenzije kao i viewBox, ali ne moraju biti identične. Međutim, kako biste izbjegli višak bijelog prostora unutar SVG-a, pazite da zadržite omjer slike.

Ikona (širina: 100px; visina: 125px;)

S ovim kodom dobili smo sljedeći rezultat:

Primijetite da zahvaljujući dodanim crnim obrubama oko naših SVG-ova možete vidjeti obrube svakog od njih, uključujući i prvi, u kojem sadržaj nije prikazan. Zapamtite: SVG dokument u kojem ste definirali simbol bit će prikazan na stranici, ali bez sadržaja. Da biste to spriječili, koristite svojstvo display: none na prvom SVG-u. Ako ne sakrijete SVG s definicijama ikona, on će i dalje biti prikazan čak i ako za njega ne postavite dimenzije - zadano će biti 300 x 150 piksela (što je zadana postavka za nezamijenjene elemente u CSS-u) i završit ćete s praznim okvirom na ekranu koji vam ne treba. .

Sada pokušajmo promijeniti boju ispune za svaku instancu ikone:

use.ic-1 ( ispuni: nebeskoplavo; ) use.ic-2 ( ispuni: #FDC646; )

Boja ispune ikona i dalje se ne mijenja jer je naslijeđena boja nadjačana atributom fill="#000" na elementu puta. Kako bismo spriječili da se to dogodi, moramo forsirati put da naslijedimo boju:

Svg put ( ispuniti: naslijediti; )

Voila! boje, dano elementima sada se primjenjuju na put svakog od njih. Pogledajte demo i eksperimentirajte s vrijednostima stvaranjem instanci i njihovim postavljanjem različite boje:

Sada ova tehnika radi nakon što smo forsirali sadržaj naslijediti stilove. Ali u mnogim slučajevima to nije baš ono što vam treba. Postoje i drugi načini dizajna, sada ćemo prijeći na neke od njih.

Stiliziranje sadržaja koristeći svojstvo all CSS

Prije nekog vremena, dok sam radio na ikoni aktiviranoj s , trebao mi je jedan od elemenata unutar njega da naslijedim sve stilove , kao što su ispuna , potez , širina poteza , neprozirnost pa čak i transformacija . Stoga sam trebao kontrolirati sve ove atribute putem CSS-a, dok sam sve prezentacijske atribute zadržao u oznaci kao zamjenu.

Ako naiđete na sličan zadatak, vjerojatno ćete smatrati da traje predugo ako se radi u CSS-u:

Put#myPath ( ispuni: naslijediti; potez: naslijediti; širina poteza: naslijediti; transformirati: naslijediti; /* ... */ )

Nakon pregleda ovog isječka, primijetit ćete uzorak, što znači da bi imalo smisla kombinirati sva navedena svojstva u jedno i postaviti ga naslijediti vrijednost.

Srećom možemo pomoći css svojstvo svi . Moja CSS referenca spominje korištenje svojstva all za stiliziranje SVG-ova, ali vrijedi popuniti naše znanje.

Koristeći svojstvo all možemo učiniti sljedeće:

Put#myPath (sve: naslijediti;)

Ovo dobro funkcionira u svim preglednicima koji podržavaju sve , ali imajte na umu sljedeće važna točka: Ova deklaracija govori elementu da naslijedi doslovno sva svojstva svog roditelja, uključujući i ona za koja ne želite da element naslijedi. Dakle, ako ne želite stilizirati sva svojstva CSS-a, ovo vam neće raditi - to je posljednje sredstvo i samo djelomično prikladno kada imate element bez stila i potpunu kontrolu nad svojim svojstvima u CSS-u. Ako koristite ovu deklaraciju i ne definirate vrijednosti za sva CSS svojstva, one će se slagati dok ne pronađu vrijednost od koje će naslijediti, u većini slučajeva zadane stilove preglednika.

Imajte na umu da se ovo odnosi samo na atribute koji se mogu postaviti pomoću CSS-a, a ne na atribute koji su postavljeni samo u SVG-u. Ako se atribut može postaviti pomoću CSS-a, on će naslijediti stilove, inače ne.

Mogućnost aktiviranja nasljeđivanja po prezentacijskim atributima svih stilova , ali što ako imate ikonu koja se sastoji od nekoliko elemenata i ne želite da svi naslijede istu boju ispune? Što ako želite primijeniti više različite boje popunjava za različite potomke? Određivanje jednog stila u ne odgovara više. Trebamo nešto drugo za kaskadu željene boje Do pravim elementima.

Korištenje CSS varijable currentColor za stiliziranje sadržaja

Korištenje CSS varijable currentColor, u kombinaciji s gore opisanom tehnikom, omogućuje vam da definirate dvije boje za element, a ne jednu. Fabrice Weinberg je o tome pisao prije godinu dana.

Ideja je istovremeno primijeniti na svojstva ispune i boje, a zatim ta svojstva kaskadno prebaciti na sadržaj , koristeći mogućnosti varijable currentColor. Pogledajmo primjer koda da bismo razumjeli kako funkcionira.

Recimo da želimo stilizirati ovaj minimalistički Codrops logo koristeći 2 boje - jednu za prednju i jednu za stražnju.

Prvo, počnimo s kodom za ovu sliku: imamo simbol koji sadrži opis ikone i tri instance , stvarajući tri instance logotipa.

Ako na element postavimo boju ispune za svaki slučaj, tu će boju naslijediti obje kapi, što nam nije cilj.

Dakle, umjesto da definirate boju ispune i da je kaskadirate na uobičajen način, koristit ćemo varijablu currentColor da manji pad u prednjem planu učinimo drugom bojom, a tu ćemo vrijednost postaviti s svojstva boje.

Prvo, trebamo umetnuti currentColor gdje želimo primijeniti ovu boju - to će biti mjesto u oznaci gdje je ikona definirana, odnosno unutar . Sada ovaj isječak izgleda ovako:

Zatim moramo ukloniti prezentacijski atribut ispune iz drugog pada i pustiti ga da naslijedi boju ispune od elementa korištenjem nasljeđivanja.

Ako bismo upotrijebili ključnu riječ inherit da prisilimo prezentacijske atribute da naslijede vrijednosti od , oba dijela bi naslijedila istu vrijednost, a currentColor ne bi imalo učinka. Stoga u ovoj tehnici trebamo ukloniti atribut koji želimo postaviti putem CSS-a, a ostaviti samo onaj u kojem ćemo koristiti currentColor.

Sada, koristeći svojstva ispune i boje u Dodat ćemo stilove u ispuštanje iz logotipa:

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

Svaki element prima vlastita vrijednost ispunite i obojite. U svakom od njih, boja ispune je kaskadna kako bi ispunila prvi put koji nema atribut ispune, a boja svojstva boje koristi se za postavljanje atributa ispune na drugom putu.

Dakle, ono što se dogodilo je trenutna vrijednost boje koja je procurila u stilove sadržaja elementa korištenjem varijable currentColor. Elegantno, zar ne?

Ovdje je demo s korištenim kodom:

Ova dvobojna tehnika izvrsna je za dvobojne logotipe. U svom članku, Fabrice je stvorio tri različite verzije logotipa Sass mijenjajući boju teksta u odnosu na pozadinu.

Ključna riječ currentColor jedina je trenutno dostupna CSS varijabla. Međutim, kada bismo imali više varijabli, mogli bismo ih koristiti za popunjavanje više više vrijednosti u sadržaju ? Da, mogli bismo. Amelia Bellamy-Royds predstavila je koncept ovoga na svom Codepen blogu prije godinu dana. Pogledajmo kako to radi.

Budućnost: Dizajn sadržaja korištenjem CSS varijabli

Kod robota sadrži sve boje koje ga čine:

Sada nećemo koristiti CSS varijable kao vrijednosti atributa fill za svaki put. Umjesto toga, koristit ćemo ih kao boje ispune pomoću svojstva CSS fill, zadržavajući sve atribute ispune na mjestu. Ovi atributi će se koristiti kao zamjenski za preglednike koji ne podržavaju CSS varijable - slika će se pojaviti onakva kakva jest kada CSS varijable ne rade.

Uz dodano varijabilni kod bit će kako slijedi:

Budući da umetnute oznake stila nadjačavaju prezentacijske atribute, preglednici koji podržavaju CSS varijable koristit će te varijable za postavljanje boje ispune. A preglednici koji ih ne podržavaju koristit će atribut fill.

Zatim moramo postaviti vrijednosti za varijable u CSS-u. Ali prvo instanciramo sliku s :

Nakon toga, postavimo vrijednosti varijable za upotrebu tako da se mogu kaskadno prebaciti na njezin sadržaj. Boje koje odaberete će stvoriti Shema boja crtanje. Budući da naš robot koristi tri primarne boje, nazvat ćemo ih primarnom, sekundarnom i tercijarnom.

#robot-1 ( --primarna-boja: #0099CC; --sekundarna-boja: #FFDF34; --tercijarna-boja: #333; )

I dalje možete koristiti svojstva ispune i boje s ovim varijablama, ali možete i bez njih. Dakle, s bojama postavljenim u našim varijablama, robot izgleda ovako:

Možete koristiti onoliko kopija slike koliko želite i kreiranjem postaviti drugačiji skup boja za svaku od njih razne teme. Ovo je djelomično korisno kada želite stilizirati logotip. različiti putevi ovisno o kontekstu i u drugim sličnim slučajevima.

Kao što je spomenuto, preglednici koji ne podržavaju CSS varijable koriste dane prezentacijske atribute kao zamjenu, dok preglednici koji podržavaju CSS varijable koristiti ih za popunjavanje svojstva fill i prepisivanje atributa. Ali što se događa ako preglednik podržava CSS varijable, ali ste zaboravili postaviti te varijable u stilove ili ste postavili pogrešnu vrijednost?

Za našeg hipsterskog robota postavili smo tri varijable i samo nekoliko njegovih fragmenata ne ovisi o njima - uostalom, izvorno je razvijen za moguće tematiziranje. Dakle, ako pokrenete ovaj kod u pregledniku koji podržava CSS varijable i uklonite sve deklaracije varijabli, dobit ćete sljedeći rezultat:

Ako vrijednosti varijabli nisu postavljene ili nisu točne, preglednik će koristiti svoju zadanu boju, koja je obično crna za popunjavanje i crtanje u SVG-u.

Ovo možete zaobići tako da postavite drugu boju kao zamjenu za podržane preglednike. Sintaksa CSS varijable omogućuje vam da to učinite: umjesto prosljeđivanja naziva varijable kao argumenta funkciji var(), prosljeđujete dva argumenta odvojena zarezima - naziv varijable i zamjenski, u ovom slučaju vrijednost za atribut prezentacije .

Dakle, naš kod robota sada izgleda ovako:

I to je sve. Ako se bilo koja varijabla ne postavi, preglednik će uvijek imati postavljenu zamjensku boju. divno.

Koristeći ovu tehniku, možete prikazati ovog robota bilo gdje na stranici , dajući svakoj instanci drugačiju boju i postaje drugačija teme boja naposljetku.

Možete eksperimentirati s demo, kreirati koliko god želite kopija robota i obojiti ga bilo kojom bojom - samo zapamtite da za to morate koristiti preglednik koji podržava CSS varijable:

Ako pogledate ovaj demo u pregledniku koji podržava CSS varijable, vidjet ćete, između ostalog, plavu i žutu verziju robota, kako smo postavili u CSS varijablama. Inače ćete vidjeti tri identična robota sa zamjenskom bojom.

Sumirati

Bio je to sjajan članak.

Korištenje snage CSS kaskade, stiliziranje sadržaja pohranjen u sjeni DOM postaje manje kompliciran. A s CSS varijablama (currentColor ili prilagođena svojstva), možemo ući u DOM u sjeni i prilagoditi našu grafiku kako god želimo, dok stvaramo rezervni dio u slučaju problema.

Osobno mi se jako sviđa kombinacija CSS varijabli i SVG-a. Sviđa mi se njihova zajednička funkcionalnost, posebno u smislu stvaranja rezervnog mehanizma.

Možda ćemo dobiti i druge načine stiliziranja sadržaja u budućnosti kako se nastave rasprave o korištenju CSS varijabli kao SVG parametara - tako da ovaj članak neće pokriti sve što se može znati o ovoj temi.

Bavljenje SVG sadržajem za višekratnu upotrebu jedna je od škakljivih stvari u vezi sa SVG-om, ima veze s ponašanjem i lokacijom kloniranog koda. To otvara mnoga povezana pitanja koja mogu postati tema zasebnih članaka.

Podrška za skalabilnu vektorsku grafiku (SVG) izvrsno funkcionira u svemu moderni preglednici, format slike pojavljuje se u iznenađujućim kontekstima na mnogim različitim web stranicama. No, unatoč tome što je bio standard već gotovo dva desetljeća, SVG ostaje donekle novi format za neke dizajnere i programere, ostavljajući ih zbunjenima kako bi se trebao koristiti na web stranici. Evo nekoliko razloga zašto biste trebali koristiti SVG:

Mala veličina datoteke

Dobro dizajnirani, tipični SVG-ovi mnogo su manji od ekvivalentnog PNG-a, što znači da se stranice koje ih koriste brže učitavaju za korisnike.

Skalabilnost

Budući da je SVG izgrađen od matematičkih formula, a ne od fiksnih piksela rasterska grafika, SVG slike mogu se povećavati i smanjivati ​​bez gubitka kvalitete, što ih čini idealnim za moderne responzivne web stranice.

Interagira s DOM-om

SVG se ponekad naziva "crtanjem s oznakom": svaki element u SVG slici je u interakciji s DOM-om, što znači da CSS i JavaScript mogu manipulirati dijelovima SVG dokumenta. Za razliku od bitmap grafike, svaki pojedinačni oblik u SVG-u može imati svoj ID ili klasu.

Lako se mijenja i prilagođava

Kvaliteta SVG komponenti znači da se dobro oblikovani SVG dokumenti mogu lako mijenjati u bilo kojem uređivaču teksta bez potrebe za specijalizirani programi potrebno za bitmape. A budući da SVG stupa u interakciju s DOM-om, njegovi se elementi mogu mijenjati pomoću CSS-a. SVG format izvrstan je za prikaz:

logotipi

• ilustracije i crteži

Alati za rad sa SVG-om

Dok možete stvoriti SVG dokument s bilo kojim uređivač teksta, programi za vektorske ilustracije kao što su Adobe Illustrator ili Inkscape su obično najbolji izbor(iako treba napomenuti da druge aplikacije, uključujući 3D programe kao što su Blender i poslužiteljske aplikacije, može izvesti SVG).

Što god upotrijebili, trebali biste biti svjesni da generiranje SVG-ova iz aplikacija i dalje ponekad ostavlja mnogo željenog: rezultirajući dokument često je ponovno kodiran i ponekad loše formatiran. .svg datoteku možete učiniti manjom, kompaktnijom obradom s optimizatorom kao što je SVGOMG. Ponekad vam propuštanje pogrešnog .svg dokumenta kroz W3C validator može pomoći u prepoznavanju problema.

SVG integracija

Postoje tri glavna načina na koji se SVG može koristiti izravno na web stranici:

Budući da se SVG temelji na XML-u, može se izravno integrirati u kod na vašoj stranici. SVG kod smanjuje kašnjenje i ukupno vrijeme učitavanja vaše stranice.


Kao bitmape, SVG datoteku može referencirati oznaka ili putem CSS-a kao pozadinske slike. Često je Najbolji način, osim ako SVG-ovi ne trebaju posebnu pažnju na CSS i JavaScript.


Umetnuto kao