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.

Prezentace na téma: "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."— Transkript prezentace:

1 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 ISSN 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).

2 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

3 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)

4 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, …)

5 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)

6 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

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

8 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ě

9 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ě

10 Ú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

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

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

13 Ú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.

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