Názory k článku
SVG, nebo Canvas? Vyberte si

U animovaného kruhu - canvas verze je špatný link na demo správně je to http://devfiles­.myopera.com/ar­ticles/1161/cir­cle-canvas.html

http://dev.ope­ra.com/articles/vi­ew/svg-or-canvas-choosing-between-the-two/circle-canvas.html

Koukám, že autor článku odkaz už "opravil". Uvozovky jsem tu dal záměrně, protože ani opravený odkaz není správně.

Já osobně jsem hned po zjištění, že odkaz není funkční, zkopíroval zdroják ukázky a vyzkoušel jsem ho v prohlížečích.

"Canvas není určen pro uživatelská rozhraní. Důvodem je, že UI potřebují být dynamická a reagovat na podněty od uživatele, což by s canvasem vyžadovalo manuální překreslení všech potřebných prvků. Problémem mohou být i chybějící animace a nedostatečná přístupnost."
Ok, přístupnost je fakt, ale jinak je tato věta nesmysl a pravděpodobně ji psal někdo, kdo nikdy nenavrhoval nativní komponentu pod OS (minimálně windows). Protože by věděl, že k dispozici na OS má právě canvas a události a to je vše. S výjimkou pár základních controls (button, edit, apod.) Jsou všechny ostatní řešený právě přes canvas. A úplně stejný postup je vhodný i pro web, je to krásně řešitelné a svižné.
Naopak, každý, kdo někdy dělal controls pod HTML ví, co to je za peklo a s SVG si moc nepomůže.

Obávám se, že v případě Windows je to dáno historickými důvody (WinAPI se pokud je mi známo v tomto směru zásadně nezměnilo od svého vzniku a to už bude drahně let - 20 minimalně). To za prvé.

Za druhé: moderní knihovny (ale v tomto případě je na místě spíše hovořit o frameworku) pro tvorbu uživatelského rozhraní jako je například QT4 používá intenzivně vektorovou grafiku pro standardní prvky uživatelského rozhraní.

Za třetí: nevidím nejmenší důvod proč bychom měli lpět na "ověřených" postupech, když jsou pracnější, pomalejší a objemově náročnější.

Určitě budou situace, kdy použití canvasu a jemu blízkých postupů bude na místě, ale pro jednodušší prvky uživatelského rozhraní může být (a pravděpodobně i bude) jednodušší použít poměrně solidních možností SVG. Ale je to vždy závislé na konkrétní situaci a to je myslím to, co se autor snažil tímto článkem říci: žádná dogmata, žádné zaručené recepty, jen několik vodítek, co by asi mohlo být vhodnější a trocha vývojářské intuice :)

Já naopak tipuju, že vývojářům ze světa desktopu, kteří se teď houfně přeorientují na RIA, budou HTML/SVG značky připadat jako historický balast, vhodný leda pro "lehce oživlé dokumenty" a radši vytvoří frameworky čistě nad Canvasem. Ostatně dnes je mezi nimi tak populární Flex (framework nad Flash Playerem, což je taky takový "canvas"). Ani přístupnost by neměla být problém, který se nedá knihovnami vyřešit. Na druhou stranu je pravda, že frameworky, které umožní tvořit celou škálu aplikací (jak složité RIA, tak i ty oživlé dokumenty) jednotnými prostředky, budou taky atraktivní. Pravděpodobně nastane velká pestrost, ale rozhodně v ní bude mít místo i nějaký ten "Flex for Canvas".

No tak prr, s tim flexem ... kdyz se na nej podivas, Flex nahodou ma navrh velice podobenj jako HTML + SVG (+CSS). S canvasem nema nic spolecnyho ... Veci jako DOM, event bubbling, .... to ze rendering je delanej pomoci movie clipu, to je technickej detail ... BTW a protoze je delanej pomoci movie clipu, je to retained mode (neco jako SVG), aby to bylo jako canvas, musel by tam bejt action script kterej by vsecko maloval (tak jako treba Swing v Jave ...).

