SVG - grafika v kódu
SVG je vektorový formát často používaný pro webovou grafiku. V následujícím článku najdete některé základní příkazy používané v SVG.
SVG kód můžete využít i v grafickém editoru InkScape, který podporuje úpravy kódu pomocí zabudovaného editoru. V Inkscpae lze vytvořit i základní animace objektů.
Dnes si ukážeme jak pomocí SVG nakreslit českou vlajku.
Nejprve si nadefinujeme hlavičku dokumentu:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
následně vytvoříme dva obdélníky (červený dole a bílý nahoře) s černým obrysem
<rect width="400" height="150" x="100" y="20" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)"/>
<rect width="400" height="150" x="100" y="170" style="fill:red;stroke-width:1;stroke:rgb(0,0,0)"/>
poslední nám zbývá vytvořit modrý trojúhelník pomocí příkazu path (parametr M = moveTo, L = lineTo):
<path d="M100 20 L100 320 L300 170 L100 20" style="fill:blue;stroke:rgb(0,0,0)"/>
</svg>
a česká vlajka je hotová.....
Základní animace pomocí SVG - rotace
Následující kód ukazuje základní rotaci objektu pomocí SVG. U atributu from="n1 n2 n3" (from="0 350 350") n1 znamená počátek rotace, n2 a n3 souřadnice středu otáčení.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="200" y="200" width="100" height="100" style="fill:blue">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 350 350" to="360 350 350" dur="5s" repeatCount="indefinite"/>
</rect>
</svg>
{source}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="300">
<rect x="100" y="100" width="100" height="100" style="fill:blue">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="5s" repeatCount="indefinite"/>
</rect>
</svg>
{/source}
Základní animace pomocí SVG - posun
Pro posun pomocí SVG použijte attributeName s definicí x pro vodorovný posun.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="200" y="200" width="100" height="100" style="fill:blue">
<animate attributeName="x" from="0" to="500" dur="4s" repeatCount="indefinite"/>
</rect>
</svg>
{source}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="300">
<rect x="100" y="100" width="100" height="100" style="fill:blue">
<animate attributeName="x" from="0" to="500" dur="4s" repeatCount="indefinite"/>
</rect>
</svg>
{/source}
Pokud Vás formát SVG zajímá víc dopodrobna přijďte na kurz grafického programu Inkscape pro pokročilé uživatele.
