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?

← →