Průvodce SVG

Rád bych vám nastínil možnosti nejmodernějšího webového standardu pro vektorovou grafiku a ukázal některé jeho stále skryté půvaby. SVG totiž nabízí v podstatě ničím neomezenou grafickou kreativitu, jeho zdrojový kód přitom lze upravovat podobně jako klasické HTML. SVG byl vyvíjen za spolupráce mnoha lidí z praxe, díky čemuž má velmi dobré předpoklady pro jeho praktičnost v reálném nasazení na internetu.

Trocha teorie

Nejdříve špetka suché teorie: SVG je jazyk, který popisuje dvojrozměrnou grafiku pomocí XML.. Předpokládám, že většina z vás má alespoň základní představu o HTML a CSS – s trochou nadsázky lze také říci, že zápis SVG je strukturou podobný právě HTML, ovšem se specifickými grafickými elementy. Jak HTML, tak SVG jsou vlastně v moderním pojetí speciálními případy XML.

Níže vidíte zdrojový kód jednoduché grafiky (vykresleny budou dva barevné mnohoúhelníky) v souboru se standardní příponou „.svg“ (viz ukázka):

<?xml version=“1.0″?>
<svg xmlns=“http://www.w3.org/2000/svg“>
    <title>Hvezda a sestiuhelnik</title>
    <g transform=“scale(0.25)“>
        <polygon style=“fill:red; stroke:blue; stroke-width:10″
             points=“350, 75 379,161 469,161 397,215
                     423,301 350,250 277,301 303,215
                     231,161 321,161″ />
        <polygon style=“fill:lime; stroke:blue; stroke-width:10″
             points=“850, 75 958,137.5 958,262.5
                     850,325 742,262.6 742,137.5″/>
    </g>
</svg>

Grafické schopnosti

SVG definuje tři základní typy grafických objektů, a to vektorové tvary (vector graphic shapes), rastrové obrazy (raster images) a textové objekty. Tyto objekty mohou být samozřejmě různě seskupeny, formátovány pomocí atributů nebo stylů CSS a polohovány pomocí obecných prostorových transformací.

Objekty uvnitř elementu SVG jsou vykreslovány ve stejném pořadí, ve kterém jsou zapsány ve zdrojovém textu, přičemž mohou mít přesně definovanou průhlednost, ořezovou cestu (clip mask) nebo bitmapovou masku (alpha masks). Významných úspor paměti lze dosáhnout použitím symbolů, kdy se jednou definovaný vzorový objekt použije mnohonásobně pomocí odkazů.

Na libovolný grafický element lze aplikovat velmi flexibilní bitmapové efekty. Přitom je takový element stále v původní vektorové podobě a teprve při vykreslování v prohlížeči (on the client side) je například rozostřen. Můžete kupříkladu napsat filtr, který, aplikován na libovolný element, vytvoří prostorový stínovaný vzhled s vrženým měkkým stínem (pokud jste někdy pracovali s Photoshopem od v.5 vzpomeňte si na takzvané efekty vrstvy).

Text je text – textové informace uvnitř SVG grafiky zůstávají, stejně jako v HTML dokumentech, stále textem s možností fulltextového vyhledávání, nebo třeba kopírování vybraného textu do textového editoru. Na rozdíl od HTML lze ovšem velmi přesně zachovat tvar a formátování písma tak, že typografie bude stejná na libovolném počítači, kde si dokument budete prohlížet. SVG například exaktně definuje způsob, jak uložit tvary některých písmen (font subset) nebo všech znaků daného řezu písma (buď odděleně, nebo uvnitř souboru SVG) a pak je použít pro zobrazení na počítači, kde originální písmo nemusí být dostupné. Používat lze samozřejmě také různé exotické způsoby psaní, jako zprava doleva a podobně. Podporováno je i univerzální kódování UNICODE.

Animace a interaktivita

