SVG tvůrce

stručný průvodce SVG grafikou

Stylování

Kaskádové styly (CSS) slouží zpravidla k definování vzhledu HTML stránek. Leckoho proto možná překvapí, že pomocí CSS můžeme také formátovat SVG grafiku. I pro SVG tedy získáváme stejné výhody této technologie jako v případě HTML stránek, tj. že můžeme definovat vzhled většího počtu grafických prvků najednou. To dovoluje se vzhledem snadněji manipulovat a také dává prostor ke snížení datového objemu svg souboru.

Způsob použití i syntaxe CSS je zcela shodná s tím jak ji uplatňujeme v HTML stránkách. CSS kód tedy zapisuje stejným způsobem. Jedinným rozdílem je, že jsou zde používány vlastnosti typické pouze pro SVG, což je ostatně pochopitelné, neboť určovat vzhled grafiky je zcela něco jiného než formátovat HTML stránku. Přesto lze i v SVG grafice využít některé vlastnosti užívané při formátování HTML. Jde zejména o ty, sloužící k definici vzhledu textu, jako např font-family.

Stylopis vkládáme do elementu style (stejně jako v HTML). Jelikož se SVG používáme přísnou syntaxi XML, měli bychom stylopis vložit ještě navíc do sekce CDATA. Následující příklad kódu je ukázkou formátování SVG při kterém je pomocí stylopisu stanovena barva výplně, barva okraje a šířka okraje dvou obdélníků.

<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![CDATA[ rect {fill:blue; stroke:black; stroke-width:4px;} ]]> </style> <rect x="40px" y="40px" width="200px" height="50px" /> <rect x="40px" y="120px" width="200px" height="50px" /> </svg>

Výsledný obrázek vypadá takto:

gif_obraz

Také je možné formátovat grafiku stylopisem uloženým v externím souboru. V tom případě je nutné zapsat do kódu instrukci, která to zajistí. Instrukce se umisťuje hned za xml prologem:

<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="stylopis.css" type="text/css"?> ... pokračování kódu

 

Obrázky na stránce jsou ukázkami zobrazení v podobě bitmapy (formát GIF). Pokud chcete zobrazit svg grafiku přímo, klikněte na tlačítko pod textem. Všechny obrázky pak budou nahrazeny elementy object, které zobrazí přímo svg soubory. Nutný je nainstalovaný ADOBE SVG VIEWER.

Nahraď obrázky GIF za SVG

 

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