No, tak to sis zrovna z mého sdělení vzal něco jiného, než jsem chtěl. :) Jasně, Flash Player není úplný ekvivalent canvasu, protože vedle low-level bitmapového API má i vlastní objektový model pro vektorové tvary (čímž je pro změnu podobný SVG), ale o to ani nejde, mohl jsem napsat Swing nebo WPF, prostě jakýkoliv framework pro UI. Stejně tak při úvahách o canvasu nemusíme mluvit o samotném canvasu, ale třeba o canvasu doplněném o WebGL...

Smyslem myšlenky je to, že bude-li canvas dostatečně výkonný, pravděpodobně kdekdo neodolá pokušení tvořit frameworky s vlastním systémem, jak deklarovat layout, jak stylovat komponenty, jak řešit data binding, atd. Nebo přenést existující frameworky, aby se využily stávající znalosti. Někdo bude brblat, že je hřích ignorovat standardizovaný markup, CSS, atd., ale snad to povede k jasnějšímu odlišování dokumentů (kde je standardizovaný markup nutností) od aplikací (kde to je fuk a konkurence může být naopak přínosnější než konsensus).

Ok - to mas recht. Nakonec frameworky jako SmartGWT uz to delaji dnes ...

Je zvláštní na jednu stranu tvrdit "žádná dogmata, žádné zaručené recepty" a na druhou se odvolávat na "moderní knihovny" :) Ale snad k tomu "žádná dogmata, žádné zaručené recepty" přispěje i naše diskuze :)
Fakt je ten, že má zkušenosti s tvorbou controls na canvasu (jak pod windows, tak pod browser) a tvorbou komponent pomocí HTML+JS+CSS (na SVG nesejde), i když si odpustím kategorický tón (ať si ostatně každý vybere sám), tak pro mne je jednoznačnou volbou canvas, je to mnohem, mnohem lepší (jednodužší, přehlednější, použitelnější, apod.)

"cokoli co používá intenzivně DOM bude pomalé" - obsahuje vedlejší větu, takže by mělo být "cokoli, co používá intenzivně DOM, bude pomalé".

"bude pravděpodobně vhodnější HTML než SVGm" - asi překlep ("SVGm" vs. "SVG,")

Osobne povazuji SVG za velice dobre navrzeny standard kter ma semanticky velmi dobrou citelnost. Canvas bude volba programatora, SVG bude volba zacatecnika nebo designera. V obou se da resit totez, v SVG slozitost roste, ale DOM stavajicich prohlizecu je dnes stonasobne rychlejsi nez drive a stale se zrychluje, cili performance duvody pomalicku prestavaji byt s dobou zajimavejsi a resi se prave citelnost/udri­telnost a udrzovatelnost.
Za sebe tedy plne souhlasim s puvodni filozofii clanku, ze je treba udelat analyzu problemu, jenz chceme resit a podle nej zvolit jednu, druhou nebo obe technologie kombinovat...

Ad „V obou se da resit totez“

To bych ani neřekl. Spor SVG vs. HTML canvas mi přijde celkem nemístný – je to jako se hádat, jestli je lepší vektorová nebo bitmapová grafika – lepší není ani jedno, záleží hlavně na předloze – fotky z foťáku asi sotva budu chtít převádět na vektory a zase různé grafy a diagramy je škoda převádět na bitmapy, protože se nedají škálovat a rozumě upravovat.

Významný rozdíl mezi SVG a canvasem vidím v tom, že canvas je čistě webová, nepřenositelná, záležitost, zatímco SVG je univerzálnější, znovupoužitelnější – nepatří jen na web, ale dá se použít i v desktopových aplikacích nebo při tisku – takže když v tom udělám nějakou vizualizaci nebo kreslení grafů, můžu tu knihovnu/kód použít i jinde než jen na nějaké HTML stránce.

Tady Vám asi něco přebývá:

Interaktivní animovaná uživatelská rozhraníHighly interactive animated user interfaces.
(skoro-konec článku)
:)