Interval.cz

Pr∙vodce SVG - Java a SVG

Tento Φlßnek o grafickΘm formßtu SVG bude tak trochu specializovßn na platformn∞ nezßvislΘ aplikace b∞₧φcφ v prost°edφ Java. ZaΦneme kup°φkladu zajφmav²m grafick²m editorem formßtu SVG-XML a skonΦφme nßvodem, jak umo₧nit nßvÜt∞vnφk∙m webov²ch strßnek prohlφ₧et SVG grafiku bez nutnosti instalovat prohlφ₧eΦ.

P°iznßvßm se bez muΦenφ, ₧e jsem se a₧ doposud ·mysln∞ vyh²bal javovsk²m program∙m, p°edevÜφm kv∙li ni₧Üφmu v²konu oproti nativnφm aplikacφm. Vzφt vßs na exkurzi do tΘto oblasti mne p°im∞lo vφce faktor∙:

1. I ten nejlevn∞jÜφ dnes vyrßb∞n² poΦφtaΦ disponuje dostaΦujφcφm v²konem.
2. JavovskΘ programy jsou absolutn∞ nezßvislΘ na operaΦnφm systΘmu poΦφtaΦe.
3. V neposlednφ °ad∞ prost°edφ Java samo, i aplikace zajφmavΘ pro SVG grafiku, ji₧ dosp∞ly a vyzrßly do velmi sluÜn∞ pou₧itelnΘ podoby.

Nynφ vßm nabφzφm mal² trik pro pohodlnΘ spouÜt∞nφ javovsk²ch aplikacφ v prost°edφ Unixu (Linux, MAC OSX). P°edpoklßdejme, ₧e si aplikace Javy rozbalφte do adresß°e /usr/java/. Pak si m∙₧ete do adresß°e se spustiteln²mi programy (nap°φklad /usr/local/bin/) umφstit nßsledujφcφ skript pro spouÜt∞nφ SVG prohlφ₧eΦe z Batiku:

DalÜφ programy samoz°ejm∞ analogicky.

Sketsa 3 - nativnφ SVG-XML editor

Sketsa pou₧φvß SVG jako sv∙j p°irozen² grafick² datov² formßt. Je zalo₧en na otev°enΘ, voln∞ dostupnΘ grafickΘ knihovn∞ Batik, na kterou jeÜt∞ p°ijde °eΦ dßle v tomto textu. Te∩ u₧ nikoho nep°ekvapφ sd∞lenφ, ₧e grafickΘ schopnosti odpovφdajφ schopnostem renderovacφho jßdra dotyΦnΘ knihovny a ₧e program ke svΘmu b∞hu pot°ebuje prost°edφ Java od verze 1.4.2.

Nativnφ SVG-XML editor Sketsa napsan² v Jav∞ (plnß velikost, cca 75 kB)

Tento program je orientovan² spφÜe na programßtory a kodΘry. Pokud bych m∞l pou₧φt lidovΘ p°irovnßnφ, spφÜe ne₧ s u₧ivatelsky p°φjemn²m a kreativnφm Inkscapem je si blφzk² s editorem XStudio. Mno₧stvφ funkcφ je menÜφ, ale Sketsa je p°esto docela dob°e funkΦnφ. Nejvφce mi vadφ absence schopnosti vytvß°et slo₧enΘ cesty.

V∞tÜinu atribut∙ vektorov²ch objekt∙ nastavφte na praktickΘ palet∞ "Property" s n∞kolika zßlo₧kami - vÜe je na jednom mφst∞.

Programßtorskß orientace ΦiÜφ i z nastavovßnφ p°echod∙ barev

Plusem programu je naopak mo₧nost pracovat s SVG prvky filter. Sice pomocφ grafickΘ paletky, ale bohu₧el jen na velmi primitivnφ ·rovni, tak₧e se nevyhnete nutnosti znßt alespo≥ zßkladnφ teorii (tΘ teorie byste se m∞li doΦkat i v naÜem kurzu). Vytvo°enΘ efekty a p°echody barev pro vφcenßsobnΘ pou₧itφ se spravujφ na paletce "Resource".

K dispozici je samoz°ejm∞ editor zdrojovΘho k≤du se zv²razn∞nφm syntaxe a XML editor.

Vytvß°enφ bitmapov²ch efekt∙ podle normy SVG

Batik 1.5 - pokroΦil² prohlφ₧eΦ a knihovna pro prßci s formßtem SVG

