Aký je rozdiel medzi grafikou plátna a SVG?

Canvas a SVG sa používajú na vytváranie grafiky na webe, ale dosahujú to zásadne rôznymi spôsobmi, čo vedie k významným rozdielom v ich schopnostiach a prípadoch použitia.

plátno:

* Raster: Canvas používa pixely na vykreslenie grafiky. Je to ako maľovanie na digitálnom plátne - pri vytváraní obrázkov manipulujete jednotlivé pixely. Rozšírenie obrázka plátna bude mať za následok rozmazané, pixelované výsledky, pretože v podstate rozťahujete pixely.

* manipulácia s pixelmi: Programovo nakreslíte tvary, riadky, text a obrázky priamo na plátno pomocou JavaScriptu. Neexistuje žiadna inherentná štruktúra ani reprezentácia DOM kreslených jednotlivých tvarov.

* Výkon: Všeobecne rýchlejšie pre zložité animácie a manipulácie zahŕňajúce mnoho pixelov, najmä pri riešení transformácií obrazu. Pretože priamo manipuluje s pixelmi, nemusí analyzovať alebo spracovávať komplexné štruktúry.

* Vyhľadávať a upraviť: Jednotlivé prvky v rámci plátna nemožno po ich nakreslení vybrať a upraviť. Ak chcete niečo zmeniť, prekreslíte celé plátno.

* prístupnosť: Pridanie funkcií prístupnosti (napríklad Alt Text) vyžaduje starostlivé kódovanie; Prvky nie sú vo svojej podstate prístupné, akoby boli v SVG.

* Formáty súborov: Typicky exportované ako obrázky (PNG, JPG).

svg (škálovateľná vektorová grafika):

* vektor: SVG používa matematické popisy na reprezentáciu tvarov a ciest. To znamená, že obraz sa skladá z čiar, kriviek a tvarov definovaných ich súradnicami a atribútmi.

* DOM: Prvky SVG sú súčasťou modelu DOM (objekt dokumentu), čo znamená, že k nim môžu byť individuálne prístupné a manipulované prostredníctvom JavaScriptu. To umožňuje ľahkú úpravu, animáciu a styling pomocou CSS.

* škálovateľnosť: Obrázky SVG dokonale škálujú bez straty kvality, pretože nie sú založené na pixeloch. Rozšírenie obrázka SVG ho neznepokojuje.

* Vyhľadávať a upraviť: Jednotlivé prvky v rámci obrázka SVG je možné po vykresľovaní zvoliť a upraviť. Môžete dokonca zmeniť štýly CSS tak, aby ovplyvnili viac prvkov.

* prístupnosť: Prvky SVG môžu obsahovať atribúty, ktoré zlepšujú dostupnosť (napríklad `Aria-label`).

* Formáty súborov: Samotný obrázok je súbor XML.

* Výkon: Môže byť pomalšie ako plátno pre zložité animácie zahŕňajúce mnoho prvkov, pretože prehliadač musí spracovať DOM. Avšak pre statické obrázky alebo jednoduchšie animácie je rozdiel výkonu často zanedbateľný.

Stručne povedané:

| Funkcia | Canvas | SVG |

| ---------------- | ------------------------------------------- | ----------------------------------------------------

| Typ | Raster | Vektor

| škálovateľnosť | Zlé pixeláty, keď sú škálované Vynikajúce, stupnice bez straty kvality

| DOM ACCESS | Nie, priama manipulácia s pixelmi Áno, jednotlivé prvky prístupné

| Úpravy | Prekreslenie na úpravu Upravte jednotlivé prvky

| výkon | Všeobecne rýchlejšie pre komplexné animácie Môže byť pomalšie pre komplexné animácie

| prístupnosť | Vyžaduje starostlivé kódovanie Ľahšie implementačné |

Kedy použiť ktoré:

* plátno: Použite pre komplexné animácie, hry, manipuláciu s obrázkami a keď je výkon kritický, najmä u mnohých pixelov.

* svg: Použite pre grafiku, ktorá je potrebné škálovať bez straty kvality, log, ilustrácií, diagramov a kedy potrebujete interagovať s jednotlivými grafickými prvkami. Preferujte tiež SVG pre lepšiu dostupnosť.

Vývojári často využívajú obe technológie v jednom projekte na využitie silných stránok každého z nich. Napríklad hra môže použiť plátno pre hlavnú animáciu pri používaní SVG pre prvky používateľského rozhrania.

• Predchádzajúca strana: Aké súbory môžu obsahovať bitmapy aj vektorovú grafiku? 
• Ďalšia strana: Schéma toku údajov pre Správcu stiahnutia?