Průvodce SVG – konference SVG Open

V tomto článku bych se chtěl vrátit k některým zajímavým námětům, probíraným na konferencích SVG Open, uspořádaných v letech 2002 a 2003: Budoucnost SVG formátu a historická paralela se síťovým protokolem IP – SVG na mobilech – Bude Microsoft podporovat SVG? – Příklady praktického využití – Zobrazení MathML – Generování SVG s použitím XSLT – Microsoft Office Visio 2003 jako editor SVG.

SVG: The sure thing (Paul A. Prescod)

Abych předešel nedorozumění a zbytečným debatám, předesílám, že tématem přednášky bylo SVG jako vektorový grafický formát a možnosti jeho použití na webu i jinde. Rozhodně nikdo nepopírá žádnou z předností technologie Flash jako komplexní aplikační platformy, nicméně tento článek se týká výhradně popisu 2D grafiky včetně její animace v čase a pokud jsou oba formáty srovnávány, je tím míněna pouze takto vymezená oblast.

If you mention Scalable Vector Graphics language (SVG) in a crowd of web developers they will immediately gravitate to the question of whether it can „beat“ Flash. Recently SVG Print has focused attention on the question of whether SVG can compete with PDF and Postscript. These are exciting possibilities: It would be great to unify these domains under a standardized, XML-based syntax. Nevertheless, it is ultimately quite limiting to define SVG by its success in replacing these existing technologies. SVG is much more than a Flash and PDF-killer…

Pokud dnes v kruhu webových vývojářů nadhodíte téma SVG, debata se velmi rychle stočí k otázce, zda může SVG překonat Flash. Jinde zase probíhají diskuze na téma, zda by SVG formát mohl nahradit PDF. To všechno jsou úžasné perspektivy: Sjednotit grafiku v normalizovaném, průhledném, na XML založeném formátu. Bylo by ale krátkozraké posuzovat SVG jen podle jeho úspěšnosti při nahrazování těchto dvou technologií. SVG je totiž daleko víc…

Faktem je, že Flash, PDF a další proprietární formáty nechávají spoustu oblastí vektorové grafiky nedotčených, právě díky omezením způsobeným především faktem, že nakládání s těmito binárními formáty mají pod kontrolou určité soukromé společnosti, pro které je přirozeně hlavním zájmem vlastní zisk. Je zřejmé, že tyto „volné“ oblasti SVG ovládne daleko dříve, než se přiblíží nahrazení Flashe případně PDF na jejich vlastním hřišti. Ve skutečnosti má už SVG úspěch podle jiného měřítka – umožňuje lidem již dnes řešit problémy dříve neřešitelné.

Historická analogie

Současný svět vektorové grafiky je velmi roztříštěn. Existuje množství soutěžících API i vektorových formátů, mnoho z nich proprietárních nebo omezených na úzký segment grafiky. Pokud by již zde nějaký dominantní byl, lidé by jej používali a SVG by vůbec nebyl vytvořen.

Můžeme si představit analogii se stavem v oblasti síťových protokolů před vznikem IP (Internet Protocol). Na trhu byly specializované protokoly firem Novel, Banyan, Apple, Microsoft a IBM používané paralelně. Všechny měly své silné i slabé stránky a všechny jsou omezeně využívány dodnes. Protokol IP obrovsky expandoval nejdříve do jejich mezer (například přenosy na velké vzdálenosti) a poté tyto protokoly nahradil i v jejich původních doménách (například tiskové servery v LAN).

Protokol IP byl postaven na neutrálním území a jelikož nebyl vlastněn žádnou soukromou společností, mohl jej kterýkoli nezávislý výrobce implementovat ve svém vlastním zařízení (třeba pro propojování sítí s různými protokoly). Paralela s formáty vektorové grafiky se přímo nabízí.

SVG: Neutrální země

SVG je neutrální území, na kterém mohou soupeřící multimediální formáty uzavřít příměří a zkusit vyřešit problémy ve spolupráci (rozuměj výměně dat), jež sužují jejich uživatele. Adobe například nemůže nativně zapisovat Flash patřící konkurenční firmě. Podobně Corel bude těžko doporučovat používání formátu AI.

Na druhou stranu SVG má pod kontrolou pouze standardizační organizace W3C. Je k dispozici k volnému použití, výborně zdokumentován, snadno editovatelný a široce podporován. Již dnes existuje poměrně mnoho aplikací, které s ním pracují. SVG se tedy snadno může stát formátem pro výměnu dat mezi všemi možnými průmyslovými vizualizačními systémy – od map ropných polí přes architekturu až třeba k modelům molekul. Nenahradí specializované nativní XML slovníky, ale umožní jejich výstup do jediného zobrazovacího formátu, který je možné prohlížet v jediné unifikované aplikaci, třeba přímo ve vašem webovém prohlížeči.

