Průvodce SVG – aplikace pro export

V tomto článku se podíváme blíže na zoubky některým grafickým programům, schopným generovat SVG data, v pořadí víceméně odpovídajícím jejich schopnostem. Předesílám, že se budu soustředit především na schopnosti programů související s SVG grafikou a s kvalitou exportu. Ostatních vlastností se budu dotýkat pouze okrajově.

Adobe Illustrator 10

Musím říci, že program je pro náš úkol velmi dobře vybaven, je to doslova program šitý na míru SVG. Většina vlastností důležitých pro SVG grafiku se ovládá na následujících čtyřech paletách Illustratoru. Na první paletě shora nás bude zajímat vytváření a testování hyperlinků. Další ovládá průhlednost a možnost nastavit speciální módy grafického prolínání objektů (známé z Photoshopu a podporované Adobe SVG Viewer 3). Jediným omezením je nemožnost nastavit průhlednost zvlášť pro obrys a zvlášť pro výplň. Ještě níže je seznam knihovny symbolů. AI umožňuje velmi snadno, intuitivně spravovat, přidávat, aplikovat nebo nahrazovat vícenásobně použitelné definice symbolů. Všechny důležité akce lze vyvolat na dolním okraji tohoto okénka. Čtvrtá paleta „Vrstvy“ v Illustratoru 10 kromě vrstev zobrazuje všechny grafické elementy v dané kresbě. Směle to můžeme přirovnat k zobrazení objektové struktury v nativních editorech SVG zmiňovaných výše. Můžete si zapnout i zobrazování grafického náhledu pro každý řádek na této paletě.

Na paletě průhlednosti můžete kromě klasické, po celé ploše objektu konstantní transparentnosti, vyrobit i „alfa“ masku průhlednosti a ta se poté zobrazí jako na obrázku níže. (Přepínače na dolním okraji ignorujte, neboť ty SVG neovlivní. Všechny vlastnosti jsou velmi efektivně převedeny i do výsledného SVG s využitím všech možností normy.)

SVG filtry

AI 10 obsahuje obrovské množství různých bitmapových i vektorových efektů a filtrů. Při vytváření grafiky samozřejmě můžeme použít jakýkoli, ovšem většina z nich se při exportu do SVG vyrastruje jako bitmapový obraz, což je pro naše „internetové“ použití silně nežádoucí.

V roletové nabídce Illustratoru jsou dvě skupiny, „Filtr“ a „Efekt“. Prvně jmenovaná skupina se odlišuje tím, že daný filtr se aplikuje na vektorovou kresbu ihned – dojde tím k trvalé modifikaci původní kresby (rozrastrování, deformování, zvýšení počtu vektorových bodů). Sáhneme tedy po druhé skupině, kde nalezneme podskupinu „SVG filtry“ se spoustou předdefinovaných funkcí. Při aplikaci nebo modifikaci těchto filtrů se vám otevře speciální okno, ve kterém můžete filtry dokonce detailně upravovat. Ovšem pozor – pouze na úrovni SVG kódu. Výborné ale je, že okamžitě, bez zavření okna editace můžete vidět výsledek (náhled) efektu.

Interaktivita SVG

Tato speciálně pro SVG vyhrazená paleta dovolí připojit k exportovanému SVG JavaScript programy. Umožňuje přiřazovat grafickým objektům volání skriptů jako reakci na jednotlivé události uživatelského rozhraní. Příkazy v ukázce – tak jak je vidíte na následující paletě – změní objektu, který bude v oblasti pod myší (ukazatelem), barvu výplně na světle žlutou.

Kvalita exportu

XML kód exportovaný ILLUSTRATORem je docela kvalitní a téměř vždy dostanete v SVG prohlížeči stejný výsledek jako na pracovní ploše AI. Vadí mi především špatná optimalizace textových elementů (nadměrné opakování formátovacích atributů) a nevyužívání možností SVG formátu při exportu textu umístěného na křivce (namísto vložení speciálního SVG prvku je text rozkouskován na jednotlivá písmena).

