Prezentace: Úvod do SVG (Scalable Vector Graphics)

1. Co je SVG?

SVG (Scalable Vector Graphics) je vektorový grafický formát založený na značkovacím jazyce XML. Umožňuje popisovat dvourozměrnou grafiku (tvary, text, atd.) pomocí značek (tagů). Vektorová grafika je nezávislá na rozlišení, takže ji lze libovolně zvětšovat a zmenšovat bez ztráty kvality. SVG je standardizováno konsorciem W3C a je podporováno v moderních prohlížečích.

2. Základní struktura SVG

Soubor či kód SVG se skládá z kořenového elementu <svg> a uvnitř něj jsou definovány jednotlivé prvky (tvary, křivky, text, skupiny, atd.).

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- Zde se budou nacházet grafické objekty -->
</svg>

Poznámky:
width a height udávají velikost kreslicí plochy (lze je měnit libovolně, SVG se škáluje).
xmlns (XML Namespace) definuje jmenný prostor pro SVG.

3. Základní grafické entity

3.1 Čáry a tvary

Line (čára)
```
<line x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="2" />
```
x1, y1: počáteční bod
x2, y2: koncový bod
stroke: barva čáry
stroke-width: tloušťka čáry
Rect (obdélník)
```
<rect x="10" y="20" width="80" height="50" fill="blue"
      stroke="black" stroke-width="2" />
```
x, y: levý horní roh
width, height: šířka a výška
fill: barva výplně
stroke: barva okraje
rx, ry: (volitelně) zaoblení rohů

Circle (kruh)

<circle cx="60" cy="60" r="40" fill="green" stroke="black" stroke-width="2" />

cx, cy: souřadnice středu
r: poloměr

Ellipse (elipsa)

<ellipse cx="60" cy="60" rx="40" ry="20" fill="orange"
      stroke="black" stroke-width="2" />

cx, cy: souřadnice středu
rx, ry: vodorovný a svislý poloměr

Polygon (mnohoúhelník)

<polygon points="50,10 90,50 50,90 10,50" fill="purple"
      stroke="black" stroke-width="2" />

points: seznam souřadnic vrcholů

Polyline (lomená čára)

<polyline points="10,10 50,50 90,10" fill="none"
      stroke="black" stroke-width="2" />

points: seznam souřadnic bodů lomené čáry

4. Parametrizace grafických entit

4.1 Výplň a okraj

fill: barva výplně (např. red nebo #FF0000) nebo none
stroke: barva okraje
stroke-width: tloušťka čáry (okraje)

<rect x="10" y="10" width="100" height="50"
      fill="#00FF00" stroke="#000000" stroke-width="3" />

4.2 Průhlednost

fill-opacity, stroke-opacity: hodnota 0.0–1.0.
opacity: nastaví průhlednost pro celý prvek (také 0.0–1.0).

4.3 Styling pomocí CSS

<style>
  .muj-tvar {
    fill: orange;
    stroke: red;
    stroke-width: 5;
  }
</style>

<rect x="10" y="10" width="80" height="50" class="muj-tvar" />

4.4 Transformace

Každý SVG prvek lze transformovat (posouvat, otáčet, škálovat, atd.) pomocí atributu transform. Lze kombinovat více transformací: translate(x,y), rotate(angle), scale(sx, sy), skewX(angle), skewY(angle).

<rect x="0" y="0" width="50" height="50"
  fill="blue"
  transform="translate(100,50) rotate(45)" />

5. Křivky a tvarování: <path>

Nejuniverzálnější prvek je <path>. Umožňuje popsat libovolné tvary a křivky (oblouky, Bézierovy křivky atd.) pomocí příkazů definovaných v atributu d.

5.1 Základní syntaxe <path>

<path d="M10 10 L100 10 L100 50 Z" fill="none" stroke="black" />

d: definuje posloupnost příkazů (tzv. path data).
fill: barva výplně tvaru (pokud je cesta uzavřena).
stroke: barva obrysu.

5.2 Hlavní příkazy v atributu `d`

M (moveto): M x y – přesun “pera” do bodu (x,y).
L (lineto): L x y – nakreslí čáru od aktuálního bodu do (x,y).
H (horizontal lineto): H x – vodorovná čára na souřadnici x.
V (vertical lineto): V y – svislá čára na souřadnici y.
C (cubic Bézier): C x1 y1, x2 y2, x y – kubická Bézierova křivka.
Q (quadratic Bézier): Q x1 y1, x y – kvadratická Bézierova křivka.
A (elliptical arc): A rx ry x-axis-rotation large-arc-flag sweep-flag x y – eliptický oblouk.
Z (closepath): Z – uzavře cestu spojením posledního bodu s prvním.

Varianta s malými písmeny (m, l, c atd.) označuje relativní souřadnice oproti aktuálnímu bodu.

5.3 Příklad použití <path>

<path d="
  M 50 50
  C 70 20, 110 20, 130 50
  C 150 80, 110 80, 90 50
  Z
" fill="lime" stroke="black" stroke-width="2" />

6. Vytváření komplexních objektů pomocí křivek

Pomocí <path> lze vykreslit prakticky libovolný tvar – od jednoduchých linií po složité křivky. Je možné kombinovat příkazy M, L, C, Q, A v jedné cestě pro organické tvary, ozdobné prvky a podobně.

7. Další rozšíření a možnosti SVG

Skupiny (element <g>)
Lze seskupovat více prvků a aplikovat společné transformace či styly.

<g transform="translate(100,100) scale(2,2)" fill="red">
  <circle cx="0" cy="0" r="20"/>
  <rect x="-10" y="30" width="20" height="20"/>
</g>

Definice opakovaně použitelných symbolů (<defs> a <use>)

<svg ...>
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="10" fill="blue" />
  </defs>

  <use xlink:href="#myCircle" x="50" y="50" />
  <use xlink:href="#myCircle" x="100" y="100" fill="red" />
</svg>

Interaktivita a animace
SVG podporuje animace (SMIL, CSS) i JavaScript pro interaktivní a dynamické prvky.
Filtry, gradienty a masky
Pokročilá grafika (stíny, přechody, rozmazání, atd.) se tvoří pomocí <filter>, <linearGradient>, <radialGradient> a dalších.

8. Shrnutí

SVG je výkonný a flexibilní formát pro vektorovou grafiku na webu. Základní tvary (<line>, <rect>, <circle> atd.) dostačují pro jednoduché objekty, zatímco <path> s příkazy (M, L, C, Q, A, Z) pokrývá tvorbu libovolných křivek a složitějších tvarů.

Díky vlastnostem, jako je nezávislost na rozlišení, snadná editace kódu a široká podpora v prohlížečích, je SVG ideální volbou pro škálovatelnou grafiku, loga, diagramy i interaktivní ilustrace.