Průvodce SVG – grafické editory

V případě grafiky mají vizuální editory velký vliv na produktivitu naší práce, proto bych chtěl – dříve než se ponoříme do technických detailů SVG-XML – čtenářům poskytnout několik tipů pro vytváření grafiky i přesto, že se někdy budeme dotýkat zatím neprobraných záležitostí.

Tento článek měl být celý věnován podrobnějšímu rozboru schopností grafických editorů pro práci s SVG. Objevil jsem ovšem některé další dosti závažné skutečnosti, týkající se reálné implementace, o kterých byste měli vědět a mít je na paměti při praktickém nasazení SVG grafiky. Konkrétně se jedná o SVG plugin přibalený k Adobe PDF Readeru verze 5 a několik poznámek k Linuxové implementaci.

SVG Viewer instalovaný s Adobe Acrobat Reader 5

V předchozích článcích o SVG jsem uvedl, že PDF prohlížeč Adobe Reader při instalaci přidá i modul SVG Viewer do internetových prohlížečů. To je velmi příjemná zpráva pro autory elektronických dokumentů, kteří by chtěli začít používat XML-kompatibilní grafiku. A skutečně to funguje, všechny počítače s MS Windows XP, které jsem viděl, obsahovaly Adobe Reader 5 a tím pádem i SVG plugin.

Současně jsem ovšem odkryl drobnou „zradu“, kterou na nás spáchali programátoři dotyčné firmy. Totiž, že všechny verze Readeru 5 (včetně v době psaní tohoto textu aktuální 5.0.5) naprosto nepochopitelně instalují již dosti zastaralý SVG Viewer 2?!! Z hlediska grafických schopností prohlížeče se daný problém nejeví jako příliš závažný. Problémy ovšem vyvstanou při programování s JavaScriptem. ASV2 totiž, na rozdíl od verze 3, neobsahuje vlastní implementaci JavaScriptu!

Většina z vás zná, nebo alespoň někdy viděla klasické schéma manipulace s dokumentem pomocí DOM a skriptu (jinými slovy Dynamické HTML): 1) zjistím ukazatel na konkrétní element (nejčastěji podle jeho jména), 2) pomocí tohoto ukazatele čtu a zapisuji uvnitř struktury konkrétního XML prvku, případně volám další funkce objektu.

// zjisti ukazatel na element
var thisElem = document.getElementById(elemName).getStyle();
// změna barvy
thisElem.setProperty(‚fill‘, value);

V případě ASV2 provádí skript WWW prohlížeč, ale zdaleka ne vždy správně. V tomto případě je nutno použít chytřejší kód pro získání správného odkazu na XML objekt. Zhruba můžeme říci, že v situaci SVG umístěného jako externí objekt v HTML dokumentu (pomocí <object> popř. <embed>) obsahuje vlastně kořenový HTML dokument kromě hlavního objektového stromu další kompletní stromové struktury – pro každou vloženou grafiku jeden.

Použitím následujícího kódu donutíme interpretační jádro HTML browseru pracovat se „správnými“ XML objekty v tom kterém SVG stromu – rutina najde „kořen“ příslušného SVG stromu. Pokud byste to neudělali, konkrétně skript běžící v prostředí IE se bude snažit pracovat s hlavním HTML/XML stromem, a to i přesto, že tento skript bude vložen přímo v odděleném SVG souboru.

