SVG v roce 2010: fakta, souvislosti, názory

Scalable Vector Graphics (škálovatelná vektorová grafika) je jazyk založený na XML. Jak už název napovídá, slouží k vytváření vektorové grafiky.

Je docela zvláštní, že se tento formát, ačkoliv existuje již deset let a nabízí řadu zajímavých možností, používá na webových stránkách, pro něž byl koncipován především, jen velice zřídka, skoro vůbec.

Je SVG zbytečná?

Ve webdesignu převážilo pojetí webové stránky jako plakátu, kde má vše svou neměnnou podobu, pečlivě vyměřenou polohu a fixní rozměry, a tudíž webdesignérům rozměrově přizpůsobivá vektorová grafika nijak zvlášť neschází a vždy si nějak vystačí s formáty JPEG, GIF nebo PNG. Proto se oznámení Microsoftu, že IE 9 bude podporovat SVG, setkalo s odezvou, která byla spíš vlažná než vřelá. Jeden známý český bloger dokonce označil SVG za propadák a na konci svého blogspotu, věnovanému SVG, poznamenal:

„S podporou SVG v IE9 dostane SVG svou druhou šanci. Je otázkou, jak moc se chytí, protože dnes na řadu věcí lze použít takový canvas.“

V souvislosti s uvedeným citátem by bylo žádoucí vysvětlit několik podstatných věcí.

• Vektorová grafika má své nezpochybnitelné přednosti a je na nás, abychom je dokázali smysluplně zhodnotit. Že to neumíme, nemůžeme, nechceme, je zejména náš problém, naše nevýhoda, naše zaostalost. Rozhodně se nedá ani naznačovat, že vektorová grafika nemá na webu vhodné využití. Kdo potřebuje důkaz místo pouhého tvrzení, nechť si zvětší webovou stránku (Ctrl++), a pak porovná stav rastrové grafiky a stav použitých fontů (písmena jsou ve skutečnosti vektorové obrázky). Od 150 % výše už jsou kvalitativní rozdíly v neprospěch rastrové grafiky zřetelné.
• Canvas dokáže nahradit SVG jen stěží. Jednak se nedá použít jako CSS pozadí a jednak je potíž ho škálovat (ukázka). Oba tyto problémy se dají vyřešit, ale tak složitě a obtížně, že se je řešit ani nevyplatí. Kromě toho se Canvas hodí k naprosto jiným účelům než SVG.

Proč používat SVG?

• SVG je výtečný formát pro obrázky, které se vyskytují vícekrát a v různých velikostech (typicky loga a ikony). Důvodem proporční diferenciace je optimalizace pro různá rozlišení.
• Když máme obrázek formátu SVG, není potřeba k němu dělat náhledový obrázek. Pro náhled se prostě použije originální obrázek se zmenšenými rozměry. Odpadne tak nutnost uchovávat a posílat dva obrázky.
• SVG lze bez újmy na jeho symetrii a kvalitě ideálně rozprostřít na pozadí webové stránky.

  body {
    background-image: url(pozadi.svg);
    background-repeat: no-repeat;
    background-width: contain
  }

  Pokud se velikost okna změní, obrázek se přizpůsobí.

Proč se SVG využívá tak sporadicky?

Skutečně, s formátem SVG se na webu moc často nesetkáme. Čím to je? Hlavní příčina již byla zmíněna. Většina webdesignérů je posedlá touhou velikost objektů definovat pevnými rozměry. Však to taky mělo své nepříznivé důsledky: Webové stránky byly pro tisk příliš široké, a tak se tiskly z pravé strany ořezané. Na kapesních zařízeních s malým displayem bylo nutné stránky zmáčknout pomocí speciální funkce do patřičné šířky, což často vedlo k narušení uspořádanosti obsahu, zejména tabulek. Při zvětšení písma se zase narušil layout, neboť obsah menších postranních boxů „přetékal“ svůj grafický rámec. Menších i větších komplikací byla celá řada, postupně se je však podařilo uspokojivě zvládnout. Dnes, pokud je stránka pro tisk příliš široká, tak se vytiskne zmenšená a na čtení se pak vezmou brýle. Podíl kapesních zařízení s přístupem na Internet vzrostl natolik, že již není radno je ignorovat, zároveň je snadné pro ně vytvořit speciální styl. Hrátky s velikostí písma se staly minulostí, teď se zmenšuje, resp. zvětšuje rovnou celá stránka. Čili chtělo to sice trochu času, ale vše je už víceméně v klidu a žádné volání po změně, která by s sebou přinesla i používání SVG obrázků, se neozývá.

Kde hledat druhou příčinu? Devizou vektorové grafiky je její perfektní škálovatelnost. Výborně škálovat se však dají i rastrové obrázky! Samozřejmě jak které. Když je součástí obrázku text, projeví se na něm změna velikosti dosti neblaze. Naopak jednoduché a monochromatické symboly jsou při zvětšování i zmenšování vůči deformaci odolné. Obecně se dá konstatovat, že počítačové algoritmy zvládají škálovat rastrové obrázky dostatečně kvalitně a dochází jen k nepatrné deformaci, která nebrání rozeznat, co na obrázku je. Kvůli tomu nevznikla žádná významná potřeba používat SVG.

Dalším velkým úskalím je podpora vektorových formátů ve webových prohlížečích. Nejpoužívanější prohlížeč Internet Explorer do nedávana podporoval jen VML, ostatní prohlížeče podporovaly SVG. Řešení sice existuje – emulovat SVG v IE pomocí knihoven SVGWeb, Ample SDK, nebo Raphael – ale představuje určitou komplikaci a taky ne každý o něm ví. Tento problém bude přetrvávat, dokud starší verze IE, nepodporující SVG, nezmizí ze scény. A to určitě nebude hned.

O moc lepší to není ani v prohlížečích s jádrem Gecko. Nepodporují totiž vkládání SVG do stránky ani přes CSS, ani prostřednictvím elementu img (testováno ve Firefoxu 3.6). Nicméně se dá použít alespoň element object.

<object type="image/svg+xml" data="obrazek.svg">alternativní obsah</object>

A zmíníme ještě jednu příčinu. Vlastnost background-width se objevila až s třetí úrovní CSS a do webových prohlížečů byla implementována teprve nedávno. Bez této vlastnosti se ovšem obrázek na pozadí nedal škálovat.

Navzdory všem potížím existují lidé, kteří SVG používají. Jmenovitě například Shelley Powers (členka W3C HTML Working Group a autorka mnoha odborných publikací a článků), nebo provozovatel webu Codedread.com Jeff Schiller.

V čem vytvářet SVG?

SVG se dá vytvářet ve spoustě grafických editorů, jmenovitě např. v programu Inkscape, tento editor je přímo zaměřen na vektorovou grafiku a SVG zvláště. SVG podporuje i on-line aplikace Google Documents. SVG obrázek lze udělat dokonce i v primitivním textovém editoru, vypadá to pak takhle:

<?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="200px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <desc>Kolečko, čtvereček a text</desc>

  <ellipse cx="50px" cy="50px" rx="45px" ry="45px" fill="blue" />
  <rect x="110" y="10" width="80px" height="80px" fill="none" stroke="blue" stroke-width="2" />
  <text x="10px" y="120px" font-family="Verdana" font-size="10pt" fill="blue">
    Příklad SVG kódu
  </text>
</svg>

Odkazy a zdroje

• Scalable Vector Graphics (SVG) 1.1 Specification – W3C
• Český tutoriál o SVG – Martin Hejral
• Anglický tutoriál o SVG
• SVG support – Jeff Schiller
• Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I – Shelley Powers