SVG norma obsahuje možnost uložit písma do speciálního souboru, který si SVG prohlížeč na cílovém počítači načte, aby byl zachován vzhled grafiky. Tady bohužel AI10 obsahuje chyby – při ukládání písem se zapnutou volbou „Písma/Připojit“ se v mnoha případech žádné písmo .CEF nevygeneruje. (Podle mých pokusů by důvodem mohla být kontrola autorských práv písem a ILLUSTRATOR by měl na tuto skutečnost upozornit.) Exportní modul SVG v AI10 má bohužel také problémy s používáním dalších písmových řezů z jedné rodiny písem (jiných než „Regular“ respektive „Normal“). U této verze je jediným řešením dodatečná úprava zdrojového kódu, nová verze AI CS, alias verze 11 z konce roku 2003, naneštěstí opravuje pouze posledně uvedenou závadu.

Následující otisky ukazují doporučené nastavení exportu. Při problémech s písmy zkuste zapnout jejich vkládání.

AI – Nastavení exportu SVG (plná velikost, cca 20 kB)

Níže vidíte „Další volby“ nastavení exportu. Nejzajímavější pro nás jsou „Vlastnosti CSS“. Z důvodu přehlednosti a velikosti výsledného kódu doporučuji volbu „Elementy stylu“, která vytvoří uvnitř SVG interní tabulku stylů. Adobe Systems ovšem uvádí, že tato volba způsobí pomalejší vykreslování SVG v prohlížeči. CSS tabulky také nemusí podporovat některé primitivnější prohlížeče.

AI – Nastavení exportu SVG – podrobnosti (plná velikost, cca 20 kB)

Corel Draw 11

Corel podporuje všechny obvyklé grafické objekty, symboly, průhlednosti a vytváření hyperlinků. Text umístěný na křivce stejně jako Illustrator rozkouskuje na jednotlivé znaky. Pozitivně se v poslední době projevuje fakt, že tato firma se intenzivně věnuje vývoji profesionálních grafických řešení založených na SVG a v této oblasti se tu za rok 2003 hodně pokročilo.

Na obrázku vidíte paletu „Object Properties“, kde lze vytvářet hypervazby (nastavení v dolní polovině palety má význam pouze pro zobrazení aktivního objektu v prostředí CDR). Práce s JavaScriptem ve verzi 11 není podporována vůbec. Nemá vůbec žádnou implementaci SVG filtrů. „Měkké“ stíny vytvořené interaktivními nástroji Corelu jsou jako bitmapa připojeny k výslednému exportovanému souboru.

Průhlednost grafiky

Průhlednost lze vytvořit dvěma způsoby. Prvním je použití efektu Transparency. (Corel tyto efekty nazývá „Lens“.) Způsob je to velmi omezený, objekt totiž může být pouze jednobarevný. Druhou cestou je použití nástroje „Interactive Transparency“ (ikona skleničky se stínem). Ten dokáže na libovolný objekt aplikovat všechny možné způsoby průhlednosti, počínaje konstantní, přes „dvoubodovou“ (transparentnost definuje přechod v alfa kanálu) a konče průhledností definovanou bitmapovým obrazem.

Paleta „Object Manager“ zhruba odpovídá paletě vrstev z AI10. Vidíme na ní základní strukturu objektů v dokumentu. Objekty samozřejmě také lze přejmenovat – toto ručně zadané jméno se ve výsledném SVG projeví jako atribut „id“ daného grafického prvku:

Kvalita exportu

Vizuálně se jeví vektorový obraz v browseru výborně, soustředíme-li ale pozornost na kvalitu výstupního XML, tam je bohužel situace o poznání horší než u ILLUSTRATORu. Souvisí to pravděpodobně s filozofií tisku, kterou používají programátoři CDR.

