• Artykuł

     

Kurs HTML5 – SVG – Porównanie z Canvas Udostępnij na: Facebook

Autor: Marcin Dembowski

Opublikowano: 2011-11-30

Obecne technologie internetowe pozwalają na wykorzystanie elementów multimedialnych (filmów, muzyki, zdjęć) do wzbogacania treści strony. W wielu przypadkach, aby treść mogła zostać wyświetlona, wykorzystuje się tak zwane rozszerzenia/wtyczki, które użytkownik musi przedtem zainstalować. Wraz z rozwojem HTML5, obecnie każda popularna przeglądarka pozwala na użycie wbudowanych, dodatkowych elementów – takich jak audio, video, canvas czy svg. Spośród nich, w interaktywnych stronach internetowych, często wykorzystywanymi elementami do wizualizacji są canvas oraz svg. W tym przypadku często programista ma dylemat nad poprawnym wyborem rozwiązania. W artykule tym postaramy się przyjrzeć poszczególnym elementom i wybrać najwłaściwszy spośród nich.

HTML5 Canvas oraz SVG pozwalają na tworzenie multimedialnej strony web, jednak sposób tworzenia i obsługi kompletnie się różni.

Definicja grafiki SVG oparta jest na języku XML. Dzięki niemu możesz tworzyć statyczne obrazy, jak i dynamiczne animacje. Dodatkowo możesz użyć Kaskadowych Arkuszy Stylów do ustalania kolorów dla poszczególnych elementów SVG. Z łatwością możesz utworzyć również plik graficzny w zewnętrznym edytorze i dołączyć plik bezpośrednio do strony web. Grafika tego typu może być z łatwością indeksowana i analizowana przez narzędzia tekstowe i wyszukiwarki. Przykładowy dokument HTML5, wyświetlający obrazek w SVG, został przedstawiony poniżej, a jego wynik w lewej części Rys. 1.

<!DOCTYPE html/>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="200px" height="200px">
        <circle cx="100" cy="100" r="70" stroke="black" fill="yellow" />
        <rect x="70" y="60" width="10" height="40" />
        <rect x="100" y="60" width="10" height="40" />
        <path d="M 85 140 C90 160 110 160 110 135" 
            fill="transparent" 
            stroke-width="5"
            stroke="black" />
        <path d="M 50 120 C80 160 150 120 140 110" 
            fill="transparent" 
            stroke-width="5"
            stroke="black" />
    </svg>
</body>
</html>

Rys. 1. Porównanie generowania grafiki przez SVG i CANVAS.

CANVAS z kolei tworzy obraz jedynie poprzez skrypt języka JavaScript i przeznaczony jest do wykonywania operacji bezpośrednio na pojedynczych pikselach obrazka. W rezultacie przeglądarka wyświetla obraz rastrowy. Można jednak w ten sposób badać zewnętrzny plik graficzny, piksel po pikselu, i w ten sposób utworzyć histogram zdjęcia, czy też modyfikować dołączony plik wideo i przed wyświetleniem zmienić poszczególne klatki filmu na odcienie szarości. Przykład grafiki zdefiniowanej przez element CANVAS, która wyświetla ten sam obrazek co poprzedni kod SVG, został przedstawiony poniżej. Wynik przedstawiony jest w prawej części Rys. 1.

<!DOCTYPE html/>
<html>
<head>
    <title>CANVAS</title>
</head>
<body>
    <canvas width="200px" height="200px" id="canvasSmile" />
    <script>
        var canvas = document.getElementById('canvasSmile');
        var context = canvas.getContext('2d');
        context.beginPath();
        context.lineWidth=1;
        context.arc(100, 100, 70, 0, Math.PI * 2);
        context.fillStyle="yellow";
        context.fill();
        context.stroke();
        context.beginPath();
        context.fillStyle="black";
        context.rect(100, 60, 10, 40);
        context.rect(70, 60, 10, 40);
        context.fill();
        context.beginPath();
        context.lineWidth=5;
        context.moveTo(50, 120);
        context.bezierCurveTo(80,160,150,120,140,110);
        context.moveTo(85,140);
        context.bezierCurveTo(90,160,110,160,110,135);
        context.stroke();
    </script>
</body>
</html>

SVG nie powinien być wykorzystywany w przypadku, gdy obrazek jest złożony i 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 (wykresy, fraktale) należy wyświetlać za pomocą elementu CANVAS – przeglądarka widzi w zbiorze DOM jedynie jeden element, natomiast za generowanie grafiki odpowiedzialny jest kod Java Script.

