HTML 5 Canvas vs. SVG
- Edellinen sivu HTML5 SVG
- Seuraava sivu HTML Median
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 jokainen elementti on käytettävissä. Voit liittää JavaScript-tapahtumankäsittelijän jokaiseen elementtiin.
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 renderöi 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 canvas ja SVG välillä olevia eroja.
Canvas
- Riippuu resoluutiosta
- Ei tue tapahtumankäsittelijöitä
- Heikko tekstinsyöttökyky
- Voit tallentaa tulostaulukon kuvat .png tai .jpg -muodossa
- Paras kuvainten tiheästi sisältävälle pelille, jossa monet objektit piirretään usein uudelleen
SVG
- Ei riipu resoluutiosta
- Tukee tapahtumankäsittelijöitä
- Paras sovelluksille, joilla on suuret renderöintialueet (esim. Google Kartat)
- Monimutkaisuus hidastaa.renderöintivauhtia (kaikki DOM:n ylitsepääsemättömät sovellukset eivät ole nopeita)
- Ei sopiva pelien käyttöön
- Edellinen sivu HTML5 SVG
- Seuraava sivu HTML Median