// tuto funkci spouštějte hned po načtení grafiky do prohlížeče,
// vložením volání fce. do atributu „onload“ základního <svg>tagu
// funkce nastavuje globální proměnnou „SVGDoc“ obsahující kořen SVG stromu
function initSVG(evt) {
  if(SVGDoc=evt.getTarget().getOwnerDocument()) {
    //alert(„SVG module was initialized with no errors: „+SVGDoc);
        return SVGDoc;
  } else {
    alert(„Prosím, nainstalujte novy SVG Viewer!“);
        return false;
  }
}
// příklad funkce pro skrývání/zobrazování grafického elementu
// parametr „id“ je samozřejmě jméno elementu
// parametr „visio“ <>0 zapne viditelnost
function elemShow(id, visio) {
  if(SVGDoc==null)
    return false; //chyba-globální proměnná nebyla ještě nastavena
  var thisElem = SVGDoc.getElementById(id).getStyle();
  if(visio)
    thisElem.setProperty(‚display‘, ‚inline‘);
  else
    thisElem.setProperty(‚display‘, ‚none‘);
  return true;
}

Upozorňuji důrazně, že ani toto nevyřeší všechny možné problémy a zvláště v případě starších prohlížečů může dojít k nahlášení chyby ve skriptu, proto doporučuji vložit rutinu, která oznámí nutnost instalovat novou verzi ASV. Krátký kód, vložený v níže uvedené ukázce SVG dokumentu, zjišťuje (příp. vypíše chybové hlášení), zda je v browseru k dispozici ASV3 (Adobe SVG Viewer 3):

<?xml version=“1.0″ encoding=“iso-8859-1″?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.0//EN“
     „http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“>
<!- Written by Martin Hejral, 2003 ->
<svg xmlns=“http://www.w3.org/2000/svg“ version=“1.0″>
  <script>
    // test if Adobe SVG Viewer 3 (ASV3) or greater is present
    if(window.navigator) {
      if( !((navigator.appName==“Adobe SVG Viewer“) || (navigator.appVersion >= „3.0“)) )
        alert(„PROSIM, nainstalujte novou verzi Adobe SVG Prohlizece!!!“);
    } else {
        alert(„PROSIM, nainstalujte novou verzi Adobe SVG Prohlizece!!!“);
    }
  </script>
  <ellipse stroke=“black“ cx=“206px“ rx=“189px“ ry=“108px“ cy=“144px“
    style=“fill: #E5E500″/>
  <polygon points=“0,39 76,201 282,229 198,155 377,92 201,102 219,0 145,101″
    transform=“translate(122,88)“
    style=“stroke: #E59900; stroke-width: 7; fill: #B20000″ opacity=“.5″/>
  <text transform=“translate(22,44)“>
    TEST Adobe SVG Viewer version
  </text>
</svg>

Adobe SVG a Linux

Stejně jako pro další platformy, i pro LINUX nabízí Adobe na svých „Download“ stránkách SVG Viewer 3. Bohužel s funkčností tohoto prohlížeče už je to poněkud horší… Zřejmě nejvyspělejší prohlížeč Mozilla/Netscape prodělala od uvedení ASV3 velký vývoj. Uvedený ovladač bohužel stále ještě žádnou aktualizací neprošel, přičemž Adobe z pochopitelných důvodů dodává pouze zkompilovanou instalaci.

Testoval jsem Mozillu 1.1 v distribuci Mandrake 9.0 – zde se dokonce občas setkáte s funkčností ASV3, tato je ovšem nedobrá, velmi špatně funguje především JavaScript, existují problémy s průhledností a plugin poměrně často havaruje. A v Mozille od verze 1.3 už neběží vůbec.

Jedinou slabou náplastí je již výše zmíněná možnost nainstalovat Mozillu se zakompilovanou nativní podporou SVG. Tento projekt však má, zdá se, v současnosti poměrně nízkou prioritu u vývojářů. Jen tak mimochodem jsem zaslechl cosi o tom, že by se v údajně připravované verzi ASV4 měla podpora Mozilly výrazněji zlepšit. Můžeme však pouze doufat.

Grafické aplikace pracující s SVG

