SVG animácie

1h 54min
Čas
18
Kapitol
Programovanie
Kategória
5.0
Hodnotenie
Začiatočník
Level
český
Jazyk kurzu

Popis online kurzu SVG animácie

SVG grafika je tu s nami už pekne dlho, nájdeš ju v podstate na každom webe (a nielen na webe). Na rozdiel od rastrovej grafiky nie sú vektory limitované rozmermi alebo rozlíšením obrazovky a vyzerajú perfektne v akejkoľvek veľkosti – od malých ikoniek po celostránkové ilustrácie. Navyše sa s SVG môžeš pomocou CSS alebo JavaScriptu hrať rovnako ako s akýmkoľvek iným elementom. Dynamicky meniť jeho vlastnosti alebo animovať celé SVG aj jeho jednotlivé časti. Takto kúzliť by si s bežným PNG alebo JPG obrázkom nedokázal.

Ako v každej správnej hre musíš ale pre kúzlenie získať najskôr nejaké skills. Cieľom tohto online kurzu je pochopiť všetko od základov až po cool veci a posvietiť si pri tom na všetky temné zákutia vo vnútri SVG. Online kurz SVG animácie je určený skôr začínajúcim frontend vývojárom, ale aj pokročilejší tam určite nájdu dostatok užitočných a nových informácií.

Čo sa naučíš

  • Ako s SVG zaobchádzať v rámci projektu
  • Čo sa ukrýva vo vnútri SVG kódu
  • Ako môžeš na SVG aplikovať CSS štýly a animácie
  • Ako si upraviť SVG v kóde aj v grafickom editore
  • A tiež že SVG je ideálny formát nielen na ikonky

Čo všetko dostaneš

  • Videotutoriály o práci s SVG
  • Veľa odkazov na odporúčané zdroje a nástroje pre prácu s SVG
  • Odkazy na ďalšie zaujímavé články ku každej téme
  • Všetok zdrojový kód čo počas kurzu uvidíš
  • Certifikát o absolvovaní kurzu,
  • Podporu od lektora a odpovede na tvoje otázky v diskusnom fóre
  • Garancia vrátenia peňazí do 14 dní v prípade nespokojnosti s kurzom

Zoznam kapitol

Co je SVG a proč ho používat
1.1 Proč by tě mělo SVG zajímat a co tě čeká v kurzu
Dostupné len po zakúpení prístupu
1.2 Rastr vs Vektor
Dostupné len po zakúpení prístupu
Jak SVG vložit a spravovat na projektu
2.1 Rychlé vložení
Dostupné len po zakúpení prístupu
2.2 Sprite mapa
Dostupné len po zakúpení prístupu
2.3 Čištění kódu
Dostupné len po zakúpení prístupu
Nahoď styl
3.1 Obrys a výplň
Dostupné len po zakúpení prístupu
3.2 Dědičnost
Dostupné len po zakúpení prístupu
Pojďme si kreslit
4.1 Základní tvary
Dostupné len po zakúpení prístupu
4.2 Cesty
Dostupné len po zakúpení prístupu
4.3 Bézierovy křivky
Dostupné len po zakúpení prístupu
Animace
5.1 CSS animace
Dostupné len po zakúpení prístupu
5.2 Hamburger
Dostupné len po zakúpení prístupu
5.3 Animace podél cest
Dostupné len po zakúpení prístupu
SVG nejsou jenom ikonky
6.1 Grafy
Dostupné len po zakúpení prístupu
6.2 Mapy, plány, schémata
Dostupné len po zakúpení prístupu
Kde loupit, co nedělat a co naopak ano
7.1 Zdroje SVG
Dostupné len po zakúpení prístupu
7.2 Bad practice
Dostupné len po zakúpení prístupu
7.3 Úprava SVG v aplikaci Figma
Dostupné len po zakúpení prístupu

Hodnotenia kurzu

SVG animácie

Michal R.

SVG animácie

Rychlý kurz pro úplné začátečníky, kteří zaslechli, že nějaké SVG existuje, ale stále neví co se s ním dá dělat a jak funguje. Kurz je bez zbytečné omáčky okolo a je zaměřen na důležité věci. Super i nějaký ten příklad z praxe. Velmi mě překvapilo, jak lehce jde udělat příklad z "realitky". Určitě někde něco podobného použiji. Děkuji za tento kurz a jen tak dál. Držím palce v další tvorbě.

Tomáš J.

Pozri aj tieto kurzy

Lukáš Svoboda Lukáš Svoboda
Frontend kodér a UI/UX designer