Dlaczego dominuje canvas nad svg?

[Marek S]

Witam,

Gdy patrzę na strony z jakimiś grami, rysowaniem czegoś tam i generalnie
używa się canvas, sporadycznie SVG. Zapewne czegoś nie wiem więc
wytłumaczcie mi to. Poniżej moje przemyślenia, być może fałszywe.

Canvas nie jest w żaden sposób interaktywne z tym co zostało narysowane
na nim. Np. gdy narysujemy 2 prostokąty, to nie wiadomo, który z nich
został kliknięty. W SVG każdy obiekt ma swoją obsługę zdarzeń (podobną
do elementów HTML) więc może oprogramowanie interakcji z użytkownikiem
jest banalne.

W canvas aby wykonać przemieszczenie jakiegokolwiek obiektu trzeba
narysować wszystko od początku plus przemieszczony obiekt. W SVG możemy
dowolnie poruszać obiektem bez odrysowywania czegokolwiek.

Canvas to bitmapa więc nie jest skalowalna. SVG to wektor.

Wydaje mi się, że canvas jest fajne gdy chcemy narysować słupki
prezentujące dane np. z Excela, choć to samo i w SVG można osiągnąć bez
przyrostu nakładu pracy.

Nawet narzędzie Adobe Animation, które miało zstąpić Flasha bazuje na
canvas. I to pomimo bliźniaczego podobieństwa technologii Flash i SVG,
Adobe zdecydował się na bazowanie na nieinterakcyjnym canvas.

Czy z tego wynika, że SVG jest umierającą technologią? Niby W3C po wielu
latach ignorowania technologii SVG pierdnęło w lipcu 2018 coś na temat
wersji 2.0 lecz wniosek stąd płynący jest taki, że jest to technologia
a'la kula u nogi. W przeglądarkach podstawowa funkcja drag and drop
supportowana jest tylko przez Edge. To też dowodzi niszowości SVG.
Dlaczego tak?

[Roman Tyczka]

Post by Marek S
Gdy patrzę na strony z jakimiś grami, rysowaniem czegoś tam i generalnie
używa się canvas, sporadycznie SVG. Zapewne czegoś nie wiem więc
wytłumaczcie mi to. Poniżej moje przemyślenia, być może fałszywe.

[..]

Post by Marek S
Dlaczego tak?

Nie wiem, ale się wypowiem :-P
Pewnie chodzi o wydajność.

[Marek S]

Post by Roman Tyczka
Nie wiem, ale się wypowiem :-P
Pewnie chodzi o wydajność.

Nie bardzo sobie ją wyobrażam. Wyobraźmy sobie, że narysowałem 100
prostokątów na canvas i jeden z nich chcę przesunąć o 1px. No to wtedy
kasuję cały canvas i odnowa rysuję wszystkie 100 prostokątów z jednym
przesuniętym. A teraz animacja tego prostokąta 25 klatek na sekundę...
Nie ma jak tego sprzętowo przyspieszać

W SVG masz normalną akcelerację sprzętową obiektów.

[Roman Tyczka]

Post by Marek S

Post by Roman Tyczka
Nie wiem, ale się wypowiem :-P
Pewnie chodzi o wydajność.

Nie bardzo sobie ją wyobrażam. Wyobraźmy sobie, że narysowałem 100
prostokątów na canvas i jeden z nich chcę przesunąć o 1px. No to wtedy
kasuję cały canvas i odnowa rysuję wszystkie 100 prostokątów z jednym
przesuniętym.

Dlaczego niby tak? W Windows GUI jest też rysowane na canvasie, też
bitmapowo a nie wektorami. Gdy masz takie 100 prostokątów narysowane i
chcesz jeden przesunąć to przerysowujesz tylko obszar na którym jest ten
prostokąt, a nie cały canvas.

Post by Marek S
A teraz animacja tego prostokąta 25 klatek na sekundę...
Nie ma jak tego sprzętowo przyspieszać
W SVG masz normalną akcelerację sprzętową obiektów.

I na czym polega akceleracja SVG?

[Marek S]

Post by Roman Tyczka
Dlaczego niby tak? W Windows GUI jest też rysowane na canvasie, też
bitmapowo a nie wektorami. Gdy masz takie 100 prostokątów narysowane i
chcesz jeden przesunąć to przerysowujesz tylko obszar na którym jest ten
prostokąt, a nie cały canvas.

Jasne, lecz teraz bardziej realistyczny schemat działania. Trudno
przewidzieć jaki fragment bitmapy będzie modyfikowany. Jest jakaś gra,
leci chmurka, użytkownik oddziałuje na jakieś elementy tego obrazu,
słowem: dzieje się. Jak teraz decydować jakie obszary cache'ować i
odrysowywać? Zadanie wydaje się niewykonalne. W canvas masz funkcje save
i restore. Musisz zadecydować co jest statyczne a co nie. W dodatku
ginie w tym informacja o z-order więc cacheowanie czegokolwiek jest
pozbawione sensu w bardziej złożonych sytuacjach niż np. rysowanie wykresu.

Post by Roman Tyczka

Post by Marek S
A teraz animacja tego prostokąta 25 klatek na sekundę...
Nie ma jak tego sprzętowo przyspieszać
W SVG masz normalną akcelerację sprzętową obiektów.

I na czym polega akceleracja SVG?

Np. na użyciu "transform" i pochodnych.

http://serversideguy.com/2018/04/30/can-svg-animations-use-less-cpu/

Mam głównie na myśli nie dbanie o redraw fragmentów grafiki lecz o
całość animacji, w której trudno przewidzieć co się rusza a co jest
statyczne.

[s***@gmail.com]

Post by Marek S
Dlaczego tak?

Wiele "dobrze rokujących" technologii zostało zaoranych tylko z tego względu, że było realnymi odpowiednikami technologii kosmitów (tych złych, czyli Ufoli). Tak było z Amigą, Xhtml, MathMl, C++ i Qt (jeszcze żyje... - ciekawe jak długo). Generalnie jest tak, że jak coś jest "dobre" to nie wystarczy i trzeba wpakować w upowszechnienie standardu drugie tyle wysiłku (a może jeszcze więcej) niż wymagało opracowanie danej technologii.