ZaΦnu tφm nejd∙le₧it∞jÜφm parametrem, kter²m je stupe≥ implementace kompletnφ SVG normy. V prvnφ °ad∞ je t°eba uvΘst, ₧e projekt Batik je soust°ed∞n pouze na statickΘ zobrazenφ a sami jeho tv∙rci tvrdφ, ₧e nemajφ v∞tÜφ ambice. Tato informace mne rozhodn∞ moc net∞Üφ, nicmΘn∞ ve statickΘm zobrazenφ grafiky je na tom Batik dost dob°e a krom Adobe SVG Vieweru (100% implementace normy) p°edΦφ vÜechny konkurenty - implementuje nap°φklad bitmapovΘ efekty (element filter) nebo prßci s SVG fonty v tΘm∞° ·plnΘm rozsahu.

Demonstrace knihoven Batik v praxi (plnß velikost, cca 120 kB)

Batik 1.5 ale p°esto nenφ tak docela statick²m prohlφ₧eΦem SVG - implementuje toti₧ velmi dob°e skriptovßnφ s vyu₧itφm standardnφho SVG-DOM, vΦetn∞ obsluhy udßlostφ. (VypuÜt∞ny jsou pouze SMIL animace.)

Hra "Miny" demonstruje funkΦnost JavaScriptu a SVG-DOM

Vezmeme-li standardnφ testovacφ sadu W3 konsorcia, vypadß ΦφselnΘ vyhodnocenφ stupn∞ implementace takto:

• StatickΘ testy: spln∞no 100% (93 z 93)
• DynamickΘ testy: spln∞no 30% (10 z 33)

Pokud chcete, mßte mo₧nost najφt detailnφ informace na strßnkßch projektu.

Mezi pokroΦilΘ vlastnosti javovsk²ch knihoven Batiku pat°φ plnß podpora SVG pφsem

ZajφmavΘ aplikace

Samotn² projekt Batik obsahuje n∞kolik velmi zajφmav²ch program∙. Tφm nejviditeln∞jÜφm je samoz°ejm∞ p∞kn² prohlφ₧eΦ SVG - Squiggle. Jak m∙₧ete vid∞t na otisku obrazovky v²Üe, mezi nadstandardnφ vlastnosti prohlφ₧eΦe pat°φ nap°φklad zobrazenφ objektovΘho stromu, nebo t°eba navigaΦnφ paletka.

Krom prohlφ₧eΦe obsahuje projekt Batik i n∞kolik utilitek - t°eba konverznφ program pro generovßnφ SVG font∙ nikde jinde nenajdete!

TinyLine SVG Player 1.8 - prohlφ₧enφ SVG bez instalace prohlφ₧eΦe

Nßsledujφcφ text bude spφÜe ne₧ recenzφ nßvodem, kterak zp°φstupnit vektorovou grafiku Φtenß°∙m webu, ani₧ byste je nutili k instalaci SVG prohlφ₧eΦe nebo zßsuvnΘho modulu. (P°edpoklßdßm samoz°ejm∞ podporu Javy v poΦφtaΦi s XHTML browserem.) Jednß se o vtipnΘ °eÜenφ vyu₧φvajφcφ Java applet TinyLine, kter² dokß₧e vykreslit grafiku ve formßtu SVG Tiny.

Jak na lokßlnφm disku

1. Stßhn∞te si tinylineforweb.zip z TinyLine SVG.
2. Rozbalte archiv tinylineforweb.zip, zφskßte slo₧ku s nßvodem, licencφ, appletem a testovacφmi soubory.
3. Pokud mßte funkΦnφ instalaci Javy, ukßzkovΘ soubory XHTML by ji₧ m∞ly fungovat.
4. Podobn∞ jako v ASV nebo Flash Playeru se pomocφ pravΘho tlaΦφtka dostanete do kontextovΘ nabφdky umo₧≥ujφcφ ovlßdßnφ SVG prohlφ₧eΦe.

Jak na serveru

1. Pokud chcete applet TinyLine vlo₧it do sv²ch webov²ch strßnek, musφte v prvnφ °ad∞ obsah v²Üe uvedenΘho archivu umφstit do slo₧ky na svΘm serveru tak, abyste se na n∞j mohli odkazovat (pozor na nastavenφ p°φstupov²ch prßv).
2. SVG grafiku vlo₧φte do XHTML k≤du nßsledujφcφm zßpisem:
   <!-- atributy elementu "applet":
       code - trida "main" pro spusteni javovskeho kodu
       archive - archiv obsahujici applet
       width, height - pixelovy rozmer appletu ve strance
       svgfile - jmeno vst. parametru appletu TinyLine
       grafika.svgz - nazev SVG souboru
   -->
   <applet code="com.tinyline.app.TinyLineApplet"
       archive="tinyline4web.zip" width="200" height="80">
   <param name="svgfile" value="grafika.svgz"/>
   </applet>

Vyhledßvßnφ