SVG Fundamentals

• Tło w HTML i CSS

Scala ble Vector Graphics (SVG) to oparty na XML format graficzny używany do tworzenia obrazów wektorowych 2D.

W tym prowadzonym przez instruktora szkoleniu na żywo uczestnicy poznają podstawy SVG podczas tworzenia swojego pierwszego projektu SVG.

Pod koniec tego szkolenia uczestnicy będą mogli

• Zrozumieć podstawy grafiki wektorowej i SVG
• Dowiedz się, jak tworzyć, modyfikować, używać i optymalizować SVG
• Dowiedz się, jak używać SVG z HTML i CSS
• Dowiedz się, jak wykonać podstawowe animacje za pomocą SVG
• Tworzenie własnych animacji SVG

Publiczność

• Deweloperzy i programiści
• Programiści Graphic Design
• Deweloperzy HTML i CSS zainteresowani dowiedzeniem się więcej o SVG

Format kursu

• Część wykładu, część dyskusji, ćwiczenia i ciężka praktyka praktyczna

Wprowadzenie

Przegląd grafiki wektorowej Scala

• Zrozumienie grafiki wektorowej
• Podstawy SVG
• Zastosowania i aplikacje SVG

Nauka podstaw korzystania z SVG

• Tworzenie SVG
• Używanie SVG jako obrazów
• Tworzenie obrazu SVG

Zagłębianie się w kod SVG

• Zrozumienie układu, struktury i atrybutów SVG
• Wprowadzenie do SVG Element
• Praca z SVG elementami graficznymi Element
• Praca z SVG kontenerami Element
• Praca z gradientem SVG Element

Używanie SVG z HTML i CSS

• Osadzanie SVG
• Modyfikowanie i stylizowanie SVG przy użyciu CSS
• Tworzenie SVG responsywnych

Tworzenie SVG Sprites

• Przegląd sprite'ów obrazów
• Używanie HTML wbudowanych SVG sprite'ów
• Odwoływanie się do zewnętrznych SVG sprite'ów w HTML
• Używanie CSS Inline SVG Sprites
• Używanie SVG identyfikatorów fragmentów

Optymalizacja SVG

Animowanie za pomocą SVG

• Używanie CSS dla SVG Animation
• Używanie SMIL dla SVG Animation
• Używanie JavaScript dla SVG Animation

Tworzenie pierwszego projektu SVG Logo Animation

• Konfigurowanie środowiska pracy
• Rysowanie SVG
• Modyfikowanie kodu SVG w celu stylizacji SVG
• Optymalizacja SVG
• Animowanie SVG

Rozwiązywanie problemów

Uwagi końcowe