Následující kresba obsahuje neprůhledný modrý trojúhelník a kruh vyplněný přechodem, který má interaktivně nastavenu proměnnou průhlednost. Corel se zde chová, jako kdyby neměl k dispozici průhlednost SVG (vysvětluji si to tak, že pánové prostě jako základ použili rutiny pro výstup do PostScript Level 2, který jak známo průhlednost neumí).

Aby vykreslil část ovlivněnou průhledností, udělá CDR zhruba následující: Vypočítá sám barevnost vrchního objektu, jak by vypadala smíchána s modrou podkladového trojúhelníka při dané průhlednosti. Poté duplikuje vrchní objekt (kruh), vyplní jej vypočítanou smíšenou barvou a ořízne jej podle průsečíku obou objektů. Výsledkem je zběsilý kód, který obsahuje všechny objekty dvakrát?! A aby toho nebylo málo – pokud jsme si některý objekt pojmenovali, abychom jím mohli manipulovat pomocí skriptu, obě kopie budou mít stejný atribut „id“, což podle pravidel XML korektní určitě není.

Písma generuje Corel 11 efektivněji, ale styly jako BOLD, ITALIC a podobně opět nezvládá. Neumí generovat soubory písem .CEF podle normy SVG – pouze vkládat písmena (glyfy) do SVG souboru. Přesnost v tomto případě nastavte minimálně na 1:100. Nelze zvolit kódování textu – při testování program přesto češtinu zvládl.

CDR – Nastavení exportu SVG (plná velikost, cca 15 kB)

Aktualizace

Vzhledem k mému zpoždění při přípravě textu se ještě před uveřejněním článku objevily dvě aktualizace exportních filtrů Corelu. K významnému zlepšení došlo v implementaci průhledností, která už je konečně podle definice SVG. Bohužel nejsou správně nastaveny průhlednosti tahů. A další zákeřná chybička – stín, který vidíte v následující ukázce, je stále realizován jako připojená bitmapa a cesta k tomuto obrazu je navíc chybně generována podle DOSové konvence s obráceným lomítkem! Daleko lepší a zcela bez výhrad je nyní export textových elementů. A jako třešnička navrch znatelně dospělejší verze 2.1 prohlížeče CSV. Takže, přes všechny výhrady, rozhodně upgradujte!

OpenOffice

OpenOffice verze 1 představují kancelářský balík s mnoha propracovanými funkcemi, jež se může směle měřit s obdobným programovým balíkem Microsoftu. Zatímco MS v čerstvé verzi balíku Office také začal podporovat ukládání XML a SVG dat, OpenOffice jsou schopny exportu SVG již podstatně delší dobu.

U aplikací, které XML pouze exportují a generují ze svého interního (odlišného) formátu hodně záleží na tom, kolik úsilí bylo věnováno implementaci speciálních prvků jazyka do exportního algoritmu. Hned poté musím jedním dechem dodat, že v případě OpenOffice byly podobně jako v případě první verze CDR11 zcela opomenuty progresivní vlastnosti SVG, mezi které je nutno počítat zejména průhlednosti a alfa maskování objektů.

Schopnosti OpenOffice jsou opravdu obrovské a mezi jiným disponují možností mít nezávisle na sobě průhledné tahy a výplně (je možná i proměnná průhlednost pomocí masky). Naneštěstí opět stejně jako programátoři prvních verzí Corelu 11 i autoři OpenOffice stále ještě vězí v minulosti, kdy žádné zařízení a žádný obrázkový formát nezvládal průhlednost vektorových objektů a lidé pracně vymýšleli postupy k její simulaci. Formátování textu trpí podobným neduhem jako exportní modul ILLUSTRATORu, totiž zbytečným opakováním mnoha atributů. Atraktivním doplňkem OpenOffice jsou 3D objekty – ty se ale dokonce ani neexportují jako křivky, převedou se na bitmapy!

A tak, bohužel, jsou OpenOffice velkým zklamáním dne, s takovým stavem bychom se opravdu, ale opravdu nechtěli smířit.

Karbon14

