SVG tvůrce

stručný průvodce SVG grafikou

Element text

Možnost vkládat do grafiky textový obsah je v SVG velice přínosná. Nabízí se také široké možnosti fomátování, navíc leckoho potěší, že mnohé vlastnosti textu známé ze standardu CSS jsou použitelné i zde. Poloha písma v obrázku je dána atributy x a y. Atribut x udává polohu levého okraje textu na ose x, atribut y pak polohu spodního okraje řádku textu na ose y. Ke stanovení barvy písma se používá atribut fill. Typ písma je dán atributem font-family. Tag text je párový, textový obsah, jenž chceme formátovat vkládáme mezi značky <text> a </text> . Zde je příklad zdrojového kódu, níže pak ukázka obrázku s textem, jenž tento zdrojový kód vytvoří:

<text x="10px" y="40px" fill="black" font-family="Verdana" font-size="20px" font-weight="bold"> Textový obsah v SVG </text>
gif_obraz
Element Text - nejpoužívanější atributy
atributpopisvlastnost shodná s CSS
xpoloha levého okraje textového řádku na ose xne
ypoloha spodního okraje textového řádku na ose yne
font-familynázev písmaano
font-sizevelikost písmaano
font-weighttučnost písmaano
font-stylestyl písmaano
letter-spacingprostrkání písmaano
fillbarva písmane
strokebarva okraje písmane

Element tspan

Použití elementu tspan je prakticky shodné s elementem span v HTML. Slouží tedy k vyznačení části textu, který chceme formátovat jinak než okolní text. Opět příklad zdrojového kódu i vykresleného obrazu, kde jsou písmena SVG zobrazena červeně:

<text x="10px" y="40px" fill="black" font-family="Verdana" font-size="20px" font-weight="bold"> Textový obsah v <tspan fill="red">SVG</tspan> </text>
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