Jaka jest różnica między formatem SVG i HTML5 Canvas?

Jakie są różnice między formatem SVG i HTML5 Canvas? Obaj wydają mi się robić to samo. Zasadniczo obaj rysują grafiki wektorowe za pomocą punktów współrzędnych.

czego mi brakuje? Jakie są główne różnice między SVG i HTML5 Canvas? Dlaczego powinienem wybrać jedną z nich?

Zobacz Wikipedię: http://en.wikipedia.org/wiki/Canvas_element

SVG to wcześniejszy standard rysowania kształtów w przeglądarkach. Jednak SVG jest na zasadniczo wyższym poziomie, ponieważ każdy narysowany kształt jest zapamiętywany jako obiekt na wykresie sceny lub modelu DOM, który jest następnie renderowany do mapy bitowej. Oznacza to, że jeśli atrybuty obiektu SVG zostaną zmienione, przeglądarka może automatycznie ponownie wyrenderować scenę.

W powyższym przykładzie po narysowaniu prostokąta system zapomina o tym, że został narysowany. Gdyby zmieniło się jego położenie, cała scena musiałaby zostać przerysowana, łącznie z obiektami, które mogłyby zostać zakryte przez prostokąt. Ale w równoważnym przypadku SVG można po prostu zmienić atrybuty pozycji prostokąta, a przeglądarka określi, jak go przemalować. Możliwe jest również pomalowanie płótna warstwami, a następnie odtworzenie określonych warstw.

Obrazy SVG są przedstawiane w formacie XML, a złożone sceny można tworzyć i utrzymywać za pomocą narzędzi do edycji XML.

Wykres sceny SVG umożliwia powiązanie obsługi zdarzeń z obiektami, więc prostokąt może odpowiadać na zdarzenie onClick. Aby uzyskać taką samą funkcjonalność z płótnem, należy ręcznie dopasować współrzędne kliknięcia myszą do współrzędnych narysowanego prostokąta, aby określić, czy został kliknięty.

Pod względem koncepcyjnym płótno jest protokołem niższego poziomu, na którym można zbudować SVG. [Potrzebne źródło] Jednak (normalnie) tak nie jest - są to niezależne standardy. Sytuacja jest skomplikowana, ponieważ istnieją biblioteki wykresów scen dla Canvas, a SVG ma pewne funkcje manipulacji mapami bitowymi.

AKTUALIZACJA: Używam SVG ze względu na możliwości języka znaczników - może być przetwarzany przez XSLT i może przechowywać inne znaczniki w swoich węzłach. Podobnie mogę trzymać SVG w moim znaczniku (chemia). To pozwala mi manipulować atrybutami SVG (np. Renderowaniem) za pomocą kombinacji znaczników. Może to być możliwe w Canvas, ale podejrzewam, że jest to dużo trudniejsze.

SVG jest jak program do rysowania. Rysunek jest określony jako instrukcja rysowania dla każdego kształtu i można zmienić dowolną część dowolnego kształtu. Rysunki są zorientowane na kształt.

Płótno jest jak program do malowania. Gdy piksele dotrą do ekranu, to jest twój rysunek. Nie można zmieniać kształtów, chyba że zastępując je innymi pikselami. Obrazy są zorientowane na piksele.

Możliwość zmiany rysunków jest bardzo ważna w przypadku niektórych programów; np. aplikacje do kreślenia, narzędzia do tworzenia diagramów itp. Tak więc SVG ma tutaj przewagę.

Możliwość kontrolowania pojedynczych pikseli jest ważna w przypadku niektórych programów artystycznych.

Uzyskanie doskonałej wydajności animacji do manipulacji przez użytkownika za pomocą przeciągania myszą jest łatwiejsze dzięki Canvas niż SVG.

Pojedynczy piksel na ekranie komputera często zużywa 4 bajty informacji, a ekran komputera zajmuje obecnie kilka megabajtów. Dlatego Canvas może być niewygodne, jeśli chcesz pozwolić użytkownikowi edytować obraz, a następnie przesłać go ponownie.

Natomiast rysowanie kilku kształtów obejmujących cały ekran za pomocą SVG zajmuje kilka bajtów, pobiera się szybko i można je łatwo załadować ponownie, z tymi samymi zaletami w tym kierunku, jak wtedy, gdy spada w innym kierunku. Więc SVG może być szybsze niż Canvas.

Google wdrożył Mapy Google z SVG. Dzięki temu aplikacja internetowa ma błyskawiczną wydajność i płynne przewijanie.

