Aktuální kategorie: Webová grafika

V tomto článku se podíváme podrobněji mimo jiné na OmniGraffle - profesionálně pracující nástroj pro tvorbu diagramů, schémat a tabulek. Zajímavý je i WebEngine, který animuje SVG pomocí JavaScriptu. Výsledek proto bude pohyblivý i ve Firefoxu, který v současném stádiu vývoje bohužel ještě neumí interpretovat SMIL prvky.

V tomto článku si představíme dvě novinky pro tvorbu SVG obsahu. Především SVGDeveloper s jeho animačními schopnostmi byste si rozhodně neměli nechat ujít. Pozornost si zaslouží i editor XFY umožňující vizuální tvorbu kombinovaných XML dokumentů XHTML+SVG.

Když jsem začal promýšlet, co vše zahrnout do tohoto článku zabývajícího se novinkami na SVG scéně, Inkscape jsem původně chtěl vynechat. Ale velmi brzy mi došlo, že se o tomto vektorovém editoru prostě nemohu nezmínit poněkud podrobněji, stejně jako o javovském programu Sketsa.

Většina z vás již pravděpodobně zaregistrovala, že implementace standardu SVG-XML pro vektorovou grafiku na webu i na mobilech učinila významné kroky kupředu. Technický pokrok ztělesňují prohlížeče Opera 9, Mozilla Firefox 1.5 a Camino 1 (Mac OS). Opera 9 dokonce velmi příjemně překvapila podporou kompletního standardu SVG Full! Nejen díky tomu se stala v souboji o technicky nejpokročilejší prohlížeč více než vážným soupeřem Firefoxu, pokud jej snad již nepředčila. V implementaci SVG dotahuje též dvojka Konqueror a Safari na Linuxu i Macu.

Vzhled textu je stálý problém webdesignu. Existuje jen několik fontů, které jsou univerzálně dostupné, a je téměř nemožné vytvořit složitější grafické efekty, pokud používáte jen standardní CSS a HTML. Je vhodné používat tyto tradiční fonty pro texty, ale co se týče nadpisů - krátkých, pozornost přitahujících bloků textu - bylo by hezké mít větší výběr. Na tento problém jsme si zvykli a řešíme jej buď tak, že vyzískáme co nejvíc z toho mála fontů, co máme, nebo zcela nahrazujeme texty nadpisů obrázky.

V předchozích článcích jsme se věnovali obecné teorii bitmapových efektů v SVG a rozebrali jsme si některá primitiva základních bitmapových efektů. V tomto článku budeme pokračovat podrobným popisem dalších grafických filtrů.

V následujícím textu se společně podíváme na základní stavební jednotky bitmapových efektů (filter primitives) podle SVG specifikace. Postupně probereme ty nejzajímavější a nejčastěji používaná primitiva.

Máte-li již základní představu o tom, co jsou a co mohou SVG filtry, je na čase, abyste se blíže seznámili s jejich specifikací a zápisem do SVG kódu. Kromě obecného mechanismu definice a následné aplikace filtru si ukážeme také specifické filtry pro nastavení osvětlení objektů v SVG.

Ačkoli má vektorová grafika spoustu nesporných předností, určité grafické efekty se pomocí vektorů dosahují jen obtížně. Nejtypičtějším a široce používaným zástupcem tohoto druhu nám může být rozostření, které se mnohonásobně snadněji počítá v matici rastrové grafiky. Proto norma SVG zavádí rovněž bitmapové efekty (filter effects), které přicházejí ke slovu tam, kde není použití vektorů výhodné.

Dobře známým problémem webu je dostupnost, či spíše nedostupnost konkrétního písma na konkrétním klientském zařízení. Obzvláště u stránek s důrazem na prezentační stránku je potřeba mít k dispozici písma použitá v původním grafickému návrhu, aniž by bylo nutné převádět velké množství textu na obrysové křivky. Proto mezi pokročilé prvky formátu SVG patří i možnost definice vlastního písma.

Mezi opravdové grafické lahůdky patří i pokročilé typografické schopnosti formátu SVG. Velmi zběžně už jsme na Intervalu probrali základní textové prvky. Tentokrát se podíváme na takové speciality, jako je například umístění textu podél obecné křivky...

V tomto článku se podíváme podrobněji, jak to vlastně je s podporou nativního zobrazování vektorové grafiky SVG-XML v osmičkové verzi webového prohlížeče Opera. A abychom uspokojili všechny "nevěřící Tomáše", tak si rovnou pár příkladů vyzkoušíme.

Tento článek o grafickém formátu SVG se měl původně zabývat něčím úplně jiným. Vývoj v oblasti implementace SVG však učinil kvalitativní skok, takže jako předkrm před dalším článkem si dáme jednu poněkud překvapivou a neočekávanou, o to však významnější novinku...

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č.

V předchozích článcích jsme probrali aktuální verze moderních SVG editorů a animátorů Mobile Designer, RapidSVG a Ikivo Animator. Z vedoucí skupiny profesionálních projektů nám tak zbývá už pouze jeden - XStudio 6.1. Hned po něm si jako zákusek dáme ještě pár zajímavých vektorových grafických programů ze sféry Open Source a shareware.

V předchozím článku jsem vám představil fenomenální aplikaci pro tvorbu animované a interaktivní grafiky, program Mobile Designer. V tomto článku chci pokračovat v exkurzi do světa "Next Generation" SVG editorů - představím vám velmi zdařilé aplikace XStream RapidSVG a Ikivo Animator.

Špičkové nativní SVG editory nové generace Beatware e-Picture Pro a Beatware Mobile Designer vám představím současně, protože z webových stránek výrobce není zcela jasné, zda je Mobile Designer následníkem e-Picture, nebo zda se oba programy budou vyvíjet paralelně. V každém případě Mobile Designer vlastní téměř shodnou pracovní plochu s minimálními odlišnostmi a velmi podobným stylem práce...

Největší událostí SVG scény z poslední doby pro mne jsou novinky v oblasti profesionálních vizuálních editorů (animátorů). Jedná se o produkty vhodné i pro neprogramátory a tudíž se slušnou šancí oslovit široké spektrum uživatelů. Mohu je s klidem zařadit do kategorie nativních editorů, jelikož byly navrženy speciálně pro výrobu animované a interaktivní grafiky v SVG formátu.

V tomto článku vás čeká první pomoc při programování (alias skriptování) v prostředí SVG. Získané znalosti si hned vyzkoušíme v několika zajímavých praktických příkladech. Myslíte si například, že znáte všechny výhody, které mají vektorové mapy v SVG formátu? Možná ano, ale i tak se vás pokusím přesvědčit, že SVG mapy toho dovedou ještě více, než jste čekali.

Pokud jste se nechali pozitivně ovlivnit několika předcházejícími články našeho kurzu SVG, pak už znáte vše potřebné k vytváření pohyblivé a interaktivní 2D grafiky. Nyní máte možnost využít těchto znalostí v pokračování řešených příkladů SVG animací. Opakuji, že mnoho z nich zcela záměrně vychází z existujících vzorů, přičemž samozřejmě není účelem vykrádat cizí nápady, pouze demonstrovat schopnosti SVG formátu.

Máte před sebou další důležitý článek o animování vektorové grafiky v 2D prostoru pomocí formátu SVG, rozebírající řízení dynamiky změn hodnot různých prvků.