SVG tvůrce

stručný průvodce SVG grafikou

SVG grafika v HTML stránce

Jazyk SVG byl vyvíjen především pro použití na webu. Právě možnost vložit do www stránek vektorový obrázek je nejčastějším důvodem, proč se o tento značkovací jazyk začneme zajímat. Popišme si proto techniky jak do stránek SVG obraz vložit.

Podpora v prohlížečích

Stále bohužel musíme počítat s tím, že ne všechny běžně používané prohlížeče SVG podporují, přesněji řečeno, ne všechny disponují vestavěnou (nativní) podporou jazyka SVG. Zatímco prohlížeče jako je Mozilla nebo Opera zvládají SVG již dlouhou dobu, u Exploreru je situace horší. SVG grafiku umí zobrazovat až verze 9, starší verze nikoliv. Uživatelů verzí starších než je ver.9 bude ještě nějaký čas poměrně hodně, mj. i proto, že IE 9 nelze nainstalovat ve Windows XP, což je stále hojně používaný operační systém.

To, že některé starší verze Exploreru SVG nepodporují automaticky neznamená, že by tuto vektorovou grafiku vůbec nemohly zobrazit. Potíž tkví jen v tom, že se u takových prohlížečů neobejdeme bez instalace dodatečného softwaru, který je schopen SVG obraz zpracovat. Kvůli podpoře či nepodpoře SVG v prohlížečích máme tedy dvě varianty jak do www stránky "dostat" SVG obraz. Jednu pro případ, kdy podpora v prohlížeči není a druhou pro případ kdy podpora nechybí. Popíšeme si obě varianty.

 

Varianta 1: prohlížeče nepodporující SVG

Jestliže řekneme, že daný prohlížeč SVG nepodporuje, znamená to, že SVG kódu nerozumí a neumí jej převést na obraz. V těchto prohlížečích je možné SVG vložit jen pomocí elementu object, přičemž svg obrázek musí být uložen v samostatném souboru s příponou *.svg a navíc musí být v počítači nainstalován software, který zvládne svg kód přečíst a vygenerovat z něj obraz. Nejčastěji používaným softwarem pro tyto účely je ADOBE SVG VIEWER. Níže si můžete prohlédnout příklad kódu, kterým SVG obrázek vložíme do stránky prostřednictvím elementu object:

<object width="400" height="280" data="svgpic/rotate.svg" type="image/svg+xml"/> <object>

Nutnost používat k zobrazení SVG grafiky doplňkový software má zjevnou nevýhodu. Uživatele stránek totiž musíme informovat, že je na nich grafika, kterou je možné prohlížet až po instalaci takového software. Bohužel u řady uživatelů pochopitelně nemůžeme čekat, že se budou zdržovat instalací programu, jen proto, aby něco na stránce viděli. Pokud je možné předložit uživateli jako náhražku bitmapovou variantu svg obrazu, udělejme to. Postup je jednoduchý. Dovnitř elementu object vložíme element img, který bude odkazovat na bitmapovou variantu obrázku, třeba ve formátu gif. Pokud použijeme toto řešení, tak v počítačích s instalovaným softwarem pro prohlížení SVG se zobrazí vektorový obrázek, v opačném případě uvidí uživatel bitmapovou variantu. Je ale jasné, že ne vždy je možné svg nahradit bitmapou. Nedá se nahradit zejména skriptované SVG, které reaguje na obsluhu uživatele.

Zde je ukázka kódu pro vložení alternativní bitmapy:

<object width="400" height="280" data="obraz.svg" type="image/svg+xml"/> <img src="alternativa.gif" alt="bitmapova alternativa" /> <object>

A co se stane, když takové řešení použijeme u prohlížeče s vestavěnou podporou SVG? Odpověd: Vždy se zobrazí vektorový SVG obraz.

 

Varianta 2: prohlížeče podporující SVG

Máme-li prohlížeč s vestavěnou podporou SVG, znamená to nejen že můžeme vložit svg soubor do stránky jakožto objekt, bez nutnosti instalovat speciální prohlížeč svg, ale především, že SVG kód může být přímo součástí kódu stránky.

Ještě donedávna platilo, že pokud jste chtěli SVG kód vložit do kódu stránky a grafiku zobrazit, musely být splněny dvě podmínky:

Jak splnit první podmínku je zjevné - stačí se při psaní kódu držet syntaktických pravidel XHTML. Jak ale vyhovět druhé podmínce, tedy jak zaslat prohlížeči dokument s MIME typem application/xhtml+xml, nemusí být každému hned jasné. Nejjednodušším řešením je uložení kódu stránky do souboru s příponou *.xhtml. Pokud ale vytváříme stránku na straně serveru prostřednictvím PHP, je situace složitější. Zdrojový soubor má totiž příponu *.php. V tomto případě je nutné odeslat pomocí PHP funkce header hlavičku, která informuje prohlížeč o skutečnosti, že dokument má být zobrazen jako MIME typ application/xhtml+xml.

screenshot MIME apllication/xhtml+xml screenshot MIME text/html

Ukázka rozdílu při zobrazení stejné stránky v prohlížeči Mozilla 3.6 s MIME typem application/xhtml+xml (vlevo) a MIME typem běžné stránky tj. text/html (vpravo). Při použití typu text/html se SVG grafika nezobrazí.

Nejnovější prohlížeče jako např. Mozilla 4 nebo 5 již nevyžadují, aby přijímaly stránku s SVG grafikou jako MIME typ application/xhtml+xml. Grafika se vykreslí i na stránkách s nejpoužívanějším MIME typem text/html.

Vkládání SVG kódu do HTML

U prohlížečů s podporou SVG vkládáme zdrojový kód grafiky do HTML stránky pomocí elementu svg. Do něj pak musí být vnořeny všechny další elementy jazyka SVG. Elementy svg a html pak je třeba rozšířit o atribut xmlns, který obsahuje identifikátor jmenného prostoru. V případě elementu html je to http://www.w3.org/1999/xhtml a případě elementu svg se zapisuje http://www.w3.org/2000/svg. U nejnovějších prohlížečů nevyžadujících zasílání stránky obsahující SVG kód s MIME typem application/xhtml+xml, je možné identifikátory jmenného prostoru vynechat.

Níže vidíte příklad zdrojového kódu HTML stránky s SVG grafikou:

<!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>SVG obrázek v HTML stránce</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> </head> <body> <h1>SVG obrázek v HTML stránce</h1> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="400px"> <circle cx="200px" cy="150px" r="100px" fill="blue" stroke="black" /> </svg> </body> </html>

Nejmodernější prohlížeče umožnují SVG obraz uložený v samostatném souboru vložit na stránku s použitím vlastností CSS jako je background-image nebo list-style-image, což umožní mít svg obrázek jako pozadí stránky nebo jako odrážku seznamu.

 

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