V některých nových oblastech si dokonce zvolili SVG nejen pro výměnu, ale přímo za základní grafický formát. Hezký příklad je právě nastupující generace mobilní telefonie. Například Sharp a mobilní operátor Vodafone již v Japonsku provozují systém, umožňující uživatelům zobrazit si na svých mobilech kancelářské a grafické dokumenty. Základem je server, který dokumenty DOC, XLS, PPT a PDF konvertuje do formátu SVG Tiny a odesílá po mobilní síti na telefon (řešení využívá Bitflash SVG Player).

Zobrazení SVG na mobilních zařízeních dnes umožňuje také například eSVG Viewer firmy Intesis nebo vlastní prohlížeč společnosti Nokia. Další příklad rostoucí podpory SVG představuje také zbrusu nový mobil Siemens CX65, využívající kvalitní prohlížeč ZOOMON. Existuje již i několik řešení pro přenos a zobrazování map, například carto:net.

eSVG Viewer firmy Intesis na PDA Compaq iPaq

SVG na webu

Zajímavou demonstrací výhod SVG a předností vektorové grafiky vůbec je logo na stránkách Google. V případě, že je zobrazeno obyčejným bitmapovým obrázkem, musí být pro každou jeho velikost načítána relativně velká bitmapa. V případě použití SVG se stahuje jedno logo, navíc typicky menší než libovolná z předchozích variant. Jsou také uváděny jazykové a časově proměnné mutace obrázků, což v případě SVG obnáší pouze změnu několika bajtů v elementech „text“ a z toho plynoucí nikoli zanedbatelné úspory přenášených datových objemů i výkonu serverů při generování těchto obrázků.

Samotný vyhledávač Google ale také umí zobrazovat HTML náhledy některých kancelářských dokumentů. Zde se nabízí podobné řešení jako u již zmíněných mobilů Sharp-Vodafone, tedy vyrobit SVG náhledy se zachováním grafického vzhledu. Možná namítnete, že totéž lze udělat ve formátu SWF. Ovšem, nezapomínejte však, že SVG je prost licenčních problémů. Nehledě na to, že SVG je XML a web je XML! SVG grafika naprosto a beze zbytku zapadá do filozofie webu postaveného na značkovacím jazyce. SVG kód tak můžete nechat prohledávat a indexovat roboty jako jakoukoli jinou HTML stránku…

Desktop SVG

Existuje několik možností využití SVG přímo na pracovní ploše stolních počítačů. SVG ikony, které drží krok se zvyšujícím se grafickým rozlišením monitorů, jsou již dnes realitou – v předchozím článku představené grafické uživatelské prostředí KDE 3.2 na Linuxu již takové ikony využívá. Zajímavé jsou i animované šetřiče obrazovky či poněkud futuristicky vypadající možnost použití SVG přímo pro zobrazovací systém počítače. I když se ve světle posledních událostí (nový systém MS „Longhorn“) zdá tato možnost méně nereálná, přesto budu silně skeptický.

Pokud odbočím ještě trochu dále – spíše jen pro zajímavost – Microsoft si ve svém nejnovějším OS skutečně zahrává s něčím podobným. Ovšem jak je u této firmy „dobrým“ zvykem – standardy jdou opět trochu stranou. Ze serveru MSDN (Introducing the New Avalon Graphics Model, Ian Griffiths, 2004-02) vybírám několik klíčových vlastností. (Omlouvám se těm, kdo se s SVG zatím neseznámili blížeji, za zabíhání do neznámých technických detailů, příště už konečně začneme probírat základní slovíčka z SVG slovníku, slibuji.)

Na MSDN se můžete dočíst o novém systému „Longhorn“ mimo jiné i to, že podporuje dynamickou a deklarativní vektorovou grafiku pro zobrazování a tisk. Dále MSDN oznamuje možná trošičku exoticky vyhlížející možnost programovat pro tento systém aplikace v takzvaném webovém stylu (navigace mezi stránkami, stránková historie a tak dále) – jakýsi pokus sjednotit způsob vytváření aplikací pro web a desktopový systém. Největší vtip ovšem přijde nakonec, když se propracujete k ukázkám jejich speciálního značkovacího jazyka XAML (eXtended Aplication Markup Language) a grafiky. S úžasem pak zjistíte, že některé konstrukce jsou v podstatě identické s SVG a SMIL konstrukcemi. Bohužel jen některé, zbytek se pak liší spíše více než méně.

