SVG tvůrce

stručný průvodce SVG grafikou

Co je SVG

SVG je značkovací jazyk pro tvorbu vektorové grafiky. V jazyce HTML zápisem různých elementů do zdrojového kódu vkládáme jednotlivé prvky stránky. Elementem <p> vložíme odstavec, elementem <h1> vložíme nadpis, element <input> vytvoří formulářový prvek. Podobné je to i v jazyce SVG s tím rozdílem, že zápisem elementů vkládáme jednotlivé grafické prvky jako čáry, kružnice, obdélníky a další součásti grafiky tvořící výsledný obraz. Například elementem <circle> vložíme do obrazu kruh, elementem <line> čáru a zápisem elementu <rect> vytvoříme obdélník. Atributy jednotlivých elementů pak určují danému grafickému prvku vlastnosti jako je zejména umístění a barva.

Nyní příklad. Bude-li součástí zdrojového kódu následující zápis, vytvoříme kruh se středem umístěným 100px od levého okraje obrazu, 100px od horního okraje obrazu, o poloměru 50px. Kruh bude mít modrou barvu a černý okraj:

<circle cx="100px" cy="100px" r="50px" fill="blue" stroke="black" />

SVG používá syntaxi XML

Jestliže se rozhodneme vytvářet SVG grafiku ručním zápisem, je třeba mít na paměti, že zdrojový kód SVG je XML dokumentem a že tedy musíme respektovat syntaktická pravidla, která jsou s formátem XML svázána. Pokud jsme již někdy vytvářeli XML dokumenty nebo webové stránky ve formátu XHTML, tak to pro nás nebude jistě představovat žádný problém. V opačném případě je nutno připomenout alespoň základní pravidla zápisu XML dokumentu:

  1. XML je citlivé na velikost písmen (case sensitive)
    V praxi to znamená, že element zapsaný jako <circle> není totéž co <CIRCLE> . Pouhá záměna jednoho písmene v elementu na velké způsobí chybu. V SVG zpravidla zapisujeme elementy malými písmeny, existují ale vyjímky kde jsou velká písmena použity, např u elementu <clipPath> nebo <feGaussianBlur>
  2. Každý element musí být vždy ukončen
    Je-li element zapisován pomocí párových tagů, musí po počátečním tagu následovat tag ukončovací, například po tagu <g> musí následovat tag </g>. Element musí být ukončen i tehdy je-li zapisován nepárovými tagy! To je řešeno vložením lomítka před znak > Příklad vidíte na této stránce (pod druhým odstavcem)
  3. Elementy se nesmí křížit
    Křížením elementů máme na mysli situaci, kdy v obsahu elementu je přítomen počáteční tag elementu jiného, přičemž jeho koncový tag je mimo element ve kterém je přítomen jeho počáteční tag. Tento poněkud krkolomný popis osvětlí příklad křížení z HTML: <b>text<i>text</b>text</i>
  4. XML musí mít kořenový element
    Veškerý obsah XML dokumentu musí být vnořen do elementu kořenového. Ten stojí na nejvyšší úrovni. Mimo něj může být jen tzv. xml prolog a definice typu dokumentu (DOCTYPE). V XML obecně může mít kořenový element jakýkoliv název, avšak v případě SVG grafiky, to může být pouze element <svg>.
  5. Hodnoty atributů musí být uzavřeny do uvozovek
    Zápisy z HTML jako např. <hr noshade> jsou v XML nepřípustné. Předchozí chybný zápis by byl syntakticky správný, kdyby měl takovýto tvar: <hr noshade="noshade"> Zde už je splněna podmínka uzavření hodnoty atributu do uvozovek.

Vytváření SVG dokumentu

Po přečtění předchozích odstavců jsme vybaveni minimem nezbytné teorie a můžeme si tedy popsat základní strukturu SVG dokumentu, a pokusit se vytvořit velice jednoduchý soubor svg, jenž po svém otevření bude zobrazovat modrý kruh.

Na začátku každého SVG dokumentu musí být XML prolog:

<?xml version="1.0" encoding="utf-8"?>

Za prologem následuje definice typu dokumentu:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

Pak již přichází na řadu kořenový element svg, ve kterém jsou vnořeny všechy ostatní elementy jazyka svg. Tento element má atribut xmlns, jehož obsahem je identifikátor jmenného prostoru svg:

<svg xmlns="http://www.w3.org/2000/svg">

My budeme chtít, aby součástí obrazu byl již zmíněný modrý kruh. Ten nadefinujeme vložením elementu circle dovnitř elementu svg:

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="100px" cy="100px" r="50px" fill="blue" stroke="black" /> </svg>

Celý zdrojový kód SVG dokumentu bude tedy vypadat takto:

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="100px" cy="100px" r="50px" fill="blue" stroke="black" /> </svg>

Kód musíme uložit do souboru s příponou .svg . Při ukládání je nanejvýš vhodné respektovat kódování stanovené v XML prologu (encoding="utf-8").

Nyní již zbývá prohlédnout si výsledek a svg soubor otevřít. K tomu můžeme použít webové prohlížeče, ale jen ty s vestavěnou podporou SVG jako je např. Mozilla nebo Opera, pokud nejde o příliš staré verze. Mozilla 2.0 nebo Opera 10 si se souborem bez problému poradí. Prohlížeče nemusí být nastaveny jakožto výchozí pro otevírání svg souborů, pak je nutné je otevírat přes nabídku prohlížeče Soubor -> Otevřít. SVG obrázek je možné si nechat zobrazit i pomocí editoru svg jako je Inkscape.

 

xhtml_valid_icon css_valid_icon
texty, webdesign, programování: Jakub Kosek