SVG

Povijest
SVG je razvio W3C 2001. godine, a trenutno se razvija nova verzija SVG 2.0 koja proširuje funkcionalnosti, uključujući bolju podršku za CSS stilizaciju​

SVG (Scalable Vector Graphics) predstavlja standardni jezik za opisivanje dvodimenzionalne vektorske grafike pomoću XML-a. Primarna namjena SVG formata je prikaz grafike na internetu, pri čemu grafika ostaje oštra i jasna bez obzira na razinu zumiranja ili promjene veličine prikaza. Zahvaljujući ovim karakteristikama, SVG format omogućuje brzo učitavanje stranica te indeksiranje sadržaja putem tražilica, što doprinosi optimizaciji web stranica.

SVG grafika koristi element <svg> unutar kojeg se definiraju pojedinačni grafički objekti. Neki od osnovnih SVG elemenata uključuju:

  • <line> – linije

  • <rect> – pravokutnici

  • <circle> – krugovi

  • <ellipse> – elipse

  • <polyline> – povezane linije

  • <polygon> – poligoni

  • <path> – putanje koje omogućuju izradu složenijih oblika.

Svaki od ovih elemenata posjeduje vlastite atribute poput pozicije, dimenzija, boje ispune (fill), boje linije (stroke) i debljine linije (stroke-width).

Koordinatni sustav u SVG-u

Pri crtanju SVG grafike važno je razumjeti da web preglednici koriste specifični koordinatni sustav. Gornji lijevi kut ima koordinate (0,0), vrijednosti x koordinate povećavaju se vodoravno, dok se vrijednosti y koordinate povećavaju okomito prema dolje. Ova postavka omogućava precizno pozicioniranje i oblikovanje svih grafičkih elemenata.

Definiranje osnovnih oblika

SVG omogućuje jednostavno crtanje osnovnih grafičkih elemenata:

  • Linije pomoću <line> elementa, gdje su početne i završne točke definirane atributima (x1, y1, x2, y2).

  • Krugovi pomoću <circle>  elementa, pri čemu su važne koordinate središta (cx, cy) i polumjer (r).

  • Pravokutnici pomoću <rect>, gdje se definiraju širina i visina objekta te koordinate gornjeg lijevog kuta.

  • Elipse koriste <ellipse> element koji zahtijeva poluosi rx i ry uz koordinate središta​.

Prilikom crtanja složenijih objekata, koristi se <path> element, gdje se koriste naredbe poput M (Move), L (Line), C (Cubic Bezier Curve), i A (Arc) za detaljno definiranje oblika.

 

Slika 1.

Načini uključivanja SVG grafike u HTML dokumente

Postoji nekoliko načina ugradnje SVG grafike u HTML dokumente:

  • Direktno umetanje SVG koda unutar HTML-a pomoću <svg> oznake omogućuje stiliziranje preko CSS-a i manipulaciju preko JavaScripta.

  • Korištenje <img> oznake (<img src="slika.svg" alt="Opis slike">) tretira SVG kao običnu sliku, čime se gubi mogućnost interaktivne manipulacije​.

  • Ugradnja putem <iframe>, <embed> ili <object> oznaka, gdje <object> predstavlja najbolju praksu zbog bolje kompatibilnosti i veće kontrole sadržaja.

SVG se također može koristiti kao pozadina u CSS-u pomoću svojstva background-image.

Prednosti i nedostaci SVG-a

Prednosti:

  • Neovisnost o rezoluciji – grafika ostaje jasna na svim uređajima i veličinama zaslona.

  • Manje veličine datoteka za jednostavne grafike u usporedbi s bitmap slikama.

  • Mogućnost indeksiranja teksta unutar SVG datoteka od strane tražilica, čime se povećava SEO potencijal.

  • Jednostavna animacija pomoću JavaScript biblioteka (npr. jQuery) ili CSS animacija.

Nedostaci:

  • Kompleksne SVG datoteke s mnogo elemenata mogu biti zahtjevne za performanse na starijim uređajima.

  • Loša podrška za napredne SVG funkcije u nekim starijim verzijama web preglednika​.

SVG je iznimno moćan alat za moderni web dizajn, osobito kada je potrebna visokokvalitetna grafika koja se brzo učitava i lako prilagođava raznim uređajima. Kroz direktno manipuliranje SVG elementima unutar HTML dokumenata, moguće je kreirati interaktivne i responzivne grafike koje obogaćuju korisničko iskustvo.

Slika 2. – generirano umjetnom inteligencijom

Svojstva <iframe> elementa

Element <iframe> omogućava umetanje druge HTML stranice unutar trenutne stranice. Pritom postoje određena svojstva koja određuju izgled i ponašanje <iframe> okvira:

  • style – koristi se za uređivanje stilova <iframe> elementa. Primjerice, svojstvo border=0 koristi se za uklanjanje obruba oko umetnutog sadržaja.

  • allowfullscreen – određuje je li dopušten prikaz umetnutog sadržaja preko cijelog zaslona. Ako je ovo svojstvo omogućeno, korisnik može otvoriti sadržaj <iframe> elementa u punom zaslonu.

  • loading – definira način na koji će web preglednik učitati <iframe> sadržaj. Ovo svojstvo optimizira učitavanje stranice i može poboljšati performanse.

Vrijednosti svojstva loading mogu biti:

  • eager – okvir se učitava odmah, bez obzira nalazi li se unutar vidljivog područja ekrana ili izvan njega.

  • lazy – učitavanje okvira odgađa se dok korisnik ne dođe do vidljivog područja na stranici.

https://maps.app.goo.gl/1VnaqkVSZJ1EpudPA

 

Izvori:

Skip to content