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

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

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

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

Ali prije nego što počnemo, pogledajmo na brzinu osnovnu strukturu i grupiranje elemenata u SVG-u, postepeno prelazimo na , DOM, a zatim nazad na CSS. Analiziraćemo zašto dizajn može izazvati poteškoće i kako ih prevazići.

Brzi pregled SVG strukture, grupisanja i referenci elemenata u SVG-u

SVG uključuje 4 glavna elementa za definisanje, strukturiranje i povezivanje SVG sadržaja u dokumentu. Ovi elementi omogućavaju ponovnu upotrebu slika uz zadržavanje koda čitljivim i održavanim. Zbog prirode SVG-a, neki od ovih elemenata imaju funkcionalnost sličnu odgovarajućim komandama u grafičkim uređivačima.

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

Element (skraćeno od “group”) se koristi za logičko grupisanje skupova povezanih grafičkih elemenata. Š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č.

Grupisanje elemenata je korisno kada želite da primenite stil na sve elemente u grupi, kao i kada želite da animirate sve elemente u grupi uz održavanje njihovog odnosa.

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

Element kombinuje mogućnosti I u onom koji se koristi za grupisanje elemenata sa šablonom koji se može referencirati na drugom mestu u dokumentu. Za razliku od , ne koristi se za postavljanje obrazaca; obično se koristi za kreiranje simbola kao što su ikone, koje se zatim primenjuju u celom dokumentu.

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

Element omogućava vam da koristite prethodno definirani element bilo gdje u dokumentu. Omogućava vam da ponovo koristite elemente, daje funkcionalnost sličnu copy-paste u grafičkom uređivaču. Može se koristiti kao poseban element, i grupa koja se predala , ili .

Da biste koristili element, morate proslijediti vezu do tog elementa, 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 šta 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 ovim elementima, kao i atributu viewBox na elementu. :

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

SVG i senka DOM

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

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

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

Odgovor je unutra shadow DOM(iz nekog razloga, uvek ga povezujem sa Betmenom, ne znam zašto).

Šta je shadow DOM?

Sjeni 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 nepristupačan njegovim skriptama i stilovima. Ovo omogućava autorima da stvaraju modularne komponente, inkapsulirajući skripte i stilove. Ako ste ikada koristili video element ili unos raspona u HTML5 i niste razumjeli odakle su došle kontrole video plejera ili klizač, onda je odgovor isti - shadow DOM.

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

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

Drugim riječima, sadržaj postoji, ali je nevidljiv. Isto kao i normalan DOM sadržaj, ali nije dostupan alatima visokog nivoa kao što su CSS i JavaScript selektori, kopirani u fragment dokumenta povezan sa .

Sada, ako ste dizajner, možda mislite: "U redu, razumijem, ali postoji li način da se pregleda ovaj poddokument i vidi njegov sadržaj." Odgovor je da, možete vidjeti sadržaj DOM-a u sjeni koristeći autorske alate u Chromeu (u Firefoxu na ovog trenutka ova funkcija nije dostupna). Ali prvo morate aktivirati shadow DOM inspektor na kartici Općenito na panelu postavki. Ovo je detaljno opisano.

Nakon što omogućite Shadow DOM inspekciju u alatima za programere, možete vidjeti klonirane elemente na panelu Elementi baš kao i obične DOM elemente. 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 .