Na pomyslném prvním místě se původně měl nacházet Illustrator 10, ale ještě před ním se musím zmínit o několika velmi zajímavých, poměrně nových, nativních editorech SVG, tj. pracujících s SVG jako vlastním, přirozeným formátem. Od toho se odvíjí i výborná podpora speciálních rysů SVG jako animace, průhlednosti atp. Ta špatná zpráva je, že tyto programy (s výjimkou primitivnějšího Sodipodi) jsou zatím implementovány pouze pro Windows. Kreativní možnosti jsou ve srovnání s AI10 na řádově nižším stupni, ale to v tomto případě nehraje roli.

Jak EvolGrafix XStudio 2 tak Jasc Web Draw 1 jsou komerční, plně profesionální aplikace využívající SVG skutečně naplno. Web Draw je z uživatelského pohledu jednodušší a příjemnější, snadněji se v něm kreslí. XStudio umožňuje velmi detailně nastavovat v podstatě všechny atributy u všech prvků definovaných v SVG normě a jeho předností je zabudovaná správa celých webových projektů.

Jinak oba editory samozřejmě nabízí vše podstatné, co bychom mohli od SVG-XML editoru chtít, počínaje zobrazením jak grafickým, tak v režimu zdrojového kódu, včetně vizuální práce s objektovou strukturou DOM, a konče vytvářením animací s použitím elementů typu <animate>.

Nakonec ještě zmíním jednodušší nativní SVG aplikaci z oblasti OpenSource software, Sodipodi 0.3.

Jasc WebDraw

Podíváme-li se na pracovní plochu WebDraw, uvidíme dole pod kreslicí plochou vlevo paletu zobrazující strukturu DOM a vpravo přehlednou časovou osu. Kromě navigačního panelu je velmi pěknou vlastností tohoto programu dynamické zobrazování náhledu vybraného objektu v paletě DOM (jak můžete vidět i vlevo dole na otisku obrazovky).

Za velmi praktickou považuji paletu vlastností (Properties), která se mění v závislosti na právě vybraném objektu. Obdobně „Tool Options“ reaguje spolu s právě používaným pracovním nástrojem. Povšimněte si též částečně průhledného barevného přechodu – nastavení průhlednosti separátně pro každý definiční bod přechodu je vlastnost specifická SVG grafice a takto detailně nepracují ani profesionální aplikace typu Illustrator. I tyto zdánlivé drobnosti nám potvrzují, že máme co do činění s nativní SVG aplikací.

WebDraw – pracovní plocha (plná velikost)

Za nedostatky pokládám především nešikovný způsob práce s vektorovými cestami. Zde narazíte, například pokud byste chtěli dodatečně vytvořit složený tvar z již existující plochy. (Složeným tvarem je míněn plošný objekt, jenž se skládá z více než jedné souvislé cesty.) To můžete potřebovat, např. když bude třeba v již dříve existujícím obdélníku vytvořit průhledné okno. Alespoň při vytváření nové cesty vám to WebDraw dovolí. Zde se více než kdekoliv jinde, silně projevuje fakt, že máme co do činění s první generací kreslicího programu – na rozdíl od profesionálních aplikací Illustrator nebo Corel, které již přesáhly svou desátou generaci. Program také nezvládá maskování, a to ani „tvrdé“ pomocí ořezové křivky (clipping), ani pomocí maskování průhlednosti (alpha masking).

WebDraw bohužel zatím neumožňuje používat tzv. symboly. Tyto objekty jsou zavedeny SVG normou především pro úsporu paměťového místa a následné zrychlení přenosu po pomalých sítích. Symboly jsou definovány v sekci „defs“ XML dokumentu, pro jejich libovolně násobné zobrazení v dokumentu se použije prvku „use“.

Animace se v tomto programu vytvářejí rovněž velmi příjemně a intuitivně – vlevo od nuly na časové paletě stisknete „nahrávací“ tlačítko a pak už stačí jen se přepnout na časové ose do požadovaného času a provést žádanou výslednou změnu animovaného objektu v tomto čase (transformace, poloha, barva, atd.). WebDraw poté zcela automaticky doplní příslušné elementy <animate>. Animační elementy se zobrazují v paletě objektů stejně jako ostatní grafické prvky a je samozřejmě možné kdykoliv měnit detailní parametry animací tak, jak jsou definovány v normě.