Je možno definovat tzv. deklarativní animace. To v praxi znamená, že máte k dispozici pohybující se grafiku, kterou nemusíte ošetřovat žádným programovým kódem (obdobně jako animovaný GIF v HTML běží bez dalších programových zásahů). Tento způsob animace je kompatibilní se standardem SMIL (Synchronised Multimedia Integration Language). Deklarativní animace byly zavedeny podle požadavků grafiků z praxe a mimo jiné umožňují naprosto bezproblémové přenášení animací mezi různými editačními aplikacemi.

Ovšem stále nám zbývá ještě jedna lahůdka, vlastnost, která přímo souvisí s XML základem SVG grafiky. Scripty na straně prohlížeče totiž mohou pomocí standardního rozhraní (DOM) naprosto libovolně měnit nebo dokonce vytvářet nové grafické objekty! Taktéž fungují standardní mechanismy událostí (events). Opět můžeme říci, že jde o obdobu HTML techniky, které se někdy říká dynamické HTML.

SVG znamená…

SVG je zkratkou anglického výrazu Scalable Vector Graphics:

• Scalable – zdůrazňuje možnost libovolného zmenšování či zvětšování bez ztráty kvality a detailů obrazu. Měřítko SVG obrazu může být kdykoli změněno podle potřeby, skript jej například může automaticky přizpůsobit velikosti obrazovky cílového počítače, nebo třeba displeji mobilního komunikátoru. Stejně tak lze stejný SVG vytisknout bez jakýchkoli „zubů“ na laserové tiskárně s vysokým rozlišením atd.
• Vector Graphics – vektorová grafika obsahuje matematicky definované geometrické objekty vytvořené pomocí linek a křivek, což dává internetové grafice v podání SVG téměř ničím neomezené možnosti, a to jak kreativity, tak co se týče uživatelské interaktivity.

Ukázka loga v SVG – celek

Ukázka loga v SVG – detail

Kreativní grafika stokrát jinak

Představme si hypotetický příklad internetového průvodce blíže neurčeným městem. V SVG vytvoříme podrobnou mapu, kterou si uživatel sám v prohlížeči zvětšuje a posouvá (bez jakékoli komunikace se serverem), přičemž po zvětšení neuvidí LEGO stavebnici, ale krásně hladké detailní vyobrazení konkrétního výřezu mapy. Dále si představte, že jeden každý grafický prvek (zcela libovolného tvaru) může mít přiřazen hyperlink (odkaz), návštěvník tedy může vizuálně ukazovat na půdorys, vybrat si například nějakou pamětihodnost a kliknutím skočit přímo na stránku daného objektu. To vše bez tvorby nějakých komplikovaných a nesmyslných obrazových map.

Nebo si nadefinuji SVG filtr vytvářející plastický efekt a aplikuji jej na titulek… Až doposud se takovéto titulky nahrazovaly obrázkem a jistě si sami živě představíte situaci grafika, nemajícího k dispozici SVG, který je nucen takovéto titulky textově aktualizovat. My ovšem ve stejné situaci pouze zaměníme několik písmenek uvnitř SVG objektu.

Od XML se také odvozuje další velmi perspektivní oblast využití v takzvaných podnikových aplikacích (Enterprise Graphics Solutions). Přednosti SVG se projeví v plné síle při grafické vizualizaci dat uložených v databázích (Data-Driven Graphics). Tuto vizualizaci lze provést nesrovnatelně elegantněji a snadněji než kdykoli dříve, třeba s využitím standardního mechanismu XSLT transformací. Již dnes existuje například obrazový server AlterCast, který přidává do předem připravených SVG šablon data z databáze a výsledný soubor poté odesílá na vzdálený cílový počítač. Díky pomocným informacím (meta data) v těchto SVG souborech je teoreticky možné korektury provedené na vzdáleném počítači odeslat zpět a zahrnou do databáze na serveru.

Ukázka SVG grafiky

Nyní si budeme demonstrovat některé grafické a animační schopnosti standardu SVG. Mezi ty nejzajímavější určitě patří text umístěný na křivce, filtry generující „zářící“ obrysy písma, respektive „pixelizující“ efekt a špetka deklarativních animací navrch.

