Doslovno: skalabilan Vektorska grafika... MVG? SVG! V vektorski formati ne pohranjuje se sama slika, već upute za njeno konstruiranje iz tačaka i krivulja.
V rasterski formati informacije o određenom broju tačaka slike čvrsto su upakovane u binarnu ciglu. Beskorisno ga je istraživati i možete ga promijeniti samo u grafičkim uređivačima.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W = S�3�o; ���] P ���IEND�B`� ~
SVG format se također može kreirati i mijenjati u grafičkim uređivačima kao što su Illustrator, Sketch ili Inkscape. Ali to je i tekst, što znači da se može otvoriti kao HTML ili CSS u bilo kojem uređivaču koda.
Reći ću vam više: SVG je kao zasebna HTML stranica. Kada ugrađujete SVG, zapravo ugrađujete ne samo sliku, već cijelu stranicu. Sa svojim koordinatnim sistemom, okvirom za prikaz, stilovima, skriptama i neverovatnim karakteristikama.
Stilovi i scenariji, Karl! Evo jedne jednostavne slike za vas.
Gledajući SVG kao odvojena stranica- postaje jasnije koji način umetanja vam je potreban. Postoje četiri glavna, a svaka ima svoje karakteristike.
Prvi i najjednostavniji je element direktno u HTML kodu. Ovo je, u principu, najviše efikasan metod učitajte bilo koju sliku - pretraživači unapred znaju po HTML kodu da je tu i počinju da je učitavaju.
Loša strana je što skripte neće raditi u takvom SVG-u i svaki pokušaj interakcije sa elementima unutar je osuđen na propast. Fajl će biti kao staklo: možete gledati, ali ga ne možete dodirnuti. Ipak, sve ostalo radi dobro interno, uključujući CSS animacije.
Ova metoda je najprikladnija za slike sadržaja kojima nije potrebna interakcija: logotipi, grafike, dijagrami.
Drugi način je pozadinska slika u CSS-u. I nije bitno hoćete li ga postaviti na element, pseudoelement ili umetnuti sadržaj - rezultat će biti isti kao kod : iza stakla, ali unutra nešto radi.
.picture (pozadinska slika: url (picture.svg);)
Ova metoda je prikladna za dizajn grafike kojoj nije potrebna interakcija: pozadine, ikone i druge sitnice.
Treći način, kroz
Zapravo, umjesto