CANVAS nie powinien być wykorzystywany do tworzenia interfejsu użytkownika. Interfejs użytkownika musi być interaktywny, często także zmienia swój wygląd, np. zależnie od położenia kursora myszy. W przypadku, gdybyś chciał użyć do tego CANVAS, musiałbyś ponownie wywołać funkcję rysowania na całym płótnie lub analizować położenie kursora myszy nad narysowanym elementem na płótnie. SVG, w przeciwieństwie do CANVAS, pozwala na łatwe analizowanie interakcji pomiędzy kliknięciem użytkownika, a konkretnym elementem SVG, funkcjonalność tą zapewnia nam bezpośrednio przeglądarka.

SVG należy użyć w przypadku, gdy chcesz przedstawić dokument techniczny, plan budynku, fragment mapy. Uzyskasz dzięki temu możliwość powiększania obiektu bez utraty detali, gdyż jest to grafika wektorowa. Możliwość tą wykorzystuje się między innymi do rysowania ścieżek, pomiędzy dwoma punktami na mapie – np. do wyznaczania trasy pomiędzy dwoma miastami. Przykład takiego zastosowania można znaleźć m.in. na mapach Bing lub Google (przykład został przedstawiony na Rys. 2.).

Przykład zastosowania SVG w mapach Bing

Rys. 2. Przykład zastosowania SVG w mapach Bing.

SVG coraz częściej wykorzystuje się do tworzenia statycznych obrazków ozdobnych na stronie web. Obecnie coraz więcej komputerów wyposażonych jest w duże monitory, w których ustawiona jest inna, większa rozdzielczość ekranu. W rezultacie elementy ozdobne, w których wykorzystuje się obrazy rastrowe (.jpg, .png), będą nieprawidłowo wyświetlane (Rys. 3).

Rys. 3. Porównanie grafiki wektorowej (canvas) z grafiką rastrową(png).

Obie techniki można wykorzystać do tworzenia animacji. Animacje w SVG można utworzyć za pomocą języka Java Script lub wykorzystując dodatkowe znaczniki, umieszczone wewnątrz definicji obrazka. W CANVAS animacje możesz tworzyć jedynie za pomocą Java Script. W obu rozwiązaniach, tworzysz animacje za pomocą języka Java Script , wywołując cyklicznie funkcję odpowiedzialną za zmianę pozycji obiektów. W przypadku elementu CANVAS często musisz przerysować cały obrazek, aby zmienić położenie jednego elementu, natomiast w przypadku SVG musisz zmodyfikować jedynie animowany element.

Jak już zapewne zauważyłeś, CANVAS oraz SVG wzajemnie się uzupełniają. W niektórych przypadkach SVG zdecydowanie nadaje się do wykorzystania, a w niektórych lepiej sprawdza się CANVAS. Można także łączyć oba rozwiązania i SVG wykorzystać do detekcji kolizji obiektów, natomiast CANVAS do tworzenia dynamicznej i skomplikowanej grafiki. Taką hybrydę wykorzystuje się w grach, w których grafikę tworzy się w elemencie CANVAS, natomiast interakcję w SVG. Przed przystąpieniem do tworzenia danej strony, musisz się zastanowić, czy jednak możesz obejść się bez porównywanych wyżej rozwiązań i użyć zwykłych obiektów HTML DOM, takich jak div, table. Będziesz miał wtedy pewność, że strona będzie działać także w starszych przeglądarkach, czy też urządzeniach mobilnych.

Podsumowanie

Canvas powinno używać się w przypadku, gdy:

  • chcesz analizować, zmieniać dołączoną grafikę lub filmy i wyświetlać ją w zmienionej formie,
  • rysujesz, tworzysz złożone i wydajne grafiki rastrowe – histogramy, fraktale, wykresy.

SVG należy użyć w przypadku, gdy:

  • masz zamiar utworzyć grafikę skalowalną, wektorową, niezależną od rozdzielczości ekranu użytkownika,
  • chcesz tworzyć interaktywne interfejsy użytkownika z możliwością interakcji pomiędzy elementami i/lub użytkownikiem,
  • chcesz mieć łatwą kontrolę nad wyświetlanymi elementami składowymi obrazka,
  • wyświetlać wykresy danych (wykresy słupkowe, kolumnowe, kołowe).