Hlavní navigace

Vektorový grafický formát SVG

2. 8. 2007
Doba čtení: 14 minut

Sdílet

V dnešním článku se budeme zabývat dalším známým a k tomu velmi dobře navrženým vektorovým formátem. Jedná se o souborový formát nazvaný Scalable Vector Graphics, neboli SVG, který je založený na značkovacím jazyku XML. Uvidíme, že díky dobře navržené struktuře může být i XML soubor překvapivě malý.

Obsah

1. Vektorový grafický formát SVG
2. Nejdůležitější vlastnosti grafického formátu SVG
3. Cesty
4. Základní geometrické tvary
5. Texty
6. Animace
7. Podpora skriptování
8. Literatura a odkazy na Internetu
9. Obsah následující části tohoto seriálu

1. Vektorový grafický formát SVG

V předchozích částech tohoto seriálu jsme si popsali již velkou část grafických formátů, které sloužily pro ukládání informací o grafických objektech reprezentovaných ve vektorové podobě (tj. popisem jejich geometrie). Každý z popisovaných formátů byl určen pro poněkud odlišné účely. Grafický formát HPGL/PLT se používá především u perových i rastrových plotterů a velkoformátových tiskáren, formát DXF plní úlohu nepsaného standardu při přenosu vektorových informací mezi aplikacemi typu CAD a CAM, formát SLD slouží pro velmi kompaktní popis vektorových informací určených pro zobrazení na obrazovce a konečně metaformát PostScript je určen především pro popis tiskové strany a používá se většinou v aplikacích pro desktop publishing (DTP). Společnou vlastností všech těchto formátů je poměrně značné stáří, jejich vznik je datován ještě před masivním rozšířením Internetu a především služby WWW.

Pojďme si nyní říci, proč vlastně tento relativně nový vektorový formát vznikl a jaké jsou oblasti jeho použití. S postupným rozšiřováním BBS, komunitních sítí a následně Internetu, který nabízel službu Gopher a především WWW, se zvyšovaly i požadavky uživatelů na přenos, zobrazování a sdílení grafických informací. Tato potřeba dále vzrostla s rostoucí komercionalizací Internetu, protože bylo zapotřebí rozumným způsobem přenášet a zobrazovat reklamu. V oblasti rastrové grafiky byl výběr grafického formátu poměrně jednoduchý, protože již před rozšířením služby WWW se na síti Compuserve i na BBS používal grafický formát GIF, který byl v pozdější době částečně nahrazen formáty JPEG a PNG (o „kauze GIF“ jsem psal před rokem v první části tohoto seriálu).

Mnohem složitější je však situace okolo grafiky vektorové, která se paradoxně na WWW hodí mnohem více než grafika rastrová (například proto, že v samotných HTML stránkách je možné měnit velikost písma a stránka se automaticky znovu zalomí, ovšem rastrové obrázky mají stále stejnou velikost, nehledě na obecně menší nároky na kapacitu linek u grafiky vektorové). Adeptů na standard v oblasti webové vektorové grafiky nebylo a není málo. Mezi neúspěšné formáty patří WML, málo rozšířený je také DWF (formát navržený firmou AutoDesk pro sdílení výkresů na webu), všeobecně se neujalo ani využití DXF či PostScriptu. Částečným řešením – a nutno říci, že pro mnoho oblastí zdaleka ne špatným – je využití Flashe, jedná se však o uzavřený formát, což omezuje tvorbu grafických editorů, prohlížečů i pluginů do webových prohlížečů, které by tento formát podporovaly.

Vektorový grafický formát SVG (Scalable Vector Graphics) byl navržen právě pro oblast webové grafiky, není to však zdaleka jediná oblast, ve které je možné se s tímto formátem setkat. Právě naopak: tento formát se postupně stává průmyslovým standardem pro přenos vektorové grafiky mezi různými platformami i aplikacemi. Dochází také k integraci knihoven pro práci se SVG do grafických uživatelských rozhraní operačních systémů. Vzhledem k tomu, že se implementace celého SVG ukázala jako poměrně problematická, vznikly dvě podmnožiny SVG (SVG Basic a SVG Tiny), přičemž se předpokládá, že aplikace určené například pro mobilní zařízení s omezeným výpočetním výkonem a menší kapacitou paměti budou používat právě tyto méně náročné, ale pro mnoho služeb více než dostačující, podmnožiny celého standardu.

