Zoznámenie sa so SVG

SVG je skratka pre Scalable Vector Graphics a jedná sa o otvorený formát určený pre definovanie vektorovej grafiky v XML jazyku. SVG je určené primárne pre webové prehliadače a definuje ho W3C konzorcium, ale tento formát je možné použiť vzhľadom na jeho univerzálnosť aj inde (napríklad v Linuxe ako desktopové ikony). SVG je tu s nami už nejakú dobu, osobne s nim nemám zatiaľ veľké skúsenosti a prvé reálne “ohmatanie” som absolvoval až pre účely tohto článku. Poďme sa teda naň pozrieť trocha bližšie.

Prvý pohľad

SVG je obyčajný XML súbor, nejedná sa o žiadny binárny blob, takže je s ním možné veľmi dobre pracovať, stačí prakticky akýkoľvek textový editor. SVG obsahuje svoj DOM model, takže je možné pristupovať a manipulovať so značkami alebo zachytávať udalosti. Tak ako aj na HTML značky je možné aplikovať CSS štýly, rovnako je možné použiť CSS štýly aj na SVG. Vývoj tohto formátu bol započatý niekedy v roku 1999, v roku 2001 bola špecifikácia aktualizovaná na verziu 1.1, ktorá je od roku 2003 je W3C štandardom. V súčasnosti je v návrhu verzia 1.2, vývoj bol započatý bola v roku 2005. SVG je dnes podporované vo všetkých moderných prehliadačoch, okrem Internet Explorera, avšak vzhľadom na nedávny vstup Microsoftu do pracovnej skupiny SVG W3C konzorcia, je možné očakávať podporu v nejakej z budúcich verzií tohto prehliadača. SVG špecifikácia je pomerne rozsiahla, ako som už spomenul, so SVG len začínam, takže v tuto chvíľu nemám veľmi dobrý prehľad o rozsiahlosti podpory v prehliadačoch, nie každý totižto má implementovanú plnú podporu. Zrejme v niektorom z budúcich článkov spravím porovnanie prehliadačov a podpory tohto formátu, zatiaľ len odkážem na nasledujúce stránky:

• Opera (aktuálne jadro Presto 2.2)
• Firefox (aktuálna verzia)
• Chrome/Chromium (stav podpory som zatiaľ nenašiel)
• Safari (tiež som nenašiel stav podpory, avšak Safari je založené na Webkit jadre, tak pridávam odkaz na podporu SVG vo webkite )

Vytvorenie SVG súboru

SVG súbor je možné vytvoriť obyčajným textovým editorom, prípadne na zložitejšie veci využiť nejaký z grafických programov, ktoré SVG podporujú. Keďže som užívateľom operačného systému Linux,  na prácu so SVG súbormi príde najlepšie vhod program Inkscape, ktorý je dostupný aj pre operačné systémy Windows a hlavne je zdarma. Nebudem teraz popisovať prácu s Inkscape a vrhnem sa na textový editor, do ktorého zapíšeme nasledovné:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red"/>
</svg>

Na riadku 3 nám začína koreňový element <svg>, ktorý má atribúty pre šírku a výšku nastavené na 200 bodov, je použitá špecifikácia SVG 1.1 a zadeklarujeme menný priestor (xmlns atribút). Tým máme dokument vytvorený a môžme doň vložiť nejaké objekty.

Element circle už podľa názvu znamená kružnicu, atribúty cx a cy značia súradnice stredu kružnice (cx=0, cy=0 začínajú v ľavom hornom rohu) a r je polomer. Kto pracoval s vektorovou grafikou, už vie, že každý objekt má výplň a obrys (dúfam, že používam správne pojmy, 90% vecí čítam totiž v angličtine a zbytok v češtine, takže ak sa používajú vhodnejšie slová, dajte v diskusii vedieť, opravím).  Atribútom stroke nastavíme farbu obrysu a jeho hrúbku stanovíme cez stroke-width. Výplň nám spraví posledný atribút – fill.