Špičková je v tomto programu implementace SVG filtrů. Jak lze vidět na otisku obrazovky, při aplikování efektů vidíte výběr jednotlivých filtrů včetně grafického náhledu výsledku, je možná i detailní modifikace číselných parametrů.

Výborný vizuální náhled bitmapových efektů (plná velikost)

Mrzí mě způsob práce s textem. Program v této verzi neumožňuje střídat písmo a styl textu v rámci jednoho textového objektu. Stejně tak neumí ani vkládat znaky do SVG souboru (subsetting), ani vytvářet písma ve formátu .CEF, které norma SVG definovala, aby bylo možné zachovat věrný vzhled písem a přitom maximálně snížit velikost přenášených vektorových dat.

EvolGrafix XStudio

Aplikace XStudio je ve všech základních rysech obdobná předcházejícímu programu – animace, práce se všemi specialitami SVG grafiky (průhlednost, práce s objektovým stromem nebo zdrojovým kódem, atd.). Ovšem firma EvolGrafix šla mnohem dále v detailnosti manipulace se všemi atributy SVG, díky čemuž lze tento program doporučit skutečným profesionálům – i tím, že má integrovánu správu celých webových projektů. Samozřejmě se tato detailnost odráží v menší přehlednosti a snadnosti ovládání.

Nedostatky jsou rovněž obdobné jako u předcházejícího JWD – nešikovný způsob práce s vektorovými cestami, konkrétně dodatečná tvorba složeného tvaru z již existující plochy je nemožná. (Potřebné pro vytvoření průhledné výseče v nějakém již dříve existujícím tvaru.) XStudio 1 vůbec nepodporuje maskování, a to ani „tvrdé“ pomocí ořezové křivky (clipping), ani pomocí maskování průhlednosti (alpha masking). Doufám, že se v další generaci programu takové funkčnosti dočkáme.

Vytváření animací je daleko méně elegantní než u WebDraw. V testované verzi programu nebyla implementována vizuální, ani jakákoliv jiná, editace SVG filtrů. Zde ale seznam mínusů končí a následují již jen superlativy.

XStudio – pracovní plocha (plná velikost)

K dispozici je tak například možnost detailního nastavení všech myslitelných atributů objektů podle definice normy – na snímku obrazovky dole uprostřed paleta „Editor“. Daleko více detailů zde lze nastavit přímo na paletách. Vpravo si povšimněte palety „Settings“ umožňující např. přiřazení rutin JavaScriptu k dané události. Hned nad ní je „Visual“, kde můžete mimo jiné vidět i velmi speciální možnost změny kurzoru nad daným objektem. Na této paletě nahoře lze též vedle nadpisu „Opacities“ vidět záložku „Extensions“, která dokonce umožňuje nastavit speciální módy grafického prolínání objektů známé z dosud nepřekonaného Photoshopu (a podporované ASV3), což dále zvyšuje naše grafické možnosti.

Jedničku s hvězdičkou zaslouží správa symbolů, definic přechodů barev a podprogramů JavaScriptu – to si můžete ověřit na otisku palety. Náhled položky lze vidět v horní části okna. Objekty a výplně z této centrální „knihovny“ aplikujete pouhým primitivním přetahováním z této palety na potřebné místo.

Při vytváření animace si zvolíte objekt nebo skupinu objektů, spustíte příkaz „Add Animation“ a následně se objeví formuláře pro naprosto detailní a vyčerpávající nastavení parametrů. První formulář ukazuje možnosti nastavení časového průběhu, záložku pro čas spuštění. Možné je nastavit úplně všechno (na našem obrázku spuštění, když uživatel ukazatel posune nad daný objekt). Velkým plusem tohoto programu je možnost definovat pohyb podle uživatelem nakreslené křivky, což je část SVG specifikace, kterou WebDraw nezvládá. Nástroj k tomu určený najdete na nástrojové liště pod nápisem „Object“.

