Dlaczego nie canvas?

Canvas? Po co to komu?

 Canvas to powierzchnia prostokątna, którą możesz umieścić w HTML np:

<canvas id="rysunek" width="400" height="200"></canvas> 

To w niej będziesz tworzył grafikę i wszystkie manipulacje za pomocą javascript.
Jednak w odróżnieniu od SVG, który operuje na wektorach, canvas operuje na grafice rastrowej (pikselach). Szczególny przydatny  do tworzenia ruchomych wykresów, animacji, no i gier.
 Możliwości są naprawdę duże, od rysowania na nim statycznych kształtów do animowanych. Tekst, obrazy, zdjęcia i filmy, muzyka - wszystko to można umieścić w canvas i manipulować tym.
W porównaniu do SVG (które jest częścią DOM), canvas bardzo dobrze radzi sobie z dużą ilością obiektów. Jeżeli masz do obsłużenia parę tysięcy węzłów (ang. node), lepiej zrezygnuj z SVG i działaj w canvas.

 Minusy canvas

• Podobnie jak grafika rastrowa, nie radzi sobie ze skanowaniem.  
• Nie jest dostępna. Strona napisana tylko w canvas nie będzie słabo indeksowana przez boty wyszukiwarek, ponieważ tekst umieszczony w nich to tylko zlepek pikseli. 
• Czytniki ekranowe nie są w stanie przeczytać zawartości umieszczonej w canvas.

 Canvas vs  SVG. Porównanie kodu

Przykłady linii prostej i prostokąta w SVG i canvas.
Linia w canvas:

var linia = document.getElementById('rysunek'),
context = linia.getContext('2d'); 

context.beginPath();
context.moveTo(0, 0);
context.lineTo(400, 200);
context.strokeStyle="black";

context.stroke();

Linia w SVG:

<svg width="120" height="120" viewBox="0 0 400 200">
<line x1="0" y1="0" x2="400" y2="200" stroke="black"/>

</svg> 

Prostokąt w canvas,

var prostokat = document.getElementById('rysunek'),
context = prostokat.getContext('2d'); 

context.fillRect(10, 10, 300, 100); 

oraz w SVG:

<svg width="120" height="120" viewBox="0 0 400 200">

<rect x="10" y="10" width="300" height="100"/>

</svg>  

Może nie widać tego na przykładzie prostokąta, ale narzut kodu jest większy w canvas.

Pora na odpowiedź na pytanie zadane w temacie. Chociaż canvas znacznie lepiej nadaje się do tworzenia gier, wybrałem SVG. Powód jest osobisty. Moim celem jest tworzenie stron internetowych, a nie gier. Strony coraz częściej korzystają z dobrodziejstw SVG, dlatego też chcę nauczyć się operować na SVG w JS. W moim przypadku gdzie gra będzie miała najwyżej 100 węzłów, nie odczuję spadku szybkości działania i zwieszania się. Mam przynajmniej taką nadzieję.