Takto vytvorený dokument uložíme, nazveme napríklad svg_test1.svg a môžme skúsiť otvoriť priamo v prehliadači. Ak Váš prehliadač SVG podporuje, mal by zobraziť červenú kružnicu s čiernym obrysom. Ak nie, vymeňte prehliadač :).

Vloženie SVG súboru do stránky

Náš prvý SVG súbor máme vytvorený, teraz nastáva otázka, ako ho vložiť do stránky. Dosiahnuť sa to dá niekoľkými spôsobmi, nie každý funguje všade. SVG obrázky sa dajú použiť aj v značke <img>, avšak toto riešenie zatiaľ funguje len v Opere, Chrome a Safari, takže je momentálne prakticky nepoužiteľné. Hľadal som nejaké rozumne napísané informácie o problematike vloženia SVG do (X)HTML dokumentu, ale táto problematika nieje zdá sa vôbec jednoduchá. Informácie, čo som našiel, buď niekto popísal veľmi stručne alebo som informácie zbieral z viacerých diskusií. Sám v tom nemám ešte úplne jasno, zatiaľ zhrniem len to, čo som si otestoval.

Vloženie do XHTML dokumentu (inline)

Keďže  XHTML je XML dokument, vloženie SVG je jednoduché:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Vloženie SVG do XHTML dokumentu</title>
  </head>
  <body>
    <h1>Prehliadače s podporou SVG zobrazia obrázok</h1>
    <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red"/>
    </svg>
  </body>
</html>

Súbor som nazval zoznamenie_sa_so_svg_inline_xhtml1.xhtml a môžme si ho otestovať. Internet Explorer verzie 8 a nižšie nám ho ale neotvorí, nepozná application/xhtml+xml MIME, takže dostaneme len možnosť súbor stiahnuť. To ale veľmi nevadí, keďže Internet Explorer aj tak natívnu podporu SVG nemá. Ten akceptuje len text/html, čo zasa spôsobí problém s ostatným prehliadačmi a SVG nezobrazia.

Podpora inline SVG v XHTML

prehliadač	podpora
Opera 10	áno
Firefox 3.0	áno
Firefox 3.5	áno
Safari 4	áno
Chrome 3	áno
Chromium 4	áno
Internet Explorer 6	nie
Internet Explorer 7	nie
Internet Explorer 8	nie

Vloženie do (X)HTML dokumentu (externý súbor)

Na vloženie SVG obrázku je možné použiť značky <object>, <embed> alebo <iframe>. Až si trocha ujasním problematiku ohľadom object vs. embed, aktualizujem informácie, zatiaľ by som nerád písal nezmysly. Tu je príklad na použitie štyroch metód vloženia SVG súboru.

Podpora external SVG v XHTML

prehliadač	podpora img	podpora embed	podpora object	podpora iframe
Opera 10	áno	áno	áno	áno
Firefox 3.0	nie	áno	áno	áno
Firefox 3.5	nie	áno	áno	áno
Safari 4	áno	áno	áno	áno
Chrome 3	áno	áno	áno	áno
Chromium 4	áno	áno	áno	áno
Internet Explorer 6	nie	nie	nie	nie
Internet Explorer 7	nie	nie	nie	nie
Internet Explorer 8	nie	nie	nie	nie

Vloženie pomocou JavaScriptu

Do HTML je možné za pomoci JavaScriptu a DOM manipulácie vložiť SVG, najlepšie to demonštruje príklad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Vloženie SVG do (X)HTML dokumentu pomocou JavaScriptu</title>
    <script type="text/javascript">
      var doc = document;
      var svgns = 'http://www.w3.org/2000/svg';

      window.onload = function() {
        container = doc.getElementById('container');
        svg = document.createElementNS(svgns,'svg');
        svg_attributes = {
          xmlns: svgns,
          version: 1.1,
          width: 200,
          height: 200
        }

        setAttrs(svg, svg_attributes);
        circle = document.createElementNS(svgns,'circle');
        circle_attributes = {
          cx: 100,
          cy: 100,
          r: 50,
          stroke: 'black',
          strokeWidth: 5,
          fill: 'red'
        };

        setAttrs(circle, circle_attributes);
        svg.appendChild(circle);
        container.appendChild(svg);
      }

      function setAttrs(el, attr) {
        for (var key in attr) {
          switch(key) {
            case 'strokeWidth':
              el.setAttribute('stroke-width', attr[key]);
              break;
            default:
              el.setAttribute(key, attr[key]);
              break;
          }
        }
      }
    </script>
  </head>
  <body>
    <h1>Na tomto mieste sa mal zobraziť červený kruh s čiernym obrysom</h1>
    <div id="container">
    </div>
  </body>
