 |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Průvodce SVG - SVG versus Flash
Už v době vývoje normy SVG 1.0 byl Macromedia SWF formát relativně rozšířený a tak pracovní skupina SVG přirozeně vycházela také ze zkušeností vývojářů Flashe - jinými slovy, SVG norma obsahuje všechny kladné vlastnosti Flash technologie. Navíc přidává daleko lepší práci s písmy a dokonalejší provázanost se zbytkem internetu, včetně přirozeného vytváření hyperlinků a skriptovatelnosti.
Pokusme se nyní postavit proti sobě výhody a nevýhody, které každý z těchto dvou vektorových formátů má oproti svému konkurentovi. Nebudeme zde zmiňovat vlastnosti, které jsou oběma rivalům společné.
Hodnocení SVG
- ++ První a zásadní výhodou je jeho otevřenost, která umožňuje v podstatě komukoli vytváření a úpravu grafiky - v případě nutnosti postačí textový editor.
- ++ XML základy, díky kterým je stoprocentně, hladce a zcela systémově propojitelný s celým internetovým světem. V budoucnosti, až pokročí implementace norem v prohlížečích, díky tomu získáte například velmi elegantní možnost vkládání SVG kódu přímo do XHTML dokumentu - použitím standardizovaného mechanismu pro přepínání jmenných prostorů XML (mixed XML namespace). Prvním prohlížečem, který touto tzv. nativní implementací SVG disponuje, je již dnes prohlížeč Mozilla, i když bohužel implementace SVG normy je v něm zatím nekompletní.
Následující ukázka demonstruje, jak se dovnitř XHTML vloží pomocí dvojtečkové syntaxe grafické elementy v SVG prostoru jmen (SVG name space):
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<style>
circle:hover {fill-opacity:0.9;}
</style>
</head>
<body>
<svg:svg>
<svg:g style="fill-opacity:0.7;">
<svg:circle cx="6cm" cy="2cm" r="100"
style="fill:red; stroke:black; stroke-width:0.1cm"
transform="translate(0,50)" />
<svg:circle cx="6cm" cy="2cm" r="100"
style="fill:blue; stroke:black; stroke-width:0.1cm"
transform="translate(70,150)" />
<svg:circle cx="6cm" cy="2cm" r="100"
style="fill:green; stroke:black; stroke-width:0.1cm"
transform="translate(-70,150)"/>
</svg:g>
</svg:svg>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<style>
circle:hover {fill-opacity:0.9;}
</style>
</head>
<body>
<svg:svg>
<svg:g style="fill-opacity:0.7;">
<svg:circle cx="6cm" cy="2cm" r="100"
style="fill:red; stroke:black; stroke-width:0.1cm"
transform="translate(0,50)" />
<svg:circle cx="6cm" cy="2cm" r="100"
style="fill:blue; stroke:black; stroke-width:0.1cm"
transform="translate(70,150)" />
<svg:circle cx="6cm" cy="2cm" r="100"
style="fill:green; stroke:black; stroke-width:0.1cm"
transform="translate(-70,150)"/>
</svg:g>
</svg:svg>
</body>
</html>
- ++ XML struktura a s ní spojené techniky jako skriptovatelnost a manipulace s grafikou přes DOM, možnost nasazení stylů CSS, model událostí společný všem XML jazykům, potažmo tedy shodný s HTML, to vše jsou věci, které weboví vývojáři důvěrně znají a mohou tedy tyto znalosti okamžitě použít i pro SVG. S trochou nadsázky můžeme dokonce prohlásit, že pokud umíte DHTML, jako byste již uměli pracovat s SVG. A možnost využívat už jednou pracně nabyté znalosti není vůbec malá věc!
- ++ Až neskutečně snadná možnost automatizovaného generování SVG na serveru pro vizualizaci databázových dat. Již dnes existuje pro tyto účely několik hotových programových knihoven i komerčních aplikací.
- ++ Inkrementální načítání. Podobně, jako to dělají některé prohlížeče HTML. Při načítání z pomalé sítě lze ihned zobrazovat načtené elementy a nečekat na načtení celého dokumentu (každý z nás jistě zažil při načítání mnohých "flashnutých" stránek neskutečně otravné čekací lhůty).
- -- SVG je malinko handicapován menším rozšířením plug-inů do internetových prohlížečů, ale tato ztráta se rychle zmenšuje.
- ++ Na druhou stranu má SVG díky své otevřenosti už dnes převahu na mobilních telefonech, handheldech a komunikátorech, kde již existují implementace normy SVG Tiny a SVG Basic. Norma SVG Tiny byla dokonce zvolena jako povinný základ Multimedia Message Service (MMS) pro novou generaci mobilů podle normy 3GPP!
- -- Díky tomu, že SVG je mladší než SWF, stále čeká na podobně vyspělé kreativní prostředí, kterým je Macromedia Flash MX. Naděje, které jsem vkládal v tomto směru do Adobe Live Motion, jakožto jediného vážného konkurenta Flash MX aplikace, se zatím nesplnily. Na druhou stranu si myslím, že i Macromedia bude časem donucena exportovat SVG - tím na své pozici nejlepšího animačního softwaru pro internetunic neztratí.
Hodnocení Flash technologie
- ++ Zásadní výhodou Flashe je Flash. Toto, na první pohled paradoxní tvrzení, se objeví v jiném světle, uvědomíme-li si, že Flash je především aplikace pro vytváření animací a interaktivních audio-vizuálních prezentací. Program se současným názvem Flash MX má za sebou obrovskou historii, začínající na počítačích Apple už v době, kdy uživatelé PC teprve zjišťovali, že myši běhají nejenom ve sklepě. A tyto zkušenosti jsou na něm vidět... (Historická poznámka: Roku 1984 byla založena společnost Macromind s cílem dát interaktivitu, multimédia a animace do rukou neprogramátorům, v roce 1987 uživatelé dostávají do rukou první dostatečně výkonný nástroj - první barevný Macintosh, v roce 1988 přichází další významný milník - aplikace Macromind Director 1 spolu s nástupem CD mechanik, 1991 sloučení Macromind-Paracomp, 1992 další sloučení s Authorware a vznik Macromedie.)
- ++ SWF formát je starší, jeho prohlížeč je rozšířenější a lépe optimalizovaný na rychlost.
- ++ Díky tomu, že Flash plug-in se vyvíjí v těsné vazbě na grafickou aplikaci Flash MX, může se grafik vždy spolehnout na dokonalou funkčnost na všech platformách podporovaných Macromedií - tedy pokud zrovna uživatel není s instalací opožděný o jednu vývojovou verzi plug-inu. Možná bych měl napsat, že pro spolehlivý a dotažený SVG prohlížeč (kterým je Adobe SVG Viewer 3) toto platí také, ale musím čestně přiznat, že v současné době bohužel stále existuje několik drobných problémů, na které můžete narazit při pokročilé práci s JavaScriptem a SVG plug-iny. Tyto problémy plynou právě z existence konkurenčních HTML prohlížečů (což je samozřejmě věc prospěšná) a jejich různého přístupu k propojení s plug-iny.
- -- Formát je uzavřený a autoři jsou odkázáni na aplikace, které export SWF podporují. Můžete udělat právě jen to, co vám daný software umožní.
- -- Jste-li webový designer a chcete-li pracovat s formátem SWF, musíte se nejdříve kompletně od základu naučit celou specializovanou Flash technologii.
Předchozí články
Martin Hejral (28.4. 2003)