Další záložka formuláře na druhém otisku ukazuje různé způsoby interpolace animovaného parametru a další parametry, jako například zda se má konečná hodnota po ukončení animace ponechat objektu nastálo nebo odstranit.

Po přidání animace se tato opět objeví na paletě „Timeline“ v grafickém zobrazení DOM jako samostatný objekt a lze dodatečně ladit její parametry, stejně jako provádět základní manipulace přímo na časové ose.

Pokud jde o text, pro podporu písma naneštěstí platí v podstatě totéž co pro Jasc WebDraw – nelze střídat písmo a styl textu v rámci jednoho textového objektu. Stejně tak není možné ani vkládat jednotlivé znaky do SVG souboru (subsetting), ani vytvářet písma ve formátu .CEF, jak je definováno v normě.

XStudio verze 2 – změny s otazníkem

Od nové verze XStudia dokončené zcela nedávno jsem asi očekával příliš, možná proto od prvního spuštění demoverze zůstávám stále v rozpacích. Programátoři zcela změnili způsob práce s paletkami, bohužel poněkud nestandardním způsobem, jež mi připadá strašně neohrabaný. Říkám to nerad, ale práce s paletkami či třeba s oknem zobrazujícím zdrojový kód je méně pohodlná než u verze 1, a to se vidí skutečně zřídka.

Pracovní prostředí verze 2 doznalo velkých změn (plná velikost)

Dojem z demoverze kazí také obrovský (a zbytečný) červený nápis „demo“ téměř přes celou pracovní plochu i problémky s nestabilitou (testoval jsem ve WinXP) a pár drobných chybiček, především při generování složitějších částí kódu. Předpokládejme, že toto není problém finální verze.

Tím pozitivním je samozřejmě pokračující implementace SVG normy, která již má blízko ke kompletnosti. Tak nám přibyla například možnost vytvářet text na křivce nebo pěkná implementace výplňových vzorů a opět detailnější a podrobnější nastavování všech atributů. Autoři se snažili sloučit všechny související atributy na jedno místo. Pro text jsou např. pohromadě zcela všechny atributy, rozděleny do podskupin v „zaklapovacích“ záložkách: Format, Position, Alignment, Text on Path…

Umožněna je práce s ostrými maskami (clipping). Upozorňuji jen na trochu nelogický způsob vytváření masek, který byl autory zvolen zřejmě proto, aby umožnili pracovat s ořezovou cestou pomocí běžných kreslicích nástrojů. Před tím, než budete moci nějaký objekt ořezávat, musíte totiž masku vytvořit jako vrstvu na paletce „Layers Manager“.

V programu je zakomponována velmi podrobná správa a vytváření CSS stylů, které v SVG mohou fungovat obdobně jako v HTML. Velké změny k lepšímu jsou v práci s JavaScriptem, konečně můžete využít komplexní editování se všemi možnými vymoženostmi včetně zabudované knihovny funkcí SVG DOM, přiřazování akcí a správa podprogramů.

Ne všechny změny mi ale připadají pozitivní, kromě již výše zmíněného nešťastného ovládání paletek navíc zmizela paleta „Library“ – správa přechodů barev byla přesunuta přímo na paletku vzhledu, symboly na hlavní nástrojovou lištu.

Pokud jde o animace, přibyla speciální paletka, která zprůhlednila vkládání deklarativních animací, zato zcela postrádám časovou osu, což mi připadá jako špatný vtip. Jednotlivé animační prvky se namísto toho objevují právě na této liště (níže vidíte jeden vložený element pro animaci pohybu a nabídku operací s ním včetně přiřazení animační křivky). Trochu nelogické mi také přijde vytváření „Motion“ animací (pohyb dle předdefinované křivky), kdy nejdříve přidáte animaci a teprve poté v dalším kroku musíte pomocí zmíněné nabídky přiřadit nějakou cestu, namísto aby se zadala už při vytváření animace.