Schopný vektorový editor patřící do skupiny okolo KDE projektu. Mezi ne zcela běžné vlastnosti patří například schopnost vyměňovat si data v profesionálním formátu Illustratoru nebo jako EPS, práce s vrstvami, kvalitní implementace průhledností, text umístěný na křivce nebo třeba implementace některých vektorových filtrů.

Karbon14 – pracovní plocha (plná velikost, cca 45 kB)

Dále je třeba vysoce ocenit například paletu „navigátor“ a vrstvy, která stejně jako AI od verze 9 zobrazuje dokonce všechny objekty uvnitř kresby. V řeči SVG – vidíme v podstatě grafické zobrazení struktury DOM. Najdou se i paletky pro grafické zobrazení historie dokumentu, knihovny vzorků, popřípadě klipartů (bohužel zatím nefungují jako pravé symboly v SVG grafice).

Musím uznat, že s nabídkou moderních funkcí je na tom Karbon14 velmi dobře – vzhledem ke své praxi s Illustratorem odhaduji, že inspirace přichází právě odtud. I když se jedná o vývojovou verzi programu s označením verze 0.1, práce s ní je poměrně příjemná. Chybí mi jen více nástrojů pro editování (spojování a rozpojování) vektorových cest, přidávání a ubírání bodů a slučování ploch. Pro manipulaci s textem platí totéž, co například pro Web Draw z předchozího článku. Možnost maskování neexistuje.

Pro účely testování jsem zkompiloval nejnovější betaverzi KOffice 1.3. Musím říci, že exportované SVG soubory jsou velmi dobře optimalizované a podporují všechny moderní vymoženosti typu průhlednost a podobně. I když se betaverze chovala vcelku rozumně, nemohl jsem vyzkoušet export textu, neboť právě v této oblasti se vyskytovalo nejvíce nevychytaných „blešek“. Pokud mám věci shrnout, Karbon14 je horký kandidát na nejlepší vektorový editor pro Linux.

Amaya

Amaya je nástroj v první řadě určený pro demonstraci nových standardů W3 Consortia a rozsahem funkcí nebo komfortem rozhodně nenadchne, ale pro první pokusy určitě postačí. Vlastně je to editor i prohlížeč HTML, SVG a MathML a jako takový umí vytvářet buď samostatné soubory SVG, nebo můžete SVG vkládat přímo do HTML prostoru.

Amaya – pracovní plocha (plná velikost, cca 15 kB)

Amaya má samozřejmě stromové zobrazení i editor zdrojového kódu. Amaya dovoluje vytvořit jednoduché deklarativní animace polohy a barvy objektů. K dispozici je paleta, kde mohou být umístěny často používané grafické prvky. Po vložení do dokumentu ale nejsou tyto prvky pravými symboly. Zato v práci s textem překonává i WebDraw nebo XStudio.

V době vzniku tohoto článku byla aktuální verze 8.1, kterou si nainstalujte rozhodně ve verzi OpenGL – měla by podporovat zobrazování průhlednosti a snad i animační prvky.

K2D, KSVG a Konqueror

Zajímavý pokrok z hlediska SVG učinilo uživatelské prostředí KDE známé svou vysokou kvalitou. Jeho centrální součástí je prohlížeč Konqueror, který se obdobně jako ve Windows používá jak pro prohlížení souborů, tak Internetu. (Mimochodem Konqueror se stal základem i pro nový prohlížeč Safari na Mac OS.) Pro nás je ovšem vrcholně zajímavé, že v čerstvé verzi KDE 3.2 se jeho nativní součástí stává implementace SVG standardu – pojmenovaná v rámci zvyklostí tohoto projektu KSVG, jak jinak.

K2D

Na KSVG je postaven nativní editor KDE 2D Workbench – K2D, který je ovšem ve velmi rané fázi vývoje. Jen s velkými obtížemi jsem získal zdrojový balík verze 0.1, který navíc obsahoval pár chybiček bránících úspěšnému zkompilování. Po jejich odstranění jsem dostal výsledky, které ukazují následující snímky.

