Lekcja 2: Grafika wektorowa - projekty, formaty plikow graficznych

Czym jest grafika wektorowa?

Grafika wektorowa to sposob reprezentacji obrazu za pomoca obiektow geometrycznych opisanych matematycznie - linii, krzywych, wielokatow, okeregow itp. W przeciwienstwie do grafiki rastrowej, obraz wektorowy nie sklada sie z pikseli, lecz z sciezek (paths) zdefiniowanych przez punkty kontrolne i rownania matematyczne.

Grafika wektorowa vs rastrowa - porownanie

• Skalowanie: Wektor - bez utraty jakosci; Raster - utrata jakosci przy powiekszaniu
• Rozmiar pliku: Wektor - maly dla prostych ksztaltow; Raster - zalezy od rozdzielczosci
• Realizm: Wektor - trudny do odwzorowania zdjec; Raster - idealny do zdjec i realistycznych obrazow
• Edycja: Wektor - latwa modyfikacja poszczegolnych obiektow; Raster - edycja na poziomie pikseli
• Zastosowania: Wektor - logotypy, ikony, ilustracje, druk; Raster - fotografia, tekstury, grafika internetowa

Format SVG (Scalable Vector Graphics)

SVG to otwarty standard grafiki wektorowej oparty na jezyku XML. Jest obslugiwany przez wszystkie nowoczesne przegladarki internetowe.

Przyklad kodu SVG tworzacego czerwone kolo:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Zalety SVG: skalowalnosc, maly rozmiar, mozliwosc animacji CSS/JS, dostepnosc (tekst w SVG jest czytelny dla wyszukiwarek).

Inne formaty wektorowe

• AI (Adobe Illustrator) - natywny format programu Illustrator, najpopularniejszy w branzy
• EPS (Encapsulated PostScript) - uniwersalny format do druku i wymiany plikow
• PDF (Portable Document Format) - moze zawierac grafike wektorowa i rastrowa
• CDR (CorelDRAW) - format programu CorelDRAW

Inkscape - darmowy edytor grafiki wektorowej

Inkscape to otwartoźródlowy, darmowy program do tworzenia i edycji grafiki wektorowej. Obsluguje format SVG jako natywny i oferuje:

• Narzedzia rysowania - olowek, pioro (krzywe Beziera), ksztalty geometryczne
• Edycja wezlow - precyzyjna modyfikacja punktow kontrolnych sciezek
• Operacje na sciezkach - suma, roznica, przeciecie, wykluczone OR
• Warstwy - organizacja elementow projektu
• Tekst - dodawanie i formatowanie tekstu, tekst na sciezce
• Klonowanie - tworzenie kopii obiektow polaczonych z oryginalem
• Filtry i efekty - cienie, rozmycia, tekstury

Krzywe Beziera

Krzywe Beziera to fundamentalny element grafiki wektorowej. Sa to krzywe parametryczne definiowane przez punkty kontrolne. Najczesciej stosowane sa:

• Kwadratowe krzywe Beziera - 3 punkty kontrolne (poczatek, punkt kontrolny, koniec)
• Szescienne krzywe Beziera - 4 punkty kontrolne (poczatek, 2 punkty kontrolne, koniec)

Przesuwajac punkty kontrolne, mozna uzyskac dowolne ksztalty krzywych - to podstawa tworzenia logo, czcionek i ilustracji wektorowych.

Zastosowania grafiki wektorowej

• Logotypy i identyfikacja wizualna - skalowalnosc kluczowa (od wizytowki do billboardu)
• Ikony i interfejsy - ostrosc na kazdym ekranie (Retina, 4K)
• Mapy i infografiki - precyzyjne ksztalty i mozliwosc edycji
• Czcionki - kazda litera to obiekt wektorowy
• Animacje webowe - SVG moze byc animowane przez CSS i JavaScript
• Projekty do druku - ulotki, plakaty, opakowania