Słyszysz SVG. Słyszysz canvas. W głowie świta Ci lampka „grafika!”. Wiesz coś o elementach HTML <svg> oraz <canvas>. I co jeszcze wiesz? Zróbmy sobie krótką notatkę na temat SVG i canvas. Krótko, zwięźle i na temat.
Zacznijmy od tego, że…
Czym jest SVG?
To format danych. Konkretnie danych graficznych. Konkretnie grafiki wektorowej. Wykorzystuje język XML. Pozwala nam zakodować grafikę i osadzić ją w HTMLu. W ową grafikę możemy ingerować za pomocą CSSa albo JSa. HTML dostarcza element <svg>, który może być kontenerem grafiki SVG.
Przykładowy kod (źródło):
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 600">
<desc>Red rectangle shape</desc>
<rect x="10" y="10" width="100" height="100" fill="#c00" />
</svg>Czym jest canvas?
To element języka HTML5. Wraz tagiem <canvas> tworzysz płótno, na którym możesz rysować grafikę za pomocą JSa.
Kod (źródło), który pokazuje dokładnie ten sam czerwony kwadrat, co powyższy przykład SVG.
HTML:
<canvas id="myCanvas" width="800" height="800"></canvas>JavaScript:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);Co je łączy?
Oba rozwiązania służą do tworzenia zarówno statycznych obrazów, jak i dynamiczne animacji.
Eeeee… coś jeszcze?
A co je różni?
Przede wszystkim SVG to format danych graficznych. Choć istnieje też kontener dla grafik SVG – element <svg>. W języku potocznym jednak SVG to wszystkie grafiki w formacie SVG, natomiast canvas to wszelakie grafiki stworzone w elemencie <canvas>.
Każdy laik jest w stanie stworzyć grafikę SVG przy użyciu szeregu internetowych narzędzi. Z kolei canvas to grafika, którą się programuje. A to już ciutek wyższa poprzeczka w obsłudze.
SVG służy do zapisu grafiki wektorowej – grafiki są wysokiej jakości, nie tracą jej podczas skalowania. Natomiast canvas przeznaczony jest do wykonywania operacji bezpośrednio na pojedynczych pikselach obrazka, co oznacza, że przeglądarka wyświetla obraz rastrowy.
Warto też wiedzieć, że każdy obiekt narysowany na płótnie canvas staje się częścią jednej bitmapy jako zbioru pikseli. Stąd, w odróżnieniu od SVG, canvas nie wspiera event handlers. Możesz dodać zdarzenie, ale do całego płótna, ale nie do konkretnej jego części.
Kolejną podstawową różnicą jest sprawa DOMu. Element <canvas> nie posiada wewnętrznego DOM. Tu obrazek się rysuje według instrukcji JS, piksel po pikselu i jego historia się kończy. Natomiast w SVG każda grafika posiada swój wewnętrzny DOM. Każdy nowy obiekt (linia, kwadrat, trójkąt…) to nowa gałązka w drzewie. Jak się na pewno domyślasz, ma to ogromne znaczenie wydajnościowe. Canvas jest szybsze, jeśli musisz wyrenderować wiele elementów. Choć jednocześnie…
…Canvas będzie wolniejszym rozwiązaniem, jeśli wielkość płótna jest spora. Dla przykładu: zmieniając pozycję, czy wygląd fragmentu canvas, musisz przerenderować od nowa całe płótno. Dla dużych grafik lepiej sprawdzi się SVG.
Jeśli zależy Ci na dostępności strony, nie używaj canvas. To, co jest produkowane na płótnie, to tylko zbiór pikseli, który nie niesie wartościowej treści dla wszelakich czytników.
Zastosowanie
Skorzystaj z SVG, kiedy chcesz tworzyć interaktywne interfejsy użytkownika. Ten format pozwala na łatwe analizowanie interakcji pomiędzy kliknięciem użytkownika, a konkretnym elementem. SVG nie powinien być wykorzystywany w przypadku, gdy obrazek jest złożony, składa się z kilku tysięcy elementów. Przeglądarka widzi SVG jako zbiór elementów DOM. Każdy element musi zostać przeanalizowany przez przeglądarkę, przez co wyświetlanie może być nieefektywne.
Skomplikowane grafiki rastrowe (histogramy, wykresy, fraktale) należy wyświetlać za pomocą elementu canvas – przeglądarka widzi w zbiorze DOM jedynie jeden element. Canvas to też dobry wybór, kiedy chcesz analizować, zmieniać grafikę lub filmy. Canvas jest idealne dla gier z zaawansowaną grafiką.
SVG vs. canvas?
Czasami mówi się, że canvas to alternatywa SVG i na odwrót. Jednak czy nie jest inaczej… Czy czasem canvas nie jest uzupełnieniem SVG i na odwrót? W końcu oba rozwiązania można ze sobą łączyć. A jeśli już chcesz bazować na jednej z tych technologii, należy bardzo dokładnie przeanalizować ich wady i zalety dla Twojego, konkretnego przypadku.
Chcecie wiedzieć więcej w tym temacie? Polecam kliknąć TUTAJ.