Koristeći alate chrome developer, možete pregledati sadržaj elementa use unutar DOM-a u sjeni (“#shadow-root”, linija je zasivljena). Ovaj snimak ekrana 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 razmatrati u ovom članku zbog njihove dužine, pa ako želite saznati više, preporučujem vam sljedeće članke:

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

S obzirom na moje ograničeno iskustvo sa DOM-om u senci, smatram ga normalnim DOM-om kojim se treba drugačije rukovati u smislu CSS i JavaScript pristupa njegovim elementima. Ovo je ono što nam je važno kada radimo sa SVG-om: kako uticati na sadržaj unutar DOM-a u sjeni jer nam je važno da ga možemo stilizirati. Cijela poenta korištenja to je mogućnost stvaranja različitih kopija elementa i u većini slučajeva želimo imati mogućnost da svaku kopiju stiliziramo drugačije. Na primjer, to može biti logotip u dvije boje ili višebojne ikone za različite boje. Zato nam je važno da to možemo da uradimo sa 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 da ga stiliziramo? Ne možemo koristiti podređenu putanju poput ove:

Koristi put #line ( potez: #009966; )

Zato što nemamo pristup DOM-u u sjeni sa redovnim CSS selektorima.

Možda, poput mene, očekujete da prezentacijski atributi imaju najveću specifičnost od svih stilskih pravila. Na kraju krajeva, obično se eksterni stilovi prepisuju internim deklaracijama, a oni se, zauzvrat, prepisuju stilovima inline atributa - oni imaju maksimalnu specifičnost i, shodno tome, prioritet nad drugim stilovima. Iako ovo očekivanje ima smisla, stvarni mehanizam je drugačiji.

U stvari, atributi prezentacije se tretiraju kao „autorski listovi stilova“ niskog nivoa i nadjačani su ostatkom deklaracija stila: eksternim, internim i inline stilovima. Njihova jedina snaga je u tome što imaju prednost nad naslijeđenim stilovima. I to je to.

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

Znamo da ne možemo stilizovati unutra koristeći 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 uz očekivanje da će kaskada i nasljeđivanje obaviti svoj posao.

Međutim, ovo otvara nekoliko pitanja:

1. Boja ispune će biti 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, tada ćete na kraju raditi sa SVG-om koji već ima primijenjene atribute prezentacije (osim ako to eksplicitno ne poništite prilikom izvoza u SVG format) a 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 radite. sledećih razloga:

1. Uklanjanje atributa radi kasnijeg postavljanja određenih svojstava vratit će vrijednosti ovih svojstava na zadane vrijednosti, a to je po 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 su odlična rezerva u slučaju da postoje problemi s vanjskim stilovima. Ako se CSS ne učita, vaše ikone će i dalje izgledati lijepo.

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

Ovo se radi prisiljavanjem atributa prezentacije da naslijede stilove date od strane ili pronalaženje načina da se zaobiđu zaobilaženja ovih vrijednosti. Da bismo to uradili, moraćemo da iskoristimo punu moć CSS kaskadiranja.

Počnimo sa jednostavni primjeri i postepeno 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 učinimo da atribut prezentacije dobije vrijednost naslijeđenu od stilova. .

To je jednostavno zbog ključa css word 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 neće biti prikazano na platnu prema zadanim postavkama.

Iznosimo višestruke instance ikone sa .

Postavljamo širinu i visinu ikona koristeći CSS. Koristim iste dimenzije kao viewBox, ali ne moraju biti identične. Međutim, da biste izbjegli višak bijelog prostora unutar SVG-a, pobrinite se da zadržite omjer širine i visine.

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

Sa ovim kodom dobili smo sljedeći rezultat:

Imajte na umu da zahvaljujući dodanim crnim okvirima oko naših SVG-ova, možete vidjeti ivice svakog od njih, uključujući i prvi, u kojem sadržaj nije prikazan. Zapamtite: SVG dokument u kojem ste definisali simbol bić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 sa 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 zadano za nezamijenjene elemente u CSS-u) i na kraju ćete imati praznu kutiju na ekranu koja vam nije potrebna. .

Sada ćemo pokušati promijeniti boju ispune za svaku instancu ikone:

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

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

Svg putanja ( ispuniti: naslijediti; )

Voila! boje, dato elementima se sada primjenjuju na putanju svakog od njih. Pogledajte demo i poigrajte se vrijednostima kreiranjem instanci i njihovim postavljanjem različite boje:

Sada ova tehnika radi nakon što smo forsirali sadržaj naslijediti stilove. Ali u mnogim slučajevima ovo 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 CSS svojstvo