„Longhorn“ introduces „Avalon“, a technology that brings two significant advances to the way user interfaces are built. First, it provides a new rendering and composition model that enables you to use much more advanced display techniques in your applications, taking advantage of the capabilities of modern graphics cards. Second, there is a new programming model that allows user interfaces to be defined declaratively.

Zhruba tedy řečeno: Grafický subsystém „Avalon“ přináší nový vykreslovací a programovací model, umožňující tvořit uživatelské rozhraní deklarativně. Autor textu to ukazuje na příkladu HTML, ale SVG je z tohoto pohledu stejným principem. Zmiňovány jsou tři úrovně vykreslování obrazu v OS:

1. aplikace sama překresluje okno GUI podle požadavků na překreslení zasílaných systémem, například při rolování tohoto okna
2. aplikace vykreslí okno GUI do grafické vyrovnávací paměti (off-screen, typicky přímo na grafické kartě) – touto metodou lze mnoho požadavků na překreslení vyřídit bez zatěžování hlavního procesoru počítače
3. grafický výstup aplikace se uloží do datové struktury (uváděn je HTML) a k překreslování už aplikace vůbec nemusí „hnout prstem“, dokud se fyzicky nezmění zobrazovaná data

Ve třetím bodě se ukazují další výhody, související s vlastnostmi HTML a XML obecně, totiž možnost využití DOM (Document Object Model). Máte-li například smazat v rozsáhlé tabulce řádek, změníte právě jen malinkatou část HTML pomocí DOM (MS samozřejmě používá .NET object model, namísto HTML DOM).

Kromě jiných prvků UI „Avalon“ tedy zavádí značky pro vektorovou grafiku, včetně deklarativních animačních prvků. Evidentně nejsem sám, kdo se pozastavil nad obcházením standardů, což MS komentuje takto:

A frequently asked question is: Why doesn’t Avalon just use SVG? On the face of it, it seems strange to invent a new way of representing vector graphics in markup when a standard already exists. However, the principal advantage of these shape classes is that they have been designed to integrate into the Avalon programming model. The vector drawing elements derive from the same FrameworkElement base class as all other XAML elements, and follow the same naming conventions.

Příklad XAML od MS (výsledek po vykreslení je, myslím, zřejmý):

<Canvas xmlns=“http://schemas.microsoft.com/2003/xaml/“>
<Ellipse CenterX=“80″ CenterY=“80″ RadiusX=“50″ RadiusY=“50″ Fill=“PaleGreen“ Stroke=“DarkBlue“ StrokeThickness=“5″/>
<Rectangle RectangleLeft=“65″ RectangleTop=“0″ RectangleWidth=“30″ RectangleHeight=“160″ Fill=“Yellow“ Stroke=“Black“ StrokeThickness=“3″/>
</Canvas>

Using XSLT and SVG together: A survey of case studies (Max Froumentin, Vincent Hardy)

Další článek výborně ilustruje a ukazuje využití jedné z často proklamovaných výhod grafiky, založené na XML. Text obsahuje i poměrně podrobné teoretické základy. Jelikož XML je fundament, na němž stojí základní pilíř webu (X)HTML, mohou vývojáři i pro SVG použít stejné technologie, na které jsou již zvyklí z dřívějška. V tomto případě tedy XSLT transformace dovolující automaticky generovat SVG grafiku z libovolných XML strukturovaných dat.

V první části najdete přehled jazyka XSLT. Ten byl navržen ve spojitosti s XSL (eXtensible Stylesheet Language). XSLT se v současnosti široce používá jako obecný mechanismus transformující dokumenty daného XML nářečí do jiného. Například převody typu XML2HTML získávají na popularitě, ruku v ruce s implementací XSLT procesorů v hlavních webových browserech. Zcela analogicky, touto již prošlapanou cestou, bude brzy postupovat spousta jiných aplikací při vizualizaci obecných XML dat pomocí SVG technologie.

Část druhá popisuje nejpopulárnější techniky generování SVG z XML dat za použití XSLT. Obsaženy jsou příklady, jako třeba zobrazení matematických vzorců v MathML jazyce nebo modelů molekul z dokumentů Chemical Markup Language. Zdůrazňuji, bez potřeby specializovaných přehrávačů nebo prohlížečů!

Ve třetí části se nachází dva zcela konkrétní praktické příklady. Ten první kupříkladu generuje animované zobrazení průběhu šachové hry transformací z ChessGML nářečí XML. Jsou tedy i jiné cesty nežli klasické programování. Další, v podstatě nekonečné množství aplikací, se nabízí třeba na školách a všech vědeckých pracovištích nebo ve výrobních provozech, kde je často k dispozici obrovské množství dat a je nutno se v nich nějak zorientovat…