4901
Obrázek 1: Vektorový obrázek zobrazený v prohlížeči Adobe SVG Viewer, který pracuje i jako zásuvný modul pro webové prohlížeče

2. Nejdůležitější vlastnosti grafického formátu SVG

Jaké vlastnosti nám grafický formát SVG přináší z uživatelského hlediska? Především se jedná o plnohodnotný vektorový formát podporující základní geometrické tvary, cesty (obecné křivky), pokročilou práci s textem, průhlednost apod. Jedná se o vlastnosti, které můžeme v prakticky stejné podobě najít například i v PostScriptu či Portable Document Formatu (PDF). SVG však umožňuje i tvorbu animací a především interaktivitu – SVG tedy nemusí sloužit pouze k zobrazování statických či animovaných obrázků, ale může se nad ním vybudovat například interaktivní mapový portál, geografický informační systém, jednodušší hry, grafické editory integrované do HTML stránek apod. To vše bez nutnosti vázat se na jednoho dodavatele technologie, jeden prohlížeč či platformu. SVG soubory je možné komprimovat pomocí GZIPu a tím dále snížit velikost celého souboru, což se příznivě projeví zejména při pomalejším síťovém připojení.

Jaká je programová (softwarová) podpora tohoto formátu? Pro SVG jsou v současnosti dostupné pluginy (zásuvné moduly) do webových prohlížečů a rozšiřují se webové prohlížeče, které SVG podporují nativně, tj. bez nutnosti instalace zásuvného modulu. Prakticky všechny významné vektorové editory dnes SVG podporují. Jedná se jak o komerční produkty (Adobe Illustrator, CorelDraw, Xara pro Linux, Sketsa…) i o programy šířené jako open source (skvělý Inkscape, Sodipodi, Scribus…). Taktéž existuje mnoho programů, které dokáží SVG importovat či exportovat (OpenOffice.org, FreeMind, animační programy…). Z knihoven, které práci se SVG podporují, můžeme jmenovat Batik SVG Toolkit, na kterém je založen i výše zmiňovaný vektorový grafický editor Sketsa.

SVG je zajímavý i z programátor­ského hlediska. Jedná se totiž o XML aplikaci, tj. grafické objekty i přidružené informace (například animace) jsou uloženy v XML formátu odpovídajícímu oficiálně vydané specifikaci. Každý SVG dokument je možné před vlastním zpracováním zkontrolovat na validitu, což zjednodušuje další práci. Díky XML je možné (s využitím DOM – Document Object Modelu) měnit, přidávat či ubírat jednotlivé uzly stromu, ze kterého se dokument skládá a ovlivňovat tak výslednou podobu kresby.

To však není zdaleka vše – DOM lze ovládat programově, je možné reagovat na různé události, které při práci se SVG dokumentem vzniknou (kliknutí na grafický prvek apod.). Pro tento účel se typicky používají skriptovací programovací jazyky, například JavaScript, ale existuje i programové rozhraní pro další (kompilované) jazyky včetně Javy. Práce s XML se v mnohém podobá skriptování HTML a CSS, takže přechod mezi těmito technologiemi je velmi snadný.

V dalších kapitolách si některé vlastnosti SVG zevrubněji popíšeme, velmi podrobné informace je možné získat i na adrese interval.cz/se­rialy/kurz-svg-tvorba-vektorove-grafiky-v-xml/.

4902
Obrázek 2: Veškeré kresby zpracovávané v programu Inkscape jsou ukládány ve formátu SVG

3. Cesty

Základním objektem pro tvorbu vektorových obrázků jsou v případě SVG takzvané cesty (paths). Tento pojem již známe z popisu PostScriptu. Cestou je myšlena polyčára složená z úseček, kruhových i eliptických oblouků a Bézierových kvadratických a kubických křivek. Cesta může být vykreslena různým způsobem, je možné měnit barvu i styl čáry, způsob zakončení lomených čar, tloušťku vykreslované stopy apod. Cestu je také možné vyplnit, přičemž je podporována průhlednost.