Prohlédněte si nejprve příklad – klepnutím na kruhový text (událost „click“) spustíte animaci znovu od počátku. Vyvoláním kontextového menu nad SVG obrázkem získáte přístup k položkám typu zmenšení či zvětšení zobrazení, otevření grafiky v novém okně nebo třeba k podrobné nápovědě prohlížeče.

Povšimněte si prosím elementů <title> a <desc>. Mají přesně ten význam, který byste očekávali podle jejich názvu, totiž pojmenování a popis daného elementu. Tyto prvky by měly být vždy první v dané skupině elementů na stejné úrovni hierarchie, tzn. následovat ihned po prvcích <g>, <a> a podobně. Jejich použití vzdáleně připomíná atributy „alt“ v HTML kódu. Jednak mohou být využity softwarem přizpůsobeným pro potřeby osob s omezením zraku (hlasový výstup), jednak budou prohlížeče moci ukazovat doplňující informace o objektu pod ukazatelem (představte si třeba složité technické schéma nebo mapu). I když dnešní prohlížeče zatím příliš tyto možnosti nevyužívají, vkládání těchto elementů je doporučováno.

V demonstračním kódu, který jsem pro vás připravil, budu tímto způsobem upozorňovat na zajímavé části SVG struktury. (Tato kapitola samozřejmě nemá ambice přesně vysvětlovat funkčnost, podrobnosti byste se měli dozvědět v některém z následujících článků.)

<?xml version=“1.0″ encoding=“utf-8″?>
<!– SVG Demo created by MH 2003-04-04 –>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.0//EN“
  „http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“ [
  <!ENTITY ns_adobe „http://ns.adobe.com/AdobeSVGViewerExtensions/3.0“>
  <!ENTITY ns_svg „http://www.w3.org/2000/svg“>
  <!ENTITY ns_xlink „http://www.w3.org/1999/xlink“>
]>
<svg xmlns=“&ns_svg;“ xmlns:xlink=“&ns_xlink;“ xmlns:a=“&ns_adobe;“
   width=“256″ height=“256″ viewBox=“0 0 128 128″>
