Canvas vs. SVG vo svete mapových webov
Krátke porovnanie dvoch najrozšírenejších technológií pre vykresľovanie vektorov vo webových stránkach. Ktorú a kedy je vhodné použiť?
Canvas vs. SVG vo svete mapových webov
Vektorový formát SVG je tu s nami už od roku 1999 a za tú dobu sa stihol stabilne udomácniť vo svete pokročilej webovej grafiky. Vďaka jeho XML charakteru sa ľahko integruje do HTML kódu, pričom s jeho grafickými prvkami možno pracovať takmer rovnako ako s HTML elementami.
Canvas začal byť podporovaný v prehliadačoch od roku 2005 a štandardom sa stal v špecifikácii HTML5. Disponuje využívaním hardwarovej akcelerácie a to mu otvára dvere hlavne pri animáciách, 3D zobrazeniach a výpočtovo náročných grafických operáciách.
Ako a ktorý prístup je lepší pre vykresľovanie máp? Odpoveď znie ako vždy – záleží od situácie. Vektorová grafika v mapách je využívaná pri kreslení bodov, čiar a polygónov. Zápas medzi Canvasom a SVG bude čo sa týka výkonu určite vyrovnaný, ak kreslíme malý počet vektorov. Canvas navyše dokáže pri zoomovaní vytvárať pekný efekt približovania, takže užívateľ ani nemá pocit, že prechádza zoom levelmi. Vykresľovanie canvasom pôsobí celkovo uhladenejším dojmom.
Na prekvapivý rozdiel ale narazíme pri veľkom množstve vektorov (tisíce). Takáto situácia nastáva napr. pri vykresľovaní parciel v rámci celej obce. Ak chceme použiť efekt zvýraznenia parcely pod kurzorom, reakcia SVG je okamžitá, ale canvas za kurzorom výrazne „mešká“ a efekt stráca svoje opodstatnenie. Dôvodom je, že vektory canvasu existujú len v pamäti prehliadača a každá požiadavka na zmenu ich vizuálu si vyžaduje vyhľadanie prvku, zmenu jeho parametrov a prekreslenie celého canvasu. Naopak pri SVG sú vektory priamou súčasťou štruktúry webstránky a proces prekresľovania prebieha len v rámci konkrétneho prvku.
Ak teda neplánujete zobrazovať v mape veľké množstvo dát a vsádzate skôr na ladnosť pohybov, použite canvas. Ak ale potrebujete rýchle reakcie pri zložitých geometriách, SVG je aj napriek svojmu veku stále v hre!