Kód kurzu: INTSVG1« Krok zpět

SVG (Scalable Vector Graphics)

Kurz SVG (Scalable Vector Graphics) dává účastníkům kurzu ojedinělou možnost seznámit se s různými podobami dosud opomíjeného standardizovaného formátu SVG pro použití vektorové grafiky na webu, jehož atraktivita se zvýšila nativní podporou v IE9 a příchodem displejů s velkou hustotou pixelů. SVG je nejen grafickým formátem - vzhledem k možnostem animace (vestavěnými značkami nebo JavaScriptem), interakce uživatele a komunikace s ostatními prvky webové stránky je vlastně samostatnou aplikací.

 DatumDnůCena kurzuCena materiálůJazyk výukyLokalita 
9.2.2017 2 14 400 CZK v ceně kurzu Český jazyk GOPAS Praha
 
12.1.2017 2 14 400 CZK v ceně kurzu Český jazyk GOPAS Brno
 
9.3.2017 2 590,00 EUR v ceně kurzu Slovenský jazyk GOPAS Bratislava
 

PobočkaDnůCena kurzuCena materiálůITB
Praha2 14 400 CZK v ceně kurzu 20
Brno2 14 400 CZK v ceně kurzu 20
Bratislava2 590,00 EUR v ceně kurzu 20

Co vás naučíme:

  • Vytvářet optimalizované SVG soubory, vkládat je do webové stránky, používat je k náhradě rastrové grafiky, animovat jednotlivé prvky SVG souboru, měnit je prostřednictvím JavaScriptu, vytvářet v SVG interaktivní grafiku.

Pro koho je kurz určen:

  • Kurz je určen pro grafiky, kodéry, tvůrce animací i programátory, kteří vytvářejí weby na straně klienta (front-end).

Požadované vstupní znalosti:

  • Základní znalosti HTML a CSS, případně JavaScriptu (není podmínkou).

Metody výuky:

  • Odborný výklad s praktickými ukázkami, cvičení na počítačích.

Studijní materiály:

  • Tištěné prezentace probírané látky.

Osnova:

SVG pro grafiky

  • Výhody vektorové grafiky na webu ve srovnání s rastrovou grafikou
  • Stručná historie SVG, oficiální specifikace W3C
  • Verze formátu: SVG 1.1, SVG Mobile (Basic, Tiny), chystané SVG (1.2, 2.0)
  • Přehled grafických možností a omezení SVG
  • Podpora v prohlížečích
  • Detailní průvodce ukládáním do SVG v CorelDRAW, Adobe Illustrator a Inkscape
  • Optimalizace pro použití na web, komprese (gzip, SVGZ)
  • Způsoby vložení do HTML a CSS (značka object, img, inline SVG, background-image)

SVG pro kodéry

  • Velmi stručný úvod do XML
  • Základní struktura SVG, jmenné prostory
  • Systém souřadnic, viewport a viewbox
  • Nastavení velikosti SVG na webové stránce, SVG v responzivním designu
  • Značka svg, tvary (rectangle, circle, path, line, polyline, polygon)
  • Vlastnosti čar a výplní
  • Seskupování značek, definice symbolů a jejich opětovné použití
  • Transformace částí SVG (translate, rotate, scale, matrix)
  • Stylování částí SVG pomocí vloženého nebo externího CSS
  • SVG sprites – zobrazení vybrané části SVG, použití :target
  • SVG chameleón – media queries v SVG
  • Použití textu
  • Vložení rastrové grafiky (značka image)
  • Definice filtrů pro úpravu rastrové grafiky a jejich použití mimo SVG

SVG pro tvůrce animací

  • Animace pomocí vestavěných značek (SMIL): animate, animateTransform, animateColor, animateMotion
  • Animace pomocí JavaScriptu a DOM
  • Animace pomocí CSS

SVG pro programátory

  • Přístup k prvkům SVG JavaScriptem, manipulace s prvky, změna vlastností a dynamické vytváření nových (například ve spolupráci s AJAXem)
  • JavaScript vložený do SVG
  • Interakce uživatele s prvky SVG
  • Kontrola animací
  • Bezpečnostní problémy SVG
    Tištěné prezentace probírané látky

    Cena:
    v ceně kurzu
    Uvedené ceny jsou bez DPH.


    Graf návazností kurzů