<title>SVG demo pro Interval.CZ napsal Martin Hejral</title>
  <style type=“text/css“>
  <desc>Zde vidíte definici CSS stylů
    (mohou být samozřejmě také v externím souboru).
    Pro zjednodušení příkladu se spoléhám, že uživatel
    má nainstalováno písmo Myriad, které se dodává
    s Acrobatem — pokud ne, může dojít k jemné
    deformaci textové animace a nápisů.</desc>
  <![CDATA[
    .gr1{fill:url(#gradient1);}
    .fnt{font-family:’Myriad‘,sans-serif; font-weight:bold;}
    .fs7{font-size:7; letter-spacing:0.7;}
    .fs99{font-size:99;}
    .st3{fill:none; stroke:#FFCCFF; stroke-width:10;}
    .col1{fill:#9900CC; opacity:0.5;}
    .col2{fill:#FF00FF;}
    .col3{fill:#FF66FF;}
    .col4{fill:#0000FF;}
    .fouter{filter:url(#MH_OuterGlow);}
    .fpixel{filter:url(#MH_Pixelate); opacity:0.7;}
  ]]>
  </style>
  <filter id=“MH_OuterGlow“ x=“-33%“ y=“-33%“ width=“166%“ height=“166%“>
  <desc>V definici filtrů si povšimněte atributů „in“
    a „result“, které označují obrazové matice
    s kterými lze provádět v podstatě libovolné matematické
    operace — odtud obrovská flexibilita SVG filtrů!</desc>
    <feGaussianBlur  in=“SourceGraphic“ result=“blur“ stdDeviation=“8″>
    </feGaussianBlur>
    <feComposite  in=“blur“ in2=“SourceAlpha“ operator=“out“></feComposite>
  </filter>
  <filter id=“MH_Pixelate“ x=“-33%“ y=“-33%“
    width=“166%“ height=“166%“ filterRes=“60 20″>
  <desc>Zjednodušené použití filtru.</desc>
    <feGaussianBlur stdDeviation=“1.2″></feGaussianBlur>
  </filter>
  <g id=“circle“>
  <desc>Kruh vyplněný kruhovým přechodem modrých barev.
    Tagy ve jmenném prostoru a: jsou optimalizovány pro ASV.</desc>
    <radialGradient id=“gradient1″ cx=“64″ cy=“64″ r=“58.333″
      fx=“64″ fy=“64″ gradientUnits=“userSpaceOnUse“>
      <stop  offset=“0″ style=“stop-color:#FFFFFF“/>
      <stop  offset=“0.2411″ style=“stop-color:#FCFDFF“/>
      <stop  offset=“0.4145″ style=“stop-color:#F3F6FF“/>
      <stop  offset=“0.5668″ style=“stop-color:#E3EBFF“/>
      <stop  offset=“0.7068″ style=“stop-color:#CDDCFF“/>
      <stop  offset=“0.8384″ style=“stop-color:#B0C8FF“/>
      <stop  offset=“0.9621″ style=“stop-color:#8DB0FF“/>
      <stop  offset=“1″ style=“stop-color:#81A7FF“/>
      <a:midPointStop  offset=“0″ style=“stop-color:#FFFFFF“/>
      <a:midPointStop  offset=“0.77″ style=“stop-color:#FFFFFF“/>
      <a:midPointStop  offset=“1″ style=“stop-color:#81A7FF“/>
    </radialGradient>
    <circle class=“gr1″ cx=“64″ cy=“64″ r=“58.4″/>
  </g>
  <g id=“g“ transform=“translate(28 99) rotate(-30)“ class=“fpixel“>
        <text transform=“rotate(30)“>
          <tspan x=“0″ y=“0″ class=“col2 fnt fs99″>G</tspan>
        </text>
  </g>
  <g id=“v“ transform=“translate(64 99)“>
  <desc>Písmeno V je animováno tak, aby pozorovatel získal
    vjem prostorové rotace. Pokud v elementu typu „animate“
    není odkaz na objekt animace, působí animace atributů
    na jeho rodičovský objekt.</desc>
    <text>
      <tspan x=“0″ y=“0″ dx=“-32″ class=“col1 fnt fs99″>V</tspan>
    </text>
    <animateTransform attributeName=“transform“ attributeType=“XML“
      type=“scale“ from=“1,1″ to=“-1,1″
      begin=“3s“ dur=“2s“ repeatCount=“indefinite“
      additive=“sum“ fill=“freeze“/>
  </g>
  <a id=“s“ transform=“translate(37 99)“ class=“fouter“
    xlink:href=“http://www.w3.org“ target=“_blank“>
  <desc>Toto je SVG obdoba hyperlinku — jakkoli
    složitá skupina objektů uvnitř elementu „a“ funguje
    jako aktivní odkaz.</desc>
    <text>
      <tspan x=“0″ y=“0″ class=“col4 fnt fs99″>S</tspan>
    </text>
  </a>
  <g id=“border_circle“ class=“st3″>
    <circle cx=“64″ cy=“64″ r=“58.4″/>
  </g>
  <g id=“circle_text“>
  <desc>Text na kruhové křivce pomocí deklarativní animace
    jakoby přilétne, než se usadí na obvodu kruhu.</desc>
    <text class=“col3 fnt fs7″>
      <path id=“text_path“
        d=“M120,64c0,30.9-25.1,56-56,56 C33.1,120,8,94.9,8,64
        C8,33.1,33.1,8,64,8 C94.9,8,120,33.1,120,64z“/>
        <textPath xlink:href=“#text_path“>SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG – SVG –
      </textPath>
      <animateTransform attributeName=“transform“ attributeType=“XML“
        type=“scale“ from=“5.5″ to=“1″ begin=“click“ dur=“3s“
        additive=“replace“ fill=“freeze“/>
    </text>
  </g>
</svg>

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

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