HTML5 SVG

Zašto SVG?


  • Jednostvno je kreirati, uređivati i mijenjati grafiku
  • Koristi jezik s kojim smo se već susretali
  • Dostupan je u svim modernim preglednicima
  • Dostupan je u preglednicima mobitela

Scalable Vector Graphics (SVG) je jezik kojemu je temelj XML i služi za kreiranje 2D slika.
Vektorske slike kreiraju se na temelju niza matematičkih izračuna.

Mogući SVG oblici

  • crte - lines
  • pravokutnici - rectangles
  • krugovi - circles
  • elipse - elipses
  • poligoni - polygons
  • putanje - paths
  • krivulje - curves
  • lukovi - arcs

Umetanje SVG grafike u HTML


Vektorska grafika se umeće unutar parnog elementa <svg></svg>
Element svg definira platno za grafiku i kreira interni mrežasti sustav:
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="100" cy="100" r="75" fill="blue" />
</svg>

Kreiranje SVG crta


SVG grafiku crtamo u koordinatnom sustavu. Točka (0,0) se nalazi u gornjem lijevom kutu prozora.

<line x2="150" y2="50" stroke="red" stroke-width="5" /> <line x1="100" y1="150" x2="250" y2="50" stroke="green" stroke-width="3" />

Kreiranje SVG pravokutnika

<rect x="75" y="75" width="225" height="175" fill="orange" fill-opacity="0.5" />

<rect x="175" y="175" width="325" height="275" rx="5" 
ry="5" fill="orange" fill-opacity="0.5" 
stroke-width="3" stroke ="blue" />

Kreiranje kruga i elipse

<circle cx="200" cy="200"  r="100" stroke="red" fill="blue" />

<ellipse cx="400" cy="400" rx="200" ry="150" fill="orange" />

Kreiranje putanje

  • M (Move) pomakni se na zadanu točku
  • L (Line) nacrtaj crtu do zadane točke
  • H (horizontal) nacrtaj vodoravnu crtu
  • V (vertical) nacrtaj okomitu crtu
  • Q (Quadratic) nacrtaj kvadratnu krivulju
  • C (Cubic) nacrtaj kubnu krivulju
  • A (Arc) nacrtaj luk

Primjer krivulje slova A

<path id="lineAB" d="M 100 350 l 150 -300" 
   stroke="red" stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" 
   stroke="red" stroke-width="3" fill="none" />
<path id="lineAC" d="M 175 200 l 150 0" 
   stroke="red" stroke-width="3" fill="none" />
<path id="curve" d="M 100 350 q 150 -300 300 0"
   stroke="blue" stroke-width="5" fill="none" />

Animacija kruga

<rect x="0" y="0" width="300" height="100" stroke="rgb(255,0,255)" stroke-width="1" fill="yellow" opacity="0.5" />

<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
     <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />

</circle>

Zadatak: nacrtajte crtež



Hvala na pozornosti!


Pitanja?