Prije nekog vremena, dok sam radio na ikoni aktiviranoj sa , trebao mi je jedan od elemenata unutar njega da naslijedim sve stilove , kao što su ispuna , potez , širina poteza , neprozirnost pa čak i transformacija . Dakle, morao sam kontrolirati sve ove atribute preko CSS-a, dok sam sve atribute prezentacije zadržao u markiranju kao rezervni.

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

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

Gledajući ovaj isječak, 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 sve . Moja CSS referenca pominje korištenje svojstva all za stiliziranje SVG-ova, ali vrijedi popuniti naše znanje.

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

Put#myPath (sve: naslijediti;)

Ovo dobro funkcionira u svim pretraživačima koji podržavaju sve , ali imajte na umu sljedeće važna tačka: Ova deklaracija govori elementu da naslijedi doslovno sva svojstva svog roditelja, uključujući i ona koja ne želite da naslijedi element. Dakle, ako ne želite da se sva svojstva CSS-a stiliziraju, ovo vam neće raditi - ovo je posljednje sredstvo i samo djelomično prikladno kada imate element bez stila i puna kontrola 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 pretraživača.

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 prezentacionim atributima svih stilova , ali šta ako imate ikonu koja se sastoji od nekoliko elemenata i ne želite da svi naslijede istu boju ispune? Šta ako želite primijeniti višestruko različite boje popunjava za različite potomke? Određivanje jednog stila u ne odgovara više. Treba nam nešto drugo za kaskadiranje željene boje to pravim elementima.

Korištenje CSS varijable currentColor za stiliziranje sadržaja

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

Ideja je da se istovremeno primeni na svojstva ispune i boje, a zatim ta svojstva kaskadno prebacuju na sadržaj , koristeći mogućnosti varijable currentColor. Pogledajmo primjer koda da shvatimo 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 postavimo boju ispune na element za svaki slučaj, tu boju će naslijediti obje kapi, što nije naš 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 promijenimo boju, a ovu vrijednost ćemo postaviti sa svojstva boje.

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

Zatim moramo ukloniti prezentacijski atribut ispune iz drugog pada i pustiti ga da naslijedi boju ispune od elementa koristeći nasljeđivanje.

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

Sada, koristeći svojstva ispune i boje u dodaćemo stilove u ispust sa logotipa:

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

Svaki element prima vlastita vrijednost popunu i boju. U svakom od njih, boja ispune je kaskadna da popuni prvu stazu koja nema atribut ispune, a boja svojstva boje se koristi za postavljanje atributa ispune na drugoj stazi.

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

Evo demo s korištenim kodom:

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

CurrentColor ključna riječ je jedina CSS varijabla trenutno dostupna. 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 je predstavila koncept ovoga na svom Codepen blogu prije godinu dana. Hajde da vidimo kako to radi.

Budućnost: Dizajn sadržaja koristeći CSS varijable

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

Sada nećemo koristiti CSS varijable kao vrijednosti atributa fill za svaku putanju. Umjesto toga, koristit ćemo ih kao boje ispune koristeći svojstvo CSS fill, zadržavajući sve atribute ispune na mjestu. Ovi atributi će se koristiti kao rezervni za pretraživače koji ne podržavaju CSS varijable - slika će se pojaviti onakva kakva jeste kada CSS varijable ne rade.

Sa dodanim varijabilni kod bit će kako slijedi:

Budući da umetnute oznake stila nadjačavaju atribute prezentacije, pretraživači koji podržavaju CSS varijable će koristiti ove varijable za postavljanje boje ispune. A pretraživači koji ih ne podržavaju koristit će atribut fill.

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

Nakon toga, postavimo vrijednosti varijabli za upotrebu tako da mogu kaskadirati na njen sadržaj. Boje koje odaberete će kreirati sema boja crtanje. Budući da naš robot koristi tri primarne boje, nazvat ćemo ih primarna, sekundarna i tercijarna.

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

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

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

Kao što je pomenuto, pretraživači koji ne podržavaju CSS varijable koriste date atribute prezentacije kao rezervni, dok pretraživači koji podržavaju CSS varijable koristite ih za popunjavanje svojstva fill i prepisivanje atributa. Ali šta se dešava ako pretraživač podržava CSS varijable, ali ste zaboravili da podesite ove varijable u stilovima ili postavite pogrešnu vrednost?

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

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