Vzhledem k tomu, že je SVG určené i pro síťové aplikace, ve kterých je mnohdy kritický objem dat (delší přenosové časy), jsou jednotlivé segmenty cesty zapisovány v extrémně krátké formě: typ každého segmentu (úsečka, oblouk, Bézierova křivka) je určen jedním písmenem, mezi číselnými hodnotami nemusí být v některých případech vložen žádný oddělovač (tím může být znaménko) a jsou podporovány jak absolutní, tak i relativní posuny, což vede ke zmenšení rozsahu hodnot a tím i délky řetězců reprezentujících čís­la.

4903
Obrázek 3: Kresba, ve které jsou použity cesty pro vykreslení šipek i červených bodů

Na třetím obrázku je zobrazena kresba obsahující text, dvě elipsy a dvě cesty. Velikost obrázku po rasterizaci a uložení do úsporného formátu PNG je rovna 13kB, původní dokument ve formátu SVG má velikost pouhých 1250 bytů bez komprimace. SVG je možné libovolně zvětšovat, natáčet apod. bez ztráty kvality, zatímco PNG má fixní rozlišení pouhých 400×208 pixelů, což je vhodné maximálně pro webovou grafiku, ale pro kvalitní tisk zcela jistě ne. Pro zajímavost si uveďme, jak vypadal původní (ručně napsaný) dokument:

<?xml version="1.0"?>
<!-- Generator: vim 6.0 -->
<!-- Author: Pavel Tisnovsky -->
<svg width="100%" height="100%" viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="none" stroke="blue" stroke-width="1">
<ellipse cx="20" cy="35" rx="5" ry="20"/><ellipse cx="80" cy="35" rx="5" ry="20"/>
<ellipse cx="120" cy="35" rx="5" ry="20"/><ellipse cx="180" cy="35" rx="5" ry="20"/>
</g>
<path fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
d="M30 35H70M60 30L70 35L60 40M130 35H170M160 30L170 35L160 40"/>
<g font-family="Arial" font-size="10" stroke="none" fill="blue">
<text x="16" y="12">t0</text><text x="76" y="12">t1</text>
<text x="116" y="12">t0</text><text x="176" y="12">t1</text></g>
<path fill="none" stroke="red" stroke-width="3" stroke-linecap="round"
d="M20 60h0M20 70h0M20 80h0M20 90h0M15 65h0M15 75h0M15 85h0M25 65h0M25 75h0M25 85h0
M80 60h0M80 70h0M80 80h0M80 90h0M75 65h0M75 75h0M75 85h0M85 65h0M85 75h0M85 85h0
M120 65h0M130 65h0M140 65h0M150 65h0M160 65h0M170 65h0M180 65h0
M120 75h0M130 75h0M140 75h0M150 75h0M160 75h0M170 75h0M180 75h0
M120 85h0M130 85h0M140 85h0M150 85h0M160 85h0M170 85h0M180 85h0"/>
</svg> 

4. Základní geometrické tvary

Teoreticky je sice možné pro veškerou kresbu použít pouze cesty, SVG však umožňuje i práci se základními geometrickými tvary, se kterými se snáze pracuje (na druhou stranu je zápis pomocí cest kratší). Mezi tyto tvary patří obdélník, kružnice, elipsa, úsečka, polyčára (lomená čára) a uzavřený polygon. Podobně jako v případě cest, i u těchto tvarů je možné nastavit mnoho způsobů (stylů) vykreslení, včetně stylu okrajů, vnitřní výplně, průhlednosti a filtrů, které jsou na vykreslované objekty aplikovány při rasterizaci. Změnu tvarů je možné provádět programově (pomocí DOM) a naopak – ke každému tvaru je možné zaregistrovat funkce, které se provedou při výskytu nějaké události, například při kliknutí tlačítkem myši nad daným tvarem:

<circle onclick="circle_click(event)" cx="300" cy="225" r="100" fill="red"/> 

4904
Obrázek 4: Kombinace kružnic (základní tvar), textu a cest

Čtvrtý obrázek vznikl rasterizací SVG souboru o délce pouhých 920 bytů před komprimací. Výsledný PNG soubor má při rozlišení 400×328 pixelů délku 21920 bytů:

