Canvas czy SVG? O wykresach słów kilka

Autor: Krzysztof Ścira

SVG dla interaktywności i dostępności, Canvas dla wydajności i dużych zbiorów danych. Porównanie modeli renderowania, bibliotek i podejścia hybrydowego do wykresów w aplikacjach webowych.

Porównanie wykresu w formacie SVG i Canvas – różnice w renderowaniu i strukturze kodu — Ilustracja pokazująca różnice między SVG a Canvas na przykładzie tego samego wykresu – porównanie podejść do renderowania danych w przeglądarce.

Dwa sposoby rysowania w przeglądarce — i zupełnie inna filozofia

Wykresy, dashboardy, wizualizacje danych — to elementy, które pojawiają się w coraz większej liczbie aplikacji webowych. Od paneli zarządzania po raporty finansowe, od monitoringu IoT po edukację. Za każdym razem staje to samo pytanie: rysować w SVG czy na Canvas? Odpowiedź zależy od tego, ile danych wyświetlasz, jak bardzo interfejs musi być interaktywny i czy zależy Ci na dostępności.

SVG — każdy punkt to element DOM

SVG to format wektorowy, w którym każdy kształt (<line>, <circle>, <rect>, <path>) jest osobnym węzłem w drzewie DOM przeglądarki. To oznacza, że można go stylować przez CSS, obsługiwać zdarzenia JavaScript na pojedynczym elemencie i — co istotne — opisywać go dla czytników ekranu.

Kiedy SVG działa dobrze

Wykresy z ograniczoną liczbą punktów — słupkowe, kołowe, liniowe z kilkudziesięcioma do kilkuset punktami. Przeglądarka zarządza DOM bez problemu.
Interaktywne wykresy — hover na słupku pokazuje tooltip, kliknięcie otwiera szczegóły. W SVG to naturalny model: każdy słupek to <rect> z onclick.
Infografiki i schematy — gdzie liczy się czytelność tekstu przy dowolnym powiększeniu (wektory skalują się bez utraty jakości).
Dostępność — elementy SVG można oznaczyć atrybutami role i aria-label. Czytnik ekranu może odczytać „słupek: sprzedaż w styczniu, wartość 142 000 zł".

Kiedy SVG się dławi

Przy kilku tysiącach elementów DOM przeglądarka zaczyna spowalniać — zarówno rendering, jak i obsługa zdarzeń. Wykres giełdowy z 50 000 świeczek w SVG zamrozi przeglądarkę. To nie ograniczenie formatu, ale ograniczenie modelu DOM — każdy element to obiekt w pamięci z pełną obsługą zdarzeń i stylów.

Canvas — jeden piksel, żadnych elementów

Element <canvas> to prostokąt, na którym JavaScript rysuje piksele imperatywnie — instrukcja po instrukcji (ctx.fillRect(), ctx.arc(), ctx.stroke()). Wynik to bitmapa. Przeglądarka nie wie, co jest narysowane — nie ma drzewa DOM, nie ma elementów, nie ma zdarzeń na pojedynczych kształtach.

Kiedy Canvas wygrywa

Duże zbiory danych — wykresy telemetryczne, giełdowe, sensoryczne z tysiącami do milionów punktów. Canvas renderuje je jako piksele, bez obciążania DOM.
Wizualizacje czasu rzeczywistego — monitorowanie serwerów, IoT, linie produkcyjne. Canvas przerysowuje klatkę szybciej niż przeglądarka przeliczy layout SVG.
Efekty graficzne — gradienty, cienie, filtry, blending modes, animacje z przezroczystością. Canvas API daje większą swobodę niż CSS na SVG.
Mapy cieplne i scatter ploty — gdy renderujesz dziesiątki tysięcy punktów jako kolorowe piksele.

Czego Canvas nie da

Interakcje z pojedynczymi elementami trzeba programować ręcznie — obliczać, czy kursor myszy trafia w narysowany kształt (hit testing). Tekst na Canvas to piksele — nie da się go zaznaczyć, skopiować ani odczytać czytnikiem ekranu bez dodatkowej warstwy ARIA. To poważne ograniczenie dla dostępności cyfrowej.