Ovo možete zaobići tako što ćete postaviti drugu boju kao zamjenu za pretraživače koji podržavaju. Sintaksa CSS varijable vam omogućava da to učinite: umjesto prosljeđivanja imena varijable kao argumenta funkciji var(), prosljeđujete dva argumenta razdvojena zarezima - naziv varijable i zamjenski, u ovom slučaju vrijednost za atribut prezentacije .

Dakle, sada naš kod robota izgleda ovako:

I to je sve. Ako se bilo koja varijabla ne postavi, pretraživač će uvijek imati postavljenu rezervnu boju. Nevjerovatno.

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 u boji na kraju.

Možete eksperimentirati s demo, kreirati onoliko kopija robota koliko želite i obojiti ga bilo kojom bojom - samo zapamtite da za ovo morate koristiti pretraživač koji podržava CSS varijable:

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

Sažimanje

Bio je to sjajan članak.

Koristeći snagu CSS kaskade, stilizirajte sadržaj pohranjen u sjeni DOM postaje manje komplikovan. A sa CSS varijablama (currentColor ili prilagođena svojstva), možemo ući u DOM u sjeni i prilagoditi našu grafiku kako god želimo, dok kreiramo rezervni dio u slučaju problema.

Lično, jako volim kombinaciju CSS varijabli i SVG. Sviđa mi se njihova zajednička funkcionalnost, posebno u smislu stvaranja rezervnog mehanizma.

Možemo dobiti i druge načine stiliziranja sadržaja u budućnosti kako se nastave diskusije o korišćenju 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 jedan je od škakljivih dijelova SVG-a, ima veze s ponašanjem i lokacijom kloniranog koda. Mnogo je povezanih pitanja koja mogu postati tema zasebnih članaka.

Podrška za skalabilnu vektorsku grafiku (SVG) radi odlično u svemu moderni pretraživači, format slike se pojavljuje u iznenađujućim kontekstima na mnogo različitih web stranica. Ali uprkos tome što je bio standard skoro dve decenije, SVG je i dalje donekle novi format za neke dizajnere i programere, ostavljajući ih zbunjenima oko toga kako bi se trebao koristiti na web stranici. Evo nekoliko razloga zašto biste trebali koristiti SVG:

Mala veličina fajla

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

Skalabilnost

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

Interagira sa DOM-om

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

Lako se modificira i prilagođava

Kvalitet SVG komponenti znači da se dobro oblikovani SVG dokumenti mogu lako modificirati u bilo kojem uređivaču teksta bez potrebe za specijalizovani programi potrebno za bitmape. A pošto SVG komunicira sa DOM-om, njegovi elementi se mogu modifikovati pomoću CSS-a. SVG format je odličan za prikaz:

logos

• ilustracije i crteži

Alati za rad sa SVG

Dok možete kreirati SVG dokument sa bilo kojim uređivač teksta, programi za vektorsku ilustraciju 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 serverske aplikacije, može izvesti SVG).

Šta god da koristite, trebali biste biti svjesni da generiranje SVG-ova iz aplikacija i dalje ponekad ostavlja mnogo željenog: rezultirajući dokument se često ponovo kodira i ponekad loše formatira. .svg fajl se može učiniti manjim, kompaktnijim obradom sa optimizatorom kao što je SVGOMG. Ponekad vam propuštanje pogrešnog .svg dokumenta kroz W3C validator može pomoći da identifikujete probleme.

SVG integracija

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

Pošto je SVG zasnovan na XML-u, može se direktno integrisati u kod na vašoj stranici. SVG kod smanjuje kašnjenje i ukupno vrijeme učitavanja vaše stranice.


Sviđa mi se bitmape, SVG datoteku može referencirati oznaka ili preko CSS-a kao pozadinske slike. Često je Najbolji način, osim ako SVG-ovima nije potrebna posebna pažnja na CSS i JavaScript.


Umetnuto kao