SVG tvůrce

stručný průvodce SVG grafikou

Gradienty

Gradienty jsou dnes běžnou součástí moderní grafiky. Gradientem rozumíme postupný přechod jedné barvy do druhé. Zápis zdrojového kódu obrázku, kde chceme gradient použít sestává ze dvou kroků:

  1. nejdříve definujeme vlastnosti samotného gradientu
  2. aplikujeme nadefinovaný gradient na vybraný element

Celá definice musí být uzavřena do rodičovského elementu. Tím je buďto <linearGradient> nebo <radialGradient> podle toho který typ gradientu si zvolíme. Jelikož lineární gradient je více používaný, ukážeme si zápis definice právě na jeho příkladu.

Ukázka kódu:

<linearGradient id="prechod" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="blue" /> <stop offset="100%" stop-color="red" /> </linearGradient> <rect x="10px" y="10px" width="150px" height="100px" fill="url(#prechod)" stroke="black" stroke-width="5px" />

Nyní si podrobně rozeberme výše uvedený zdrojový kód. Je zde použit element <linearGradient>. Ten má několik důležitých atributů. Prvním je id, kterým gradient pojmenujeme. Toto je nutný krok, neboť jakmile budeme chtít gradient aplikovat na grafický element, budeme se na název v atributu id odkazovat. Další atributy slouží ke stanovení směru gradientu. Atributy x1, y1, x2 a y2 jsou vlastně souřadnicemi pomyslné čáry, která je vektorem směru gradientu. Pokud má gradient směřovat např. shora dolů, souřadnice budou následovné: x1="0" y1="0" x2="0" y2="1" . Pokud žádné z těchto souřadnic neuvedeme, gradient půjde ve směru čtení, tzn. zleva doprava.

Uvnitř elementu <linearGradient> jsou vnořeny elementy <stop>. Každý tento element určuje barvu a její polohu v ploše, kterou gradient vyplňuje. Aby gradient vznikl, musí být logicky přítomny vždy nejméně dva elementy stop, přičemž první z nich určuje počáteční barvu, druhý pak koncovou barvu. Pokud je jich více než dva, je možno vytvářet gradienty, skládající se s vícero barevných přechodů. Poloha barvy je určena atributem offset, konktrétní barvu pak stanovíme díky atributu stop-color. V případě že potřebujeme vyjádřit i míru průhlednosti barvy, je třeba element stop doplnit ještě atributem stop-opacity. Průhlednost se pak zadá číselně v rozsahu 0.0 až 1.0 .

gif_obraz

 

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