ELPROS
SVG

SVG

Ugradnja vektorske grafike u web-stranice pomoću <svg> elemenata

 

format .svg spada u vektorsku grafiku

male su veličine datoteka i pogodan je za indeksiranje sadržaja za web-pretraživače

element <svg></svg> koristi se za iscrtavanje grafike u pregledniku

mogu se iscrtavati krugovi, pravokutnici, kvadrati i slično

direktnim iscrtavanjem u pregledniku smanjuje se količina podataka pri učitavanju stranice i stranica se brže učitava

svg slika ne gubi na kvaliteti bez obzira ne veličinu zaslona na kojem se učitava

—————————————————————————————————————————————————–

Pri iscrtavanju elemenata u web pregledniku vrlo je važno poznavanje koordinatnog sustava

  • gornji lijevi kut ima koordinate x = 0, y = 0
  • vrijednost x koordinate se povećava vodoravno
  • vrijednost y koordinate se povećava okomito.

—————————————————————————————————————————————————–

Unutar <svg> </svg> elementa možemo iscrtavati sljedeće elemente:

<circle/> – krug

  • udaljenost koordinata središta kružnice (cy, cy) od gornjeg lijevog kuta <svg> slike
  • polumjer r
  • stroke – definira boju linije
  • stroke-width – debljina linije
  • fill – ispuna objekta, odnosno kruga

—————————————————————————————————————————————————–

<ellipse/> – elipsu

Za crtanje elipse definiraju se svojstva:

  • boja ispune svojstvom fill
  • cx i cy označavaju x i y udaljenost središta elipse od gornjeg lijevog kuta <svg> slike
  • rx i ry određuju radijus elipse.

—————————————————————————————————————————————————–

<rect/> – pravokutnik

  • širina i visina elementa <react/> sa svojstvima width i hight
  • boja ispune svojstvom fill
  • boja linije svojstvom stroke
  • debljina linije svojstvom stroke-width
  • prozirnost boje obojenog područja svojstvom opacitiy

Kod zaobljenog pravokutnika:

  • x i y udaljenost gornjeg lijevog kuta pravokutnika od gornjeg lijevog kuta <svg> slike
  • rx i ry određuju zaobljenost ruba na x odnosno y stranici svakoga kuta.

—————————————————————————————————————————————————–

<line/> – liniju

—————————————————————————————————————————————————–

<polyline/> – spojene linije

  • boja ispune svojstvom fill
  • boja linije stroke
  • debljina linije svojstvom stroke-width
  • koordinate spojnih točaka svojstvom points

—————————————————————————————————————————————————–

<polygon/> – poligon

—————————————————————————————————————————————————–

Svojstva <iframe> elementa

  • style za uređivanje stilova, border=0 za uklanjanje obruba
  • allowfullscreen određuje je li dopušten prikaz na cijelom zaslonu ili ne
  • loadingdefinira kako će web preglednik učitati okvir
  • Vrijednosti svojstva loading mogu biti:
  • eager – učitava se odmah bez obzira je li izvan vidljivog područja
  • lazy – odgađa učitavanje okvira dok ne bude u području vidljivog područja.

Literatura:
https://www.w3schools.com/graphics/svg_intro.asp
https://developer.mozilla.org/en-US/docs/Web/SVG
Prezentacija sa Loomena
Skip to content