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á.....

zobrazit SVG

 

---

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.