Vidíte, že máme i možnost spouštět zvuky a vytvořit tak komplexní prezentace (ASV3 přímo podporuje přehrávání MP3).

XStudio by mohla být velmi dobrá aplikace, ale programátoři jsou nám dlužni mnoho bodů v kolonce uživatelské přívětivosti. Pokud se jim podaří vyladit skřípající části uživatelského rozhraní a alespoň trochu zpříjemnit editaci vektorových cest, nebude téměř co kritizovat. Rozhodně hlasuji pro návrat a vylepšení časové osy.

Sodipodi

Musím se přiznat, že jsem k testování této Open Source aplikace přistupoval dosti rezervovaně. Ovšem již chvíli po spuštění verze 0.30, jsem byl nucen mínění výrazně opravit. Jistě, má méně funkcí než předcházející komerční aplikace, přesto se jedná o moderní a svěží dílko. Primitivní vzhled uživatelského rozhraní nijak neomezuje velmi dobrou funkčnost. Na rozdíl od předcházejících SVG editorů, tato verze umožňuje zatím jen statické kreslení, ale je stále ve vývoji a pokud bude pokračovat i nadále tak dobře, myslím, že by se Sodipodi mohl stát velmi dobrou alternativou oběma předchozím nástrojům.

Po prvním spuštění se objeví jen velmi strohá paleta nástrojů a vůbec žádné nabídky (lze najít určitou podobnost s GIMP). Na první pohled můžete podlehnout mylnému dojmu o omezených funkcích, šíře schopností programu před vámi ovšem vyvstává postupně, jak aktivujete jednotlivé skupiny funkcí. Všechny funkce jsou také stále dostupné v kontextovém menu na pravém tlačítku myši. I když Sodipodi zatím nemá správu symbolů nebo podporu filtrů, kreslilo se mi v něm lépe, než v obou předcházejících programech, přinejmenším práce s vektorovými cestami je znatelně lepší.

Nastavování vzhledu je elegantní a okamžitě se dynamicky projevuje na aktivních grafických elementech. Na otisku palety pro nastavení výplně lze vidět, že editor nejenom využívá všechny speciální vlastnosti SVG (např. atribut „gradientSpread“), ale nabízí i takové nadstandardní rysy jako zobrazování průhlednosti (pomocí čtverečkové sítě) a ohraničovacího rámečku objektu. Přímo na zobrazeném náhledu barevného přechodu můžete myší nastavit jeho spád a směr.

Povšimněte si jména přechodu na paletě – každý přechod dostane automaticky své „id“ a uloží se v takzvané sekci „defs“ dokumentu. Díky tomu lze jednou vyrobený gradient používat bez nutnosti nové definice, což minimalizuje velikost výsledného souboru.

Podpora písma je bohužel stejně jako u WebDraw a XStudia zatím jen na té nejzákladnější úrovni. Disponuje XML zobrazením (editorem), kde je možné nejenom prohlížet objektový strom, ale i měnit atributy a textový obsah, případně ručně přidávat nové uzly.

Sodipodi zavádí vlastní rozšíření jmenného prostoru XML (xmlns:sodipodi), které slouží k ukládání informací o speciálních typech objektů (viz. obr.):

V našem případě si program uloží informaci o tom, že daný objekt je hvězda s pěti vrcholy a při příštím otevření budete moci tento prvek editovat opět jako hvězdu a ne jako obyčejný mnohoúhelník, u kterého by například změna počtu vrcholů byla poněkud pracná. Pro použití na internetu ovšem raději SVG soubor uložte bez těchto rozšíření.

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

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