Creating SVG Pie Charts through XSLT via a Web Service (Paul Asman)

Tento text popisuje podobné použití XSLT a SVG ke grafickému zobrazení finančních dat, které se již s úspěchem ve Spojených státech používá. Vedlejším výsledkem takového postupu jsou mimo jiné nezanedbatelné úspory za licencování a udržování všelijakých specializovaných proprietárních programových řešení a nástrojů.

Aby se postup co nejvíce zjednodušil pro uživatele, využívá toto konkrétní řešení Java servlet, který na serveru volá XSLT konverter Xalan, provádějící vlastní transformaci – zde máte řešení kompletně postavené na otevřených standardech a svobodném software (Apache foundation Xalan, Soap a Jakarta Tomcat), dostupném komukoli bez omezení.

SVG Scenarios using Microsoft Office Visio 2003 (Richard See, Stella Du, lair Shaw)

Pokud jste nikdy neviděli uvedenou aplikaci, vězte, že se jedná o velmi schopný grafický editor, jehož autoři si od začátku kladli za cíl umožnit komukoli vytvářet hezky vypadající technické kresby a diagramy. MS tvrdí, že dnes, po jedenácti letech vývoje, Visio používá asi osm milionů uživatelů. Verze Visio 2003 zavádí import a export kreseb ve formátu SVG.

Zajímavá je pasáž, kde se mluví o důvodech implementace SVG. Krom možnosti přímého použití SVG na webu to také byla neustále se zvyšující náročnost vývoje a udržování spousty filtrů pro import a export (v poslední verzi 27 formátů, 12 z nich proprietární formáty konkurenčních produktů). Bylo proto rozhodnuto o ukončení pracného vývoje „milionů“ filtrů a místo nich zavedena podpora jednoho nového univerzálního – SVG.

Podle zveřejněných informací a obrázků programátoři odvedli velký kus práce a vzhled SVG ve Visiu se velmi blíží vzhledu v ASV (Adobe SVG Viewer).

Složitý plánek je na webu v podstatě identický Visiu! (plná velikost, cca 100 kB)

Poctivě bylo zapracováno i na místě tak problematickém pro mnoho jiných SVG aplikací, jakým je blokový text. Norma SVG 1.0 totiž nemá podporu pro „tekoucí“ text. Vývojáři Visia zvolili správný postup, při kterém prvek „text“ pro grafickou aplikaci představuje virtuální textový rámeček a jednotlivé řádky jsou rozloženy v elementech „tspan“, jak ukazuje následující kód exportovaný z Visia:

<text x=“5.97″ y=“66.41″ class=“st2″>
Textbox that contains
<tspan x=“16.31″ dy=“1.2em“ class=“st3″>
many lines of text
</tspan>
<tspan x=“29.32″ dy=“1.2em“ class=“st3″>
which will be
</tspan>
<tspan x=“16.65″ dy=“1.2em“ class=“st3″>
automatically text
</tspan>
<tspan x=“38.32″ dy=“1.2em“ class=“st3″>
wrapped
</tspan>
</text>

Tomuto postupu nelze absolutně nic vytknout. Mimochodem, byl to tým Visia, kdo podal návrh na rozšíření SVG o prvky pro „tekoucí“ text, jež budou velmi pravděpodobně obsaženy v SVG 1.2. A Visio podporuje dokonce i některé bitmapové efekty z SVG normy (jen pro bitmapové obrazy):

1. Brightness
2. Contrast
3. Gamma
4. Transparency
5. Blur
6. Sharpen

Dále jsou uvedena některá omezení při exportu:

1. chybí uživatelské výplně, uživatelské vzory čar a uživatelské značky
2. drobné rozdíly při deformaci písma – SVG umožňuje na rozdíl od Visia pouze vodorovnou deformaci, jen jednoduché podtrhávání a přeškrtnutí
3. výplně jsou exportovány jako 8×8 RGB PNG, tedy ztratí se jejich vektorová podoba
4. Visio zatím nepracuje ani s maskami průhlednosti ani s ořezáváním objektů

I přes zde uvedené drobné nedostatky, vypadá výsledek podle mého názoru výborně a určitě je to významné rozšíření SVG scény o silný, spolehlivý a stoprocentně profesionální nástroj.

Odkazy, zdroje

• SVG Open – hlavní stránky konference
• SVG Open – archiv 2002
• SVG Open – archiv 2003

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.