Práce s K2D je poměrně příjemná, ale editor je skutečně stále na počátku cesty. V současném stavu dovolí vytvářet vektorové objekty, texty, poté je obarvit a dál už nic moc. Nefungují zatím ani přechody barev. Můžete si povšimnout, že nastavování všech atributů je velmi detailní a soustředěno na jedné obrovské paletě se záložkami. Pokud se podaří aplikaci vypiplat bude určitě zajímavá pro autory SVG kódu, ale pro běžné uživatele asi trochu komplikovaná a matoucí.

K2D – centrální paleta (plná velikost, cca 25 kB)

Zobrazení SVG v prohlížeči s použitím KSVG

Na tomto poli vykazuje mnou testovaná betaverze KDE 3.2 velmi hezký pokrok a věřím tomu, že představuje významný posun v cestě k neomezenému nasazení SVG v každodenní praxi. Následující otisk ukazuje několik stoprocentně splněných testů W3 konsorcia:

Konqueror – textový test (plná velikost, cca 30 kB)

Mohu prohlásit, že v podstatě všechny kresebné prvky jsou funkční, včetně těch problematičtějších, jako jsou masky nebo text umístěný na křivce. Nejzávažnější nedostatek v této oblasti představuje nefunkčnost SVG písem (postup umožňující vložit vektorové fonty přímo do SVG grafiky). Poměrně dobře také funguje programovatelný objektový model DOM včetně funkčnosti událostí, což již v aktuální verzi knihovny umožňuje pomocí JavaScriptu v určité míře grafiku rozhýbat – viz ukázka pohyblivých analogových hodin.

Bohužel zatím vůbec nejsou implementovány bitmapové SVG filtry. Na samém počátku programátorských prací jsou v této betaverzi evidentně animace – ještě nefunkční, ale již ve výrobě – což je velmi dobré.

IMS Web Dwarf

Tento program je součástí většího sharewarového IMS balíku k vizuálnímu vytváření webových stránek HTML a obsahuje poměrně slušnou podporu pro SVG. Způsob kreslení, omezené grafické nástroje a uživatelský komfort mne při testování nijak nenadchly, ovšem pro začátek může Dwarf stačit. Zmiňuji se o něm především proto, že využívá již dříve zmiňovaného společného prvku HTML a SVG (potažmo XML) – totiž shodný objektový model. Díky analogickému objektovému modelu DOM umožňuje vytvářet například jednoduché animované stránky kombinující HTML s SVG.

Real Draw

Populární sharewarový editor bitmapových obrázků, který umožňuje snadno vytvářet i poměrně velmi pokročilé efekty. Podobně jako profesionální Protoshop obsahuje i vektorovou kreslicí část. Real Draw umožňuje exportovat kresbu do SVG, což vypadá vzhledem k jeho schopnostem velmi lákavě. Verze aktuální v době vzniku tohoto textu bohužel stále ještě obsahovala poměrně mnoho chyb. Program převádí při exportu písma na křivky, ovšem právě tato funkce obsahovala v testovaném programu zásadní chybu, způsobující totální „rozsypání“ obrysu znaků.

Pokud by autoři Real Draw přidali kromě oprav ještě aplikaci alespoň některých „pravých“ SVG filtrů, které efekt nevkládají coby bitmapu do SVG souboru, ale generují jej až v prohlížeči, aby se zmenšila velikost přenášených dat, byl by výsledkem silný nástroj.

Testy implementací SVG

A nakonec ještě pro zajímavost výsledky testování prohlížečů, provedeného organizací W3C (dokument není úplně nejnovější, takže některé novinky chybí). Upozorňuji zvláště na Bitflash, který se již dočkal praktického nasazení v mobilních zařízeních, o tom pár slov někdy příště. A informace, které prosakují o nové verzi Adobe SVG Vieweru, tvrdí, že se čeká pouze na definitivní verzi normy SVG 1.2, aby prohlížeč splnil všechny požadavky na sto procent…

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

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