SVG

Što je SVG?

•Scalable Vector Graphics

• SVG grafika ne gubi kvalitetu prilikom zumiranja ili resize-a

• Svi crteži mogu biti interaktivni i dinamički

• Svaki element i atribut SVG datoteke može biti animiran

• Animacije mogu biti definirane i pokrenute interaktivno ili pomoću skripti

• SVG integrira druge W3C standarde kao što su DOM, XSL …

Uporaba SVG-a u HTML-u

Primjer grafike: 

Kod u HTML-u:
<svg width=”100″ height=”100″>
  <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>

SVG i HTML5

Primjeri crtanja osnovnih geometrijskih oblika:

SVG nam dopušta da u HTML-u crtamo: kvadrate, krugove, elipse, linije…

Kod za elipsu:

<svg height=”140″ width=”500″>
  <ellipse cx=”200″ cy=”80″ rx=”100″ ry=”50″
  style=”fill:yellow;stroke:purple;stroke-width:2″ />
</svg>

Kako nacrtati liniju uz pomoć SVG-a:

<svg height=”210″ width=”500″>
  <line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(255,0,0);stroke-width:2″ />
</svg>

SVG nudi ispune boja (gradient, blur, drop shadows, linear, radial)

Kod za Radial ispunu:

<svg height=”150″ width=”500″>
  <defs>
    <radialGradient id=”grad1″ cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”>
      <stop offset=”0%” style=”stop-color:rgb(255,255,255);
      stop-opacity:0″ />
      <stop offset=”100%” style=”stop-color:rgb(0,0,255);stop-opacity:1″ />
    </radialGradient>
  </defs>
  <ellipse cx=”200″ cy=”70″ rx=”85″ ry=”55″ fill=”url(#grad1)” />
</svg>

SVG i Canvas

SVG	HTML Canvas
SVG ima bolju skalabilnost, tako da može imati bolje slike sa velikom kvalitetom na bilo kojoj rezoluciji	Canvas ima lošu skalabilnost.    Nije prikladan za rad s velikim rezolucijama
SVG daje bolje performanse sa manjim brojem objekata ili većom površinom	Canvas daje bolje performanse za rad sa manjim površinama ili većim brojem objekata
SVG se može modificirati uz pomoć skripte i CSS-a	Canvas se može modificirati samo uz pomoć skripte
SVG je baziran na vektorima i sastavljen je od oblika	Canvas je baziran na pixelima