SVG a Adobe Illustrator: perspektivní kombinace pro kvalitní elektronickou grafiku - Grafika.cz - vše o počítačové grafice

illustrator cs

illustrator cs

22. března 2004, 00.00 | Jaké možnosti poskytuje podpora nadějného vektorového formátu SVG v Adobe Illustratoru?
A stojí vůbec za to ji používat?

Formát pro vektorovou grafiku SVG (Scalable Vector Graphics) patří k bezesporu nejperspektivnějším nastupujícím technologiím publikačního průmyslu. Důvodů opravňujících k tomuto tvrzení je celá řada a my zde připomeneme alespoň ty nejdůležitější: Především je třeba vyzdvihnout bohaté vyjadřovací schopnosti SVG, které umožňují v SVG obrázcích vedle sebe využít vektorovou i bitmapovou grafiku, text, odkazy či animace. Díky tomu, že je SVG napsán v jazyce XML, lze jej snadno provázat s jinými standardy či technologiemi, postavenými na zmíněném jazyce. Jedná se přitom o standard otevřený, jehož vývoj neustále pokračuje a snaží se pokrýt nejširší škálu aplikací, od webovské grafiky přes mobilní publikování až po pre-press. (Podrobnější přiblížení vlastností SVG nalezne čtenář zde a zde.)

S nástupem SVG přibývá nástrojů pro vytváření obsahu v tomto formátu. Škála řešení je zde poměrně bohatá, i když málokterý produkt zatím dokáže využít možností uvedeného standardu skutečně naplno. Mimo aplikací, které jsou primárně určeny pro práci s SVG, jsou pro uživatele z oblasti pre-pressu atraktivní zejména odpovídající nástroje pro tvorbu a úpravy SVG grafiky, nabízené v jejich grafických či sázecích programech. Velmi zajímavé možnosti v uvedené třídě produktů nabízí vektorový editor Adobe Illustrator. O přiblížení jeho příslušných nástrojů bychom se rádi pokusili v tomto článku. Náš výklad se bude přitom vztahovat k CS verzi zmíněného produktu, většinu dále popsaných funkcí a postupů lze nicméně stejně dobře využít i v Illustratoru 10.

Jak SVG v Illustratoru vytvořit?

Do SVG podoby lze uložit libovolný dokument Illustratoru a to s použitím odpovídajícího příkazu (File-Save As nebo Save for Web, volba formátu SVG nebo SVGZ). V potaz je ovšem třeba brát odlišné vyjadřovací schopnosti nativního formátu Illustratoru a SVG. Většina atraktivních prvků, jako jsou kerning, zarovnání na křivku, průhlednost či výplně nicméně zůstane zachována. S pomocí nástrojů, jejichž využití popíšeme dále, pak lze v dokumentu Illustratoru nastavit nejrůznější specifické SVG prvky, jako jsou filtry, interaktivita či odkazy.

Ukládání dokumentu Illustratoru do SVG formátu

Zásadní je při ukládání volba mezi normální či komprimovanou (SVGZ) podobou obrázku. V druhém případě lze redukovat objem o zhruba 50 až 80 procent (záleží na povaze obsažených dat), ztrácí se tím ovšem možnosti dalších přímých úprav zdrojového textu (ruční editace, serverové úpravy) a mírně se zpomaluje rychlost zobrazení obrázku (potřeba dekomprimace před zobrazením). (Úspor místa lze dosáhnout i úpravami obrázku před jeho uložením /například redukcí složitých cest/ či dalšími prostředky /viz dále/.) Příslušné volby pak dovolují uložit dokument do SVG tak, aby zůstal editovatelný v Illustratoru, nebo aby byl optimalizován pro prohlížení v SVG Vieweru, bezplatném prohlížeči, nabízeném pro zmíněný typ grafiky společností Adobe.

Zajímavé jsou volby pro uložení použitých písem, rastrových objektů a kaskádových stylů, dovolující využít odkazů na externí soubory s uvedenými prvky. Výhodami takovéhoto uložení jsou zejména redukce objemu použitých dat (opakované prvky jsou uloženy pouze jednou) a možnost velmi flexibilní dynamické transformace vzhledu obrázku (záměnou určitého souboru se může změnit jedna, ale i velké množství charakteristik). Nevýhodou pak je nutnost zajištění odpovídající správy použitých externích souborů (uživatel je musí stáhnout spolu s obrázkem /externí obrázky, styly/ nebo mít již nainstalovány /písma/).

