Kurz SVG – struktura dokumentu, zobrazovací a vykreslovací model

V ostatních textech o SVG jsme si osvětlili historické kořeny a princip grafického formátu SVG, ukázali jsme si jeho pozadí, ale neřekli jsme nic o něm samém. Nastal čas splatit dluhy a podívat se do jeho „slovníku“. Jelikož je formát Scalable Vector Graphics velmi komplexní, začneme se strukturou dokumentu, abychom měli pevný základ.

Sám za sebe mohu prohlásit, že mne doslova nadchla vnitřní logičnost a promyšlenost každého detailu. Kdysi bylo na adresu HTML řečeno cosi v tom smyslu, že jeho úspěch spočívá ve schopnosti vytvářet hypertextové dokumenty minimálními prostředky (primitivní textové editory) s maximální možnou jednoduchostí a průhledností. Dovoluji si tvrdit, že podobné vlastnosti najdete i v jazyce SVG.

Struktura SVG dokumentu

Každý malíř si musí nejdříve připravit plátno – kromě nezbytného záhlaví si ukážeme i další prvky, které vám ze začátku možná budou připadat nezajímavé, ale později, až pokročíme od prostého vytváření grafických tvarů o něco dále, vám umožní provádět spoustu šikovných triků. Předem však upozorňuji, že se – v zájmu přehlednosti a snahy ušetřit čtenáře přemíry informací – nejedná v žádném případě o vyčerpávající popis syntaxe jazyka SVG-XML. Pro úplné informace odkazuji na plné znění normy Scalable Vector Graphics (SVG) 1.1 Specification.

Základní element svg

Fragment (nebo také zlomek) SVG dokumentu definuje norma jako libovolný počet grafických prvků (elementů) obsažených v prvku svg. I když se mluví o zlomku, obsahuje všechny náležitosti potřebné ke korektnímu zobrazení. Fragment SVG dokumentu může existovat jako oddělený samostatný soubor (viz následující příklad), nebo může být zabudován uvnitř jiného rodičovského XML dokumentu (embedded inline).

<?xml version=“1.0″ standalone=“no“?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“
  „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=“5cm“ height=“4cm“ version=“1.1″
     xmlns=“http://www.w3.org/2000/svg“>
  <title>Samostatny SVG soubor</title>
  <rect x=“0.5cm“ y=“0.5cm“ width=“2cm“ height=“1cm“/>
  <rect x=“0.5cm“ y=“2cm“ width=“1cm“ height=“1.5cm“/>
  <rect x=“3cm“ y=“0.5cm“ width=“1.5cm“ height=“2cm“/>
  <rect x=“3.5cm“ y=“3cm“ width=“1cm“ height=“0.5cm“/>
  <!– obrys kreslici plochy –>
  <rect x=“.01cm“ y=“.01cm“ width=“4.98cm“ height=“3.98cm“
        fill=“none“ stroke=“blue“ stroke-width=“.02cm“ />
</svg>

Zobrazení SVG fragmentu – základní struktury všech SVG obrázků (originální SVG, cca 1 kB)

Elementy svg se mohou objevit i uvnitř jiných SVG fragmentů, jinými slovy, je možné jejich vícenásobné vnořování. Lze toho využít například k nastavení vlastního souřadnicového systému pro úsek vnořeného kódu.

Jednotky: Povšimněte si prosím, že můžete používat v podstatě libovolné jednotky – zcela stejně, jako v CSS, tedy px, mm, cm, pt, em…

Atributy:

• x, y (souřadnice) – tyto atributy znamenají přesně to, co vyjadřuje jejich název (počátek souřadnic v levém horním rohu), vcelku logicky nemají význam pro vnější svg fragment
• width (délka) – šířka kreslicího plátna; pokud není definována, použije prohlížeč hodnotu 100 % (výchozí nebo též default hodnota)
• height (délka) – výška kreslicího plátna; pokud není definována, použije prohlížeč hodnotu 100 % (výchozí nebo též default hodnota)
• viewBox (x y šířka výška) – atributy umožňují změnit souřadnicový systém uvnitř SVG fragmentu takto: x, y nastaví počátek virtuálních souřadnic (vlevo nahoře) uvnitř SVG fragmentu, šířka a výška pak určují rozsah virtuálních souřadnic (ideální například pro „napasování“ grafiky do obdélníku o rozměrech, které předem nejsou známé – výborný prostředek k vytváření grafiky přizpůsobující se velikosti okna prohlížeče!); takový virtuální souřadnicový systém lze vytvořit též uvnitř elementů symbol a image (aplikuje-li se v SVG fragmentu tento atribut, pak se další rozměrové údaje v rámci tohoto bloku už většinou zapisují bez jednotek, jak si ostatně můžete povšimnout i v dalších ukázkách SVG dokumentů)
• preserveAspectRatio (typ_přizpůsobení_rozměrů) – použitím „viewBox“ může dojít i k neproporcionální deformaci, proto máte k dispozici tento parametr, kterým můžete nastavit chování prohlížeče: „none“ umožní deformaci souřadnic a hodnota, například „xMidYMid“, přizpůsobí grafiku proporcionálně, tak, aby byla vidět celá, a navíc ji vycentruje v obou směrech (toto je výchozí a ve většině případů také nejvhodnější hodnota)

Následující příklad ukazuje, jak můžete umístit grafiku, která se přizpůsobí velikosti obrazovky, takže ji uživatel uvidí zcela správně i na svém mobilu, který může mít obraz široký řekněme 240 a vysoký 320 pixelů. Viditelná kresba v tomto případě musí samozřejmě obsahovat body s virtuálními souřadnicemi 0 až 100 (grafik si je může snadno představit jako procenta z celkové velikosti plátna).

<svg viewBox=“0 0 100 100″ version=“1.1″
     xmlns=“http://www.w3.org/2000/svg“>

V následujícím případě se identická kresba naopak zdeformuje tak, aby zcela pokryla plochu virtuálního okna s pevnou velikostí 240 x 320 obrazových bodů:

<svg width=“240px“ height=“320px“ version=“1.1″
     viewBox=“0 0 100 100″ preserveAspectRatio=“none“
     xmlns=“http://www.w3.org/2000/svg“>

Seskupení – prvek g

Element g může sloužit jako schránka (container) pro skupinu vnořených objektů. Silně se doporučuje jeho použití ve spojení s elementy desc a title, k vytvoření strukturovaného a dobře zdokumentovaného grafického dokumentu. Což, mimo jiné, umožní zpřístupnit takové dokumenty i handicapovaným osobám (specializovaný prohlížeč by například mohl navigovat „hlasem“), ale může se velmi dobře uplatnit třeba i při popisu geografických objektů na SVG mapě a podobně.

Pomocí důvěrně známého atributu id se na grafické elementy můžete odkazovat, například pro potřeby deklarativních animací nebo skriptování.

Knihovní sekce – prvek defs

Kontejnerový prvek defs pro elementy, na které se budeme později odkazovat. Jeho použití není striktně vyžadováno, ale silně se doporučuje. Jeho chování a funkce je obdobná prvku g.

Představte si například prvek „P“, který se odkazuje na nějaký předdefinovaný knihovní objekt „K“ – pokud knihovnu s prvkem „K“ dáte do sekce defs, která bude umístěna ihned na počátku rodičovského prvku elementu „P“, umožníte tím prohlížeči efektivnější streamování.

Knihovní objekt – prvek symbol

Prvek symbol definuje elementy pro vícenásobné použití (též knihovní prvky nebo prostě symboly), které jsou jednoznačně identifikovány dobře známým atributem id="jmeno_symbolu". Předdefinovaný prvek lze později mnohonásobně vkládat do kresby pomocí elementu use.

Ze strukturního hlediska je symbol podobný objektu g s následujícími zásadními rozdíly:

• symbol sám o sobě se nikdy nevykreslí, pouze jeho instance (tedy odkazy s použitím prvku use)
• symbol má (výše popsané) atributy viewBox a preserveAspectRatio
• symbol lze používat v různých velikostech pomocí atributů (x, y, width, height) v prvku use

Použití objektu z knihovny – use

Element use odkazuje na knihovní prvek (symbol), který se zobrazí na místě grafické struktury, kde byl prvek use použit. Vznikne jakási virtuální kopie příslušného prvku symbol, která se ale neobjeví ve struktuře SVG DOM, tam zůstává pouze samotný objekt use!

Atributy:

• xlink:href – URI reference na symbol (knihovní objekt)
• x, y – poloha
• width, height – šířka a výška; tyto nepovinné atributy jsou použity ke změně velikosti vkládaného symbolu

Pozor, animujete-li knihovní objekt (symbol), všechny jeho instance by při správné implementaci měly zůstat animované! (Ideální příležitost pro kreativce a dokonalý „prubířský kámen“ pro prohlížeče…)

Obrázek – element image

Prvek image pro vložení obrázku do této kapitoly zdánlivě nepatří, jenže podle SVG normy můžete do grafického obsahu vložit nejen PNG, JPEG ale i další SVG soubor (v tomto případě jsou animace ignorovány). Vzhledem ke komplexnosti takové úlohy se určitě jedná o další výbornou příležitost k testování prohlížečů – používejte velmi opatrně. V normě není zmíněn formát GIF, ale jisté je, že minimálně ASV (Adobe SVG Viewer, viz Průvodce SVG – grafické editory) jej ve statické podobě podporuje včetně průhlednosti.

Atributy:

• x, y (souřadnice) – umístění
• width (délka) – šířka
• height (délka) – výška
• preserveAspectRatio (typ_přizpůsobení_rozměrů) – vkládaný obraz může mít jiné proporce, tímto parametrem lze nastavit jeho rozměrové přizpůsobení: „defer“ znamená použití hodnoty „preserveAspectRatio“ z vkládaného SVG, „none“ umožní deformaci obrazu, výchozí hodnota „xMidYMid“ přizpůsobí grafiku proporcionálně, tak, aby byla vidět celá, a navíc ji vycentruje v obou směrech

Při vkládání SVG se stejnojmenné parametry externího svg elementu ignorují a ty v elementu image dostávají přednost.

Výsledkem načtení a zpracování obrázku je vždy barevný model RGBA (čtvrtý kanál pro průhlednost), který je standardním interním modelem v SVG.

Zobrazovací a vykreslovací model

SVG používá takzvaný „malířův algoritmus“ (painters model). Představu o počítačovém provedení si lze vytvořit snadno, stačí si uvědomit, že prvky z fragmentu SVG se vykreslují v přirozeném pořadí, tak jak jsou v XML dokumentu za sebou (to znamená, že první objekt bude opticky vespod, v pozadí – pozdější prvky jej překrývají).

Všichni už víme, že SVG zdaleka nejsou jen vektorové tvary v kombinaci s obrázky, jeho možnosti jdou ještě o třídu dál. Aby mohly prohlížeče správně vytvořit všechny speciální efekty, měly by aktuální element (případně celou skupinu elementů) vykreslit nejdříve v pomocném bloku paměti.

Mějte též stále na paměti, že se vždy pracuje v modelu RGBA – tedy RGB barvy plus takzvaný „alfa kanál“ pro uložení průhlednosti každého bodu. To je nutné nejen kvůli neomezeným možnostem maskování v normě SVG, ale i pro implementaci efektů (SVG filters). Filtry jsou totiž aplikovány právě na tuto pomocnou paměť. Obrovskou pružnost a kreativitu znásobuje fakt, že filtry můžete aplikovat nejen na kresbu, ale třeba i na kanál s průhledností.

Norma SVG explicitně nařizuje prohlížečům použití pomocné obrazové paměti pro prvek g. (Obsah bufferu je přitom inicializován na průhlednou černou barvu.) Až po kompletním vykreslení všech objektů ve skupině se na toto pomocné „plátno“ aplikují různé efekty, a to přesně v následujícím pořadí:

1. bitmapové filtry
2. masky
3. průhlednost

Prohlížeče mají ztíženou úlohu tím, že g může být vnořeno mnohonásobně. Zdůrazňuji tento důležitý moment, jelikož jde o základní princip v SVG a je nutné, abyste jej měli vždy na paměti.

Pravidla vykreslování objektu

Nejdříve se vykresluje výplň, poté tah a nakonec případné značky (speciální prvek SVG normy určený pro vyznačování bodů ve kresbě). Každá výplň a tah může přitom mít libovolnou na sobě nezávislou průhlednost.

Podporovány jsou následující typy vyplňování použitelné pro výplně i tahy:

• plné barvy
• přechody barev lineární a kruhové
• vzorky (textury)

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

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