HTML 5 Canvas vs. SVG
- Edellinen sivu HTML5 SVG
- Seuraava sivu HTML Media
Canvas ja SVG sallivat sinun luoda grafiikkaa selaimessa, mutta ne ovat perusluonteeltaan erilaisia.
SVG
SVG on kieli, joka käyttää XML:ää 2D-grafiikan kuvaamiseen.
SVG perustuu XML:ään, mikä tarkoittaa, että SVG DOM:n kaikki elementit ovat saatavilla. Voit liittää JavaScript-tapahtumankäsittelijät joihinkin elementteihin.
SVG:ssä jokainen piirretty grafiikka katsotaan objektiksi. Jos SVG-objektin ominaisuudet muuttuvat, selain voi automaattisesti uudelleenpiirtää grafiikan.
Canvas
Canvas piirtää 2D-kaaviot JavaScriptin avulla.
Canvas piirtää pikseleittäin.
Canvasissa, kun grafiikka on piirretty, se ei enää saa selaimen huomiota. Jos sen sijainti muuttuu, koko näkymä on piirrettävä uudelleen, mukaan lukien kaikki mahdollisesti grafiikalla peitetyt objektit.
Canvas ja SVG vertailu
Seuraavassa taulukossa on lueteltu joitakin eroja canvas ja SVG välillä.
Canvas
- Riippuu resoluutiosta
- Ei tue tapahtumankäsittelijöitä
- Heikko tekstin renderöintikyky
- Voit tallentaa tulostaulukon kuvat .png tai .jpg -muodossa
- Paras valinta kuvakeskeisille peleille, joissa monet objektit piirretään usein uudelleen
SVG
- Ei riipu resoluutiosta
- Tukee tapahtumankäsittelijöitä
- Paras valinta suurille piirtämisympäristöille (esim. Google Maps)
- Monimutkaisuus voi hidastaa piirtämistä (kaikki DOM:n ylisuuri käyttö ei ole nopeaa)
- Ei sopiva pelien käyttöön
- Edellinen sivu HTML5 SVG
- Seuraava sivu HTML Media