V případě písem lze volit mezi vložením použitých či všech znaků z použitého písma nebo pouhým odkazem na písmo systémové. U obrázků je možné buďto vložení v rastrové podobě do souboru nebo oddělené uložení (a příslušné linkování) ve formátu PNG či JPEG. U kaskádových stylů pak lze zvolit různé způsoby generování, od úplného vložení všech formátovacích charakteristik do dokumentu až po vložení odkazů na externí stylové soubory.

Další volby při ukládání výše naznačeným způsobem dovolují vyladit kvalitu vykreslení vektorových prvků (1-7 desetinných míst) a určit kódování vloženého textu. Je-li nastaveno kódování UTF-8, uloží se spolu s dokumentem i jeho metadata, nastavená s pomocí odpovídajícího dialogu. V rámci dialogu Save for Web pak přijde pro SVG (stejně jako jiné formáty) vhod funkce náhledu, umožňující posoudit rychlost vykreslení obrázku na internetové lince o zadaných parametrech.

Příprava SVG grafiky v Illustratoru

Jak jsme již řekli výše, Illustrator disponuje nástroji, umožňujícími do jeho obrázků vložit některé specifické prvky, které budou využity v generované SVG grafice. Konkrétně lze takto nejprve zmínit SVG filtry, což jsou vlastně série instrukcí v XML, popisující matematické operace, jež se mají provést s určenými charakteristikami objektu. Součástí dodávky Illustratoru je sada SVG filtrů, které lze aplikovat na daný objekt prostřednictvím odpovídající nabídky (Effect-SVG Filters). Uživatel přitom může vedle výchozích nastavení filtru aplikovat i nastavení vlastní. Odpovídající příkazy dále umožňují importovat nové filtry z SVG souborů a rovněž daný filtr upravit v prostředí jednoduchého editoru nebo odstranit.

Editace SVG filtru

K doplnění interaktivity slouží v Illustratoru odpovídající paleta (SVG Interactivity). Ta dovoluje dokumentu nebo jeho určenému prvku (objekt, skupina, vrstva) přiřadit jeden nebo více JavaScriptů, spouštěných na základě různých událostí (přesun kurzoru myši nad objekt, označení textu, rolování dokumentu apod.). Jednoduché editační rozhraní zmíněné palety pak slouží k tvorbě vlastních JavaScriptů.

Jednotlivým objektům obrázku lze přiřadit odkazy. K dispozici jsou přitom tři metody: prostřednictvím obrazových map, nastavením vlastností řezů objektů či s pomocí JavaScriptu. Popis zmíněných metod překračuje tento článek a čtenář si jej musí dohledat v dokumentaci Illustratoru.

SVG dokumentů lze využít coby šablon pro tzv. grafiku řízenou daty (Data-Driven Graphics), z kterých se generují různé podoby téhož obrázku, lišící se v určitých proměnných složkách. Pro vložení těchto proměnných do dokumentu a definování příslušných propojení s datovými sadami slouží odpovídající paleta (Variables). Vytvořená šablona uložená do SVG formátu je pak použita k dynamickému publikování v jiných aplikacích Adobe, jako jsou zejména GoLive či Graphics Server. S podrobnějším přiblížením uvedené publikační technologie bychom rádi přišli v některém z našich příštích článků.

Nastavení proměnných pro grafiku řízenou daty

Závěrem

Podpora SVG v Adobe Illustratoru neposkytuje tak široké možnosti, jako odpovídající specializované aplikace - to se týká zejména tvorby interaktivního či animovaného obsahu. Může být nicméně velmi užitečná zejména tam, kde je potřeba grafiku z Illustratoru rychle a pokud možno bez složitějších úprav rychle publikovat na Webu či mobilních zařízeních. Ukázky inovativního využití uvedeného typu grafiky, založené zejména na výše přiblížené technologii grafiky řízené daty, pak lze nalézt v odpovídající části Adobe SVG Zone.