SVG vektorová grafika Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu www.rvp.cz; ISSN 1802-4785. Provozuje Národní ústav pro vzdělávání, školské poradenské zařízení a zařízení pro další vzdělávání pedagogických pracovníků (NÚV).

Počítačová grafika zobrazení obrázků s využitím počítače základní rozdělení: rastrová (bitmapová) – obrázek obsahuje jednotlivé body (pixely) s definovanou barvou vektorová – obrázek obsahuje grafické objekty (úsečka, kružnice, elipsa, text, …) s mnoha parametry

Vektorová grafika obrázek je složený z grafických objektů (ne z bodů) každý objekt má svoje vlastnosti (parametry): umístění (poloha) barva průhlednost tvar typ obrysové čáry … zachovává kvalitu při změně měřítka zobrazení (zoom)

SVG vektorová grafika (1) SVG = Scalable Vector Graphics (škálovatelná vektorová grafika) určena pro webové stránky (HTML 5) vhodná pro jednoduchou grafiku (logo, schéma, …)

SVG vektorová grafika (2) výhody: vložení SVG kódu přímo do HTML kódu stránky malá datová velikost (pro jednoduché kresby) snadná přenositelnost, multiplatformní umožňuje animace umožňuje interaktivitu (při použití JavaScriptu)

Objekty v SVG vektorové tvary rastrové obrázky textové objekty křivka mnohoúhelník lomená čára elipsa kružnice obdélník rastrové obrázky textové objekty

Některé parametry objektů stroke: barva obrysové čáry stroke-width: šířka (tloušťka) obrysové čáry fill: barva výplně fill-opacity: průhlednost Není-li některý parametr zadán, použije se jeho výchozí hodnota.

Kružnice a kruh v SVG <circle cx="50" cy="50" r="40" stroke="green" stroke-width=„2" fill="yellow" /> cx, cy: souřadnice středu r: poloměr stroke: barva obrysové čáry stroke-width: šířka (tloušťka) obrysové čáry fill: barva výplně

Elipsa v SVG <ellipse cx="200" cy="80" rx="100" ry="50" stroke="green" stroke-width=„1" fill=„red" /> cx, cy: souřadnice středu rx, ry: poloměry stroke: barva obrysové čáry stroke-width: šířka (tloušťka) obrysové čáry fill: barva výplně

Úsečka v SVG <line x1="0" y1="0" x2="200" y2="200" stroke=„blue" stroke-width=„2" /> x1, y1: souřadnice počátečního bodu x2, y2: souřadnice koncového bodu stroke: barva obrysové čáry stroke-width: šířka (tloušťka) obrysové čáry

Lomená čára v SVG <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" stroke=„black" stroke-width=„1" /> points: souřadnice (x, y) bodů stroke: barva obrysové čáry stroke-width: šířka (tloušťka) obrysové čáry

Text v SVG <text x=„20" y=„40" fill=„magenta">SVG grafika</text>  x, y: souřadnice textu fill: barva výplně

Úkoly Zjisti, jakým způsobem je možné docílit v SVG animace. Zjisti, zda je možné použít na SVG grafiku kaskádové styly CSS. Najdi na internetu JavaScriptové knihovny pro práci s SVG grafikou. Vlož do HTML stránky svoji vlastní SVG grafiku.

Zdroje Tento materiál je originálním autorským dílem (není ani částečně odvozeným dílem) a necituje žádné externí zdroje. Celý obsah je výsledkem tvůrčího úsilí autorky. K vytvoření tohoto DUMu nebyly použity žádné externí zdroje.