</html>

Zobraziť príklad

Princíp tejto metódy je v tom, že sa vytvorí menný priestor pre SVG v danom dokumente, na čo slúži metóda createElementNS, kde prvým parametrom je názov menného priestor, druhým je značka, ktorú chceme vytvoriť. Na nastavenie atribútov som si vytvoril funkciu setAttrs, aby som nemusel vypisovať niekoľkokrát za sebou element.setAttribute(atribút, hodnota). Po vytvorení svg kontajnera povkladám čo treba, v tom to prípade náš známy kruh. Takto vytvorený DOM objekt potom pripojím do HTML a výsledok si môžte pozrieť. Podpora prehliadačov je totožná ako pri inline metóde.

Internet Explorer

Samozrejme by toto všetko nebolo veľmi použiteľné, ak by neexistovala možnosť použitia v Internet Exploreri. Je tu niekoľko možností, ako dosiahnuť funkcionality aj v tomto prehliadači. Jedna z možností je použiť jeden z niekoľkých dostupných pluginov, ktoré je treba inštalovať na strane klienta:

• Adobe SVG Viewer (podpora skončila 1.1.2009)
• Corel SVG Viewer
• Renesis Player
• MozIE

Ďalšou možnosťou je použitie JavaScriptovej knižnice svgweb, ktorá využíva na zobrazovanie SVG grafiky Flash, ak daný prehliadač nemá priamu podporu SVG. Flash je dostupný takmer v každom prehliadači, takže táto metóda je už veľmi použiteľná. Princíp je veľmi jednoduchý, stačí vložiť do HTML kódu jeden JavaScriptový súbor (ten si ešte natiahne súbory svg.swf a svg.htc ) a použiť jednu z dvoch metód vloženia SVG, buď priame vloženie, ktoré je HTML 5 validné alebo <object> tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Použitie SVG Web knižnice</title>
    <script type="text/javascript" src="svg.js"></script>
  </head>
  <body>
    <h1>Priame vloženie</h1>
    <script type="image/svg+xml">
      <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red" id="mycircle" />
      </svg>
    </script>

    <h1>Vloženie cez &lt;object&gt; tag</h1>
    <!--[if IE]>
    <object src="svg_priklad1.svg" classid="image/svg+xml" width="200" height="200" id="mySVGObject">
    <![endif]-->

    <!--[if !IE]>-->
    <object data="svg_priklad1.svg" type="image/svg+xml" width="200" height="200" id="mySVGObject">

    <!--<![endif]-->
    </object>
  </body>
</html>

Zobraziť príklad

Táto metóda funguje vo všetkých prehliadačoch, ktoré som uviedol pri predošlých testoch.

Internet Explorer má v sebe implementovanú podporu VML (Vektor Markup Language), čo je podobný formát ako SVG, založený rovnako na XML, takže pomocou XSLT šablóny by sa dala previesť transformácia do VML a použiť v tomto prehliadači, ale na takéto riešenie som zatiaľ nenarazil. Existuje ale iná zaujímavá knižnica, a to Raphaël, ktorá používa SVG a v prípade nedostupnosti VML. Na stránke tejto knižnice nájdete zaujímavé príklady, rozhodne stojí za to si ju naštudovať.

Záver

Pôvodne som čakal, že sa v článku dostanem aj k zaujímavejších veciam, ale vzhľadom už na rozsiahlejší obsah, to nechám na nejaký ďalší diel. SVG ponúka veľmi veľa možností, teraz záleží na webových vývojároch, či ho dokážu dostatočne odprezentovať a rozšíriť. Ja osobne sa chystám SVG použiť napríklad na generovanie grafov a grafických štatistík pre jeden môj projekt.