SVG

Standard HTML5 omogoča prikazovanje slik formata SVG. SVG je kratica za Scalable Vector Graphics. To je format za shranjevanje slik v vektorski grafiki. Vektorks grafika ni občutljiva na transformacije, pri povečavi, rotaciji ali raztegovanju se kvaliteta grafike ohrani.

Prednosti vektorkse grafike pred bitno (rastrsko) grafiko:

Vektorske slike lahko poljubno transformiramo.
Vektroske slike lahko povečujemo brez vpliva pa kakovost.
Vektorske slike lahko naredimo, urejamo z poljubnim programom za urejanje besedila.
Vektroske slike lahko dodamo iskalnikom, jih indexiramo, uporabljamo v skriptah in kompresiramo.
Vektroske slike lahko natisnemo z maksimalno kvaliteto ne glede na resolucijo slike.

Razlika med Canvas in SVG:

SVG je format za 2D grafiko temelječ na XML. Pri SVG si brskalnik vsak narisan objekt shrani posebej. Če spemenimo atribut enega objekta, brskalnik avtomatično spremeni samo tisti objekt.

canvas riše 2D grafiko z uporabo JavaScript. canvas se izriše piko za piko. Ko je grafika izrisana, je brskalnik ne shrani. Če spremenimo grafiko, mora brskalnik celo grafiko ponovno izrisati.

Primerjava med Canvas in SVG:

Canvas	SVG
Odvisnost od resolucije. Ni podpore JavaScript dogodkom. Malo možnosti oblikovanja besedila. Grafiko lahko shranimo v formatu .jpg ali .png. Primerno za grafično zahtevnejše igre.	Neodvisnost od resolucije. Podpora JavaScript dogodkom. Primerno za aplikacije z veliko delovno površino (Google Maps). Počasnost kompleksnih grafik. Neprimerno za grafične igre.

Primer:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <g style="fill-opacity:0.7; stroke:black; stroke-width:3px;">
    <circle cx="100px" cy="20px" r="50" style="fill:red;" 
      transform="translate(0,50)" />
    <circle cx="100px" cy="20px" r="50" style="fill:blue;" 
      transform="translate(40,100)" />
    <circle cx="100px" cy="20px" r="50" style="fill:green;" 
      transform="translate(-40,100)"/>
  </g>
</svg>

Nazaj

Naprej