Porównanie w tabeli

SVG vs Canvas — porównanie w kontekście wykresów
Kryterium	SVG	Canvas
Model renderowania	Wektorowy, deklaratywny (DOM)	Bitmapowy, imperatywny (piksele)
Stylowanie CSS	Tak (fill, stroke, :hover, animacje)	Nie — rysowanie wyłącznie przez JS
Interakcje z elementami	Natywne (eventy DOM na kształtach)	Ręczny hit testing
Wydajność przy dużych zbiorach	Spada powyżej ~1000 elementów	Stabilna do setek tysięcy punktów
Dostępność (a11y)	Dobra (role, aria-label na elementach)	Słaba (wymaga dodatkowej warstwy)
SEO	Tekst w SVG jest indeksowalny	Bitmapa — niewidoczna dla crawlerów
Skalowanie	Wektorowe (ostry na każdym DPI)	Pikselowe (wymaga obsługi devicePixelRatio)

Biblioteki — nie trzeba pisać od zera

W praktyce rzadko piszemy wykresy od zera na surowym SVG czy Canvas API. Biblioteki abstrahują renderowanie i dają API do danych, osi, tooltipów i animacji:

Biblioteki oparte na SVG

D3.js — najbardziej elastyczna biblioteka do wizualizacji danych. Daje pełną kontrolę nad każdym elementem SVG, ale wymaga znajomości D3 API.
Recharts — wrapper na D3 dla Reacta. Deklaratywne API, dobre dla dashboardów.
ApexCharts — obsługuje SVG i Canvas (przełączalnie). Bogaty zestaw wykresów, dobre API.

Biblioteki oparte na Canvas

Chart.js — najpopularniejsza biblioteka do prostych i średnio zaawansowanych wykresów. Renderuje na Canvas, łatwa do wdrożenia.
ECharts (Apache) — obsługuje Canvas i SVG. Silnik w WebGL do dużych zbiorów danych. Dobre wsparcie dla map i wykresów 3D.
uPlot — lekka (ok. 45 KB) biblioteka Canvas zoptymalizowana pod wydajność. Sprawdza się przy danych telemetrycznych i monitoringu.

Podejście hybrydowe — Canvas dla danych, SVG dla interfejsu

W naszych projektach stosujemy czasem podejście hybrydowe: dane (tysiące punktów, linie, obszary) rysujemy na Canvas, a elementy interfejsowe (osie, etykiety, tooltipy, legendy) renderujemy w SVG lub HTML nałożonym na Canvas. Dzięki temu zachowujemy wydajność renderowania i dostępność warstwy UI.

ECharts i ApexCharts wspierają to natywnie. W D3 można to zbudować samodzielnie, łącząc <canvas> z nakładką <svg> w tym samym kontenerze.

Co wybrać

Mniej niż 500 punktów, interaktywność, dostępność → SVG (D3, Recharts, ApexCharts).
Tysiące punktów, czas rzeczywisty, monitoring → Canvas (Chart.js, ECharts, uPlot).
Oba scenariusze w jednej aplikacji → biblioteka z podwójnym renderem (ApexCharts, ECharts) lub podejście hybrydowe.

Projektujesz dashboard, panel analityczny albo system dedykowany z wizualizacją danych? Dobór technologii wykresów to decyzja, którą warto podjąć świadomie. Porozmawiajmy o tym, co będzie najlepsze dla Twojego projektu.

Źródła

MDN Web Docs — SVG — dokumentacja formatu SVG i jego obsługi w przeglądarkach.
MDN Web Docs — Canvas API — dokumentacja API do rysowania na elemencie <canvas>.
D3.js — oficjalna strona biblioteki do wizualizacji danych.
Chart.js — oficjalna strona popularnej biblioteki wykresów Canvas.
Apache ECharts — biblioteka wykresów z obsługą Canvas, SVG i WebGL.