<?xml version="1.0"?>
<!-- Generator: vim 6.0 -->
<!-- Author: Pavel Tisnovsky -->
<svg width="100%" height="100%" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="none" stroke="blue" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path stroke="black" d="M30 87V60L80 40V67"/>
<circle stroke="red" cx="30" cy="60" r="27"/><circle stroke="red" cx="80" cy="40" r="27"/>
<path d="M25 30L30 20L35 30M30 20V30 60M52 20L50 10L60 12M50 10L80 40"/></g>
<g fill="red" stroke="none">
<circle cx="30" cy="60" r="3"/><circle cx="80" cy="40" r="3"/></g>
<g font-family="Arial" font-size="10" stroke="none" fill="blue">
<text fill="black" x="32" y="75">r1</text>
<text fill="black" x="82" y="55">r2</text>
<text x="15" y="58">m1</text><text x="82" y="38">m2</text>
<text x="25" y="18">v1</text><text x="45" y="8">v2</text> </g>
</svg> 

5. Texty

Ve formátu SVG je možné vytvářet i různé nápisy či delší texty pomocí elementu text (například nápověda k programu Inkscape je vytvořena v SVG, nejde o textový dokument). Styl textu, tj. jeho barva, použitý font, velikost atd. se specifikuje podobným způsobem, jako v CSS, což opět zjednodušuje práci vývojářům, kteří již znají technologie HTML a CSS (ve skutečnosti se v SVG používá právě CSS 2). SVG samozřejmě podporuje Unikód, ostatně jako všechny XML dokumenty. Zajímavou vlastností – alespoň ve vztahu ke grafickému formátu – je možnost přidání vysvětlujícího (normálně neviditelného) textu k mnoha elementům, čehož je možné využít například při zpracovávání kresby indexovacími roboty. Ve své podstatě se jedná o vyspělejší variantu atributu alt použitého v HTML u obrázků.

4905
Obrázek 5: Diagram obsahující mnoho textů a několik cest

Kód k předchozímu obrázku:

<?xml version="1.0"?>
<!-- Generator: vim 6.0 -->
<!-- Author: Pavel Tisnovsky -->
<svg width="100%" height="100%" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 10H40V60H10ZM50 10H80V60H50ZM10 80H80v20H10ZM110 160h80v20h-80Z
M110 120h80v20h-80ZM110 80h80v20h-80ZM110 60h80v-50h-80ZM110 40h80"/>
<path stroke="blue" d="M10 160h70v20H10ZM80 170h30M70 160v-30h40M60 160v-40h40v-30h10
M50 160v-50h40v-60h20M40 160v-60"/>
<path stroke="red" d="M25 60v20M65 60v20M80 35h30M150 60v20M150 100v20M150 140v20"/></g>
<g fill="none" stroke="red" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M25 60h0M25 80h0M65 60h0M65 80h0M80 35h0M110 35h0M150 80h0M150 60h0M150 100h0
M150 120h0M150 140h0M150 160h0"/><path stroke="blue" d="M40 100h0M40 160h0M50 160h0M60
160h0M70 160h0M110 50h0M110 90h0M110 130h0M110 170h0M80 170h0"/></g>
<g font-family="Arial" font-size="10" stroke="none" fill="black">
<text fill="blue" x="30" y="173">control</text>
<text x="25" y="88">memory</text><text x="25" y="98">allocation</text>
<text x="12" y="20">dead</text><text x="12" y="30">parti-</text>
<text x="12" y="40">cle</text><text x="12" y="50">list</text>
<text x="52" y="20">active</text><text x="52" y="30">parti-</text>
<text x="52" y="40">cle</text><text x="52" y="50">list</text>
<text x="135" y="173">output</text><text x="125" y="133">image buffer</text>
<text x="120" y="93">transformation</text><text x="116" y="23">particle position</text>
<text x="128" y="33">modification</text><text x="128" y="53">rendering</text></g>
</svg> 

6. Animace

Mnoho atributů v SVG, například umístění geometrických tvarů, jejich barvu či průhlednost, je možné průběžně měnit v čase a vytvořit tak animaci. Animace je zapsána podobným způsobem, jako například v částečně konkurenčním formátu Flash. Popsány jsou pouze klíčové stavy objektů, mezistavy se dopočítávají automaticky při vykreslování animace (možné jsou skokové přechody, lineární přechody a přechody zadané Bézierovými křivkami). Kromě deklarativně zapsané animace (tento způsob využívají především animační programy) lze samozřejmě využít i skripty, které pomocí DOM postupně mění parametry zobrazovaných grafických objektů. Následuje příklad změny jednoho atributu (konkrétně průhlednosti) geometrického objektu kružnice:

<circle>
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</circle> 

7. Podpora skriptování

O možnostech skriptování jsem se již zmiňoval v předchozích kapitolách. Vzhledem k tomu, že je celá vektorová kresba v paměti počítače reprezentována stromem a obraz tohoto stromu je uložen ve formátu XML, je možné pomocí DOM (Document Object Model) manipulovat s jednotlivými uzly stromu, podobně jako je možné manipulovat s jednotlivými elementy HTML stránky („dynamické HTML“). Ke grafickým objektům lze zaregistrovat callback funkce a vytvářet tak kresby, které reagují na akce prováděné uživatelem.

V geografických informačních systémech se například může zobrazit mapa s vykreslenými parcelami. Po kliknutí na parcelu se (bez provedení nového dotazu na server) zobrazí podrobnější informace o parcele: její vlastník, výměr apod. Zařídit tuto funkcionalitu je poměrně jednoduché, protože dané informace mohou být uloženy například ve formě pole dostupného z JavaScriptového programu (samotné pole je samozřejmě dynamicky vygenerováno serverem, ovšem pouze při prvním zobrazení stránky obsahující SVG). Oproti systému založenému na rastrových obrázcích a neustálých dotazech na server (i pomocí AJAX) se jedná o mnohem rychlejší a uživatelsky příjemnější aplikaci.

Nejčastěji je pro dynamickou manipulaci se SVG používán JavaScript a to zejména z toho důvodu, že se jedná o programovací jazyk dostupný z prakticky jakéhokoli webového prohlížeče. V následujících částech tohoto seriálu si některé možnosti skriptování ukážeme.

UX DAy - tip 2

8. Literatura a odkazy na Internetu

  1. Scalable Vector Graphics (SVG) 1.0 Specification,
    (W3C Recommendation)
  2. Scalable Vector Graphics (SVG),
    XML Graphics for the Web:
    http://www.w3­.org/Graphics/SVG/
  3. Cascading Style Sheets, level 2,
    B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998.
  4. Document Object Model (DOM) Level 1 Specification,
    V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R. Sutor, C. Wilson, L. Wood, editors, 1 October 1998.
  5. Document Object Model (DOM) Level 2 Core Specification,
    A. Le Hors, P. Le Hégaret, L. Wood, G. Nicol, J. Robie, M. Champion, S. Byrne, editors, 13 November, 2000.
  6. SMIL Animation,
    P. Schmitz, A. Cohen, editors, 31-July-2000.
  7. XML Linking Language (XLink),
    S. DeRose, E. Maler, D. Orchard, editors, 20 December 2000.
  8. Extensible Markup Language (XML) 1.0 (Second Edition),
    T. Bray, J. Paoli, C.M. Sperberg-McQueen, E. Maler, editors, 6 October 2000.
  9. XML Base,
    J. Marsh , editor, 20 December 2000.
  10. Namespaces in XML,
    T. Bray, D. Hollander, A. Layman, editors, 14 January 1999.
  11. Batik SVG Toolkit,
    http://xmlgrap­hics.apache.or­g/batik/
  12. SVG-Wiki,
    http://wiki.svg­.org/Main_Page
  13. Wikipedia EN: Scalable Vector Graphics,
    http://en.wiki­pedia.org/wiki/Sca­lable_Vector_Grap­hics
  14. Wikipedia CZ: Scalable Vector Graphics,
    http://cs.wiki­pedia.org/wiki/Sca­lable_Vector_Grap­hics
  15. Kurz SVG – tvorba vektorové grafiky v XML,
    http://interval­.cz/serialy/kurz-svg-tvorba-vektorove-grafiky-v-xml/

9. Obsah následující části tohoto seriálu

V další části seriálu o grafických formátech a metaformátech si podrobněji popíšeme způsob zápisu cest a základních geometrických tvarů ve formátu SVG. Také si ukážeme způsob začlenění SVG dokumentu do HTML stránky, komprimaci SVG dokumentu a další často prováděné operace.

Byl pro vás článek přínosný?

Autor článku

Vystudoval VUT FIT a v současné době pracuje na projektech vytvářených v jazycích Python a Go.