HTML5 Canvas vs. SVG

Canvas i SVG pozwalają tworzyć grafiki w przeglądarce, ale są z根本上是不同的.

SVG

SVG jest językiem opisanym za pomocą XML do opisywania 2D grafiki.

SVG oparty jest na XML, co oznacza, że każdy element w DOM SVG jest dostępny. Możesz przypisać event handler do elementu.

W SVG, każdy rysowany obiekt jest traktowany jako obiekt. Jeśli zmienią się atrybuty obiektu SVG, przeglądarka może automatycznie ponownie wyświetlić grafikę.

Canvas

Canvas rysuje 2D grafiki za pomocą JavaScript.

Canvas jest renderowany na poziomie pikseli.

W canvas, po zakończeniu rysowania grafiki, nie jest ona już monitorowana przez przeglądarkę. Jeśli zmieni się jego pozycja, cała scena musi być ponownie rysowana, w tym wszystkie obiekty, które mogą być zakryte przez grafikę.

Porównanie Canvas i SVG

Poniższa tabela przedstawia niektóre różnice między canvas a SVG.

Canvas

  • Zależne od rozdzielczości
  • Nie wspiera przetwarzania zdarzeń
  • Słaba zdolność renderowania tekstu
  • Można zapisać wynikowe obrazy w formatach .png lub .jpg
  • Najbardziej odpowiednie do gier graficznych o dużej liczbie obiektów, które są często ponownie rysowane

SVG

  • Niezależne od rozdzielczości
  • Wspiera przetwarzanie zdarzeń
  • Najbardziej odpowiednie do aplikacji z dużymi obszarami renderowania, takich jak Google Maps
  • Wysoki poziom złożoności może spowolnić prędkość renderowania (wszystkie aplikacje nadużywające DOM są szybkie)
  • Nieodpowiednie do aplikacji gier