 |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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)