Podsumowanie wysokiego poziomu Canvas vs SVG

Brezentowy

1. W oparciu o piksele (dynamiczne .png)
2. Pojedynczy element HTML. (Sprawdź element w narzędziu deweloperskim. Możesz zobaczyć tylko tag canvas)
3. Modyfikowane tylko za pomocą skryptu
4. Model zdarzenia / interakcja użytkownika jest szczegółowa (x, y)
5. Wydajność jest lepsza przy mniejszej powierzchni, większej liczbie obiektów (> 10k) lub obu

SVG

1. Na podstawie kształtu
2. Wiele elementów graficznych, które stają się częścią DOM
3. Zmodyfikowany przez skrypt i CSS
4. Model zdarzenia / interakcja użytkownika jest wyodrębniony (prostokąt, ścieżka)
5. Wydajność jest lepsza przy mniejszej liczbie obiektów (<10k), większej powierzchni lub obu

Aby poznać szczegółową różnicę, przeczytaj http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Istnieje różnica w tym, czym są i co robią dla Ciebie.

• SVG to format dokumentu dla skalowalnej grafiki wektorowej.
• Canvas to javascript API do rysowania grafiki wektorowej na bitmapie o określonym rozmiarze.

Aby trochę rozwinąć, na temat formatu a API:

Dzięki svg możesz przeglądać, zapisywać i edytować plik w wielu różnych narzędziach. W przypadku płótna po prostu rysujesz i nic nie zostaje zachowane z tego, co właśnie zrobiłeś, poza wynikowym obrazem na ekranie. Możesz animować oba, SVG obsługuje przerysowywanie za Ciebie, po prostu patrząc na określone elementy i atrybuty, podczas gdy w przypadku płótna musisz samodzielnie przerysować każdą klatkę za pomocą interfejsu API. Możesz skalować oba, ale SVG robi to automatycznie, podczas gdy w przypadku płótna ponownie musisz ponownie wydać polecenia rysowania dla danego rozmiaru.

Dwie rzeczy, które najbardziej uderzyły mnie w przypadku formatu SVG i Canvas, to:

Możliwość korzystania z Canvas bez DOM, gdzie SVG w dużym stopniu zależy od DOM, a wraz ze wzrostem złożoności wydajność spada. Jak w projektowaniu gier.

Zaletą korzystania z SVG byłoby to, że rozdzielczość pozostaje taka sama na wszystkich platformach, czego brakuje w Canvas.

Wiele więcej szczegółów znajduje się na tej stronie. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

To absolutnie zależy od twoich potrzeb / wymagań.

• Jeśli chcesz po prostu pokazać obraz / wykres na ekranie, zalecanym podejściem jest płótno. (Przykład to PNG, GIF, BMP itp.)

• Jeśli chcesz rozszerzyć funkcje swojej grafiki, na przykład jeśli najedziesz kursorem myszy na wykres, chcesz powiększyć określony obszar bez pogorszenia jakości wyświetlania, wybierz SVG. (Dobrym przykładem są pliki AutoCAD, Visio, GIS).

Jeśli chcesz zbudować narzędzie do tworzenia dynamicznych diagramów przepływu ze złączem kształtu, lepiej wybrać SVG niż CANVAS.

• Wraz ze wzrostem rozmiaru ekranu płótno zaczyna się pogarszać, ponieważ trzeba narysować więcej pikseli.

• Kiedy liczba obiektów na ekranie rośnie, SVG zaczyna się
  degradować, ponieważ ciągle dodajemy je do DOM.

Zobacz także: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

SVG

W oparciu o przypadek użycia SVG jest używany do logo, wykresów, ponieważ jego grafikę wektorową rysujesz i zapomniałeś o tym. Gdy port widoku zmieni się, np. Zmiana rozmiaru (lub powiększenie), dostosuje się i nie ma potrzeby przerysowywania.

Brezentowy

Płótno to bitmapa (lub raster), którą tworzy się poprzez malowanie pikseli na ekranie. Służy do tworzenia gier lub grafiki ( https://www.chromeexperiments.com/webgl ) w danym obszarze maluje piksel i zmienia go przerysowując go na inny. Ponieważ jest to typ rastrowy, musimy całkowicie przerysować, gdy zmienia się port widoku.

Odniesienie

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html

SVGjest specyfikacją rysunku, taką jak format pliku. SVG to dokument. Możesz wymieniać pliki SVG, takie jak pliki HTML. A dodatkowo, ponieważ elementy SVG i elementy HTML współdzielą to samo DOM API, możliwe jest użycie JavaScript do wygenerowania SVG DOM w taki sam sposób, w jaki jest możliwe utworzenie HTML DOM. Ale nie potrzebujesz JavaScript do wygenerowania pliku SVG. Do napisania SVG wystarczy prosty edytor tekstu. Ale potrzebujesz przynajmniej kalkulatora, aby obliczyć współrzędne kształtów na rysunku.

CANVASto tylko obszar rysowania. Do wygenerowania zawartości płótna konieczne jest użycie JavaScript. Nie możesz wymienić płótna. To nie jest dokument. A elementy płótna nie są częścią drzewa DOM. Nie możesz używać DOM API do manipulowania zawartością płótna. Zamiast tego musisz użyć dedykowanego interfejsu API kanwy, aby narysować kształty na kanwie.

Zaletą a SVGjest to, że można wymienić rysunek jako dokument. Zaletą CANVASjest to, że ma mniej gadatliwy interfejs API JavaScript do generowania treści.

Oto przykład, który pokazuje, że można osiągnąć podobne rezultaty, ale sposób, w jaki to robi się w JavaScript jest zupełnie inny.

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();

svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}

<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

Jak widać wynik jest prawie taki sam, ale kod JavaScript jest zupełnie inny.

SVG jest tworzony przy użyciu API DOM createElement, setAttributei appendChild. Wszystkie grafiki znajdują się w ciągach atrybutów. SVG ma mocniejsze prymitywy. Na przykład CANVAS nie ma nic równoważnego ścieżce łuku SVG. Przykład CANVAS próbuje emulować łuk SVG z krzywą Beziera. W SVG możesz ponownie wykorzystać elementy, aby je przekształcić. W CANVAS nie można ponownie wykorzystać elementów. Zamiast tego musisz napisać funkcję JavaScript, aby wywołać ją dwukrotnie. SVG maviewBox który pozwala na użycie znormalizowanych współrzędnych, co upraszcza obroty. W CANVAS musisz samodzielnie obliczyć współrzędne na podstawieclientWidth iclientHeight. I możesz stylizować wszystkie elementy SVG za pomocą CSS. W CANVAS nie można niczego stylizować za pomocą CSS. Ponieważ SVG jest DOM, możesz przypisać programy obsługi zdarzeń do wszystkich elementów SVG. Elementy w CANVAS nie mają DOM ani programów obsługi zdarzeń DOM.

Ale z drugiej strony kod CANVAS jest znacznie łatwiejszy do odczytania. Nie musisz przejmować się przestrzeniami nazw XML. Możesz bezpośrednio wywoływać funkcje graficzne, ponieważ nie musisz budować DOM.

Lekcja jest jasna: jeśli chcesz szybko narysować jakąś grafikę, użyj CANVAS. Jeśli chcesz udostępnić grafikę, lubisz stylizować ją za pomocą CSS lub chcesz użyć programów obsługi zdarzeń DOM w swojej grafice, stwórz SVG.

dodanie do powyższych punktów:

SVG jest lekki do przesyłania przez Internet w porównaniu z JPEG, GIF itp., A także bardzo skaluje się przy zmianie rozmiaru bez utraty jakości.

SVG
Jest oparty na modelu obiektowym.
Nadaje się do używania dużych powierzchni renderowania.
SVG zapewnia wsparcie dla programów obsługi zdarzeń.
Modyfikacja jest dozwolona za pomocą skryptu i CSS.
SVG ma lepszą skalowalność
SVG jest oparty na wektorach (składa się z kształtów).
Format SVG nie nadaje się do grafiki w grach. SVG nie zależy od rozdzielczości.
SVG jest przystosowany do animacji API.
SVG nadaje się do drukowania w wysokiej jakości i dowolnej rozdzielczości.

Elementy płótna

Jest oparty na pikselach.

Nadaje się do stosowania małego renderowania

Kanwa nie zapewnia możliwości odwołania się do programów obsługi zdarzeń.

Modyfikacja jest dozwolona tylko za pomocą skryptu.

Canvas ma słabą skalowalność.

Canvas jest oparty na rastrze (składa się z piksela).

Canvas nadaje się do grafiki w grach.

Płótno jest całkowicie zależne od rozdzielczości.

Canvas nie ma żadnego interfejsu API do animacji.

Płótno nie nadaje się do drukowania w wysokiej jakości i wysokiej rozdzielczości.