Grafika wektorowa.

Lekcja: Grafika wektorowa

Część teoretyczna

1. Czym jest grafika wektorowa?

Grafika wektorowa to rodzaj grafiki komputerowej, która opisuje obrazy za pomocą kształtów geometrycznych, takich jak punkty, linie, krzywe, wielokąty i inne obiekty. Obiekty te są definiowane za pomocą równań matematycznych, a nie pikseli (jak w przypadku grafiki rastrowej).

Cechy grafiki wektorowej:

  • Nieskończona skalowalność: Można ją powiększać lub pomniejszać bez utraty jakości.
  • Lekka w rozmiarze: Pliki wektorowe są zwykle mniejsze niż grafika rastrowa, ponieważ zawierają informacje o kształtach, a nie o pojedynczych pikselach.
  • Łatwa edycja: Można zmieniać kolory, kształty i inne właściwości bez wpływu na całość projektu.

Przykłady zastosowań grafiki wektorowej:

  • Logo firmowe.
  • Ikony na stronach internetowych.
  • Ilustracje w książkach.
  • Projekty CAD (Computer-Aided Design).

2. Rodzaje grafiki dynamicznej opartej na wektorach

Grafika dynamiczna to grafika, która może zmieniać swój wygląd w czasie (np. animacje). W oparciu o grafikę wektorową możemy wyróżnić następujące rodzaje:

  1. Animacje wektorowe:

    • Tworzone przy użyciu narzędzi takich jak Adobe Animate lub CSS.
    • Przykłady: Reklamy w formacie SVG, ruchome elementy stron internetowych.

  2. Interaktywne grafiki wektorowe:

    • Wykorzystywane w aplikacjach webowych, gdzie użytkownik może wchodzić w interakcję z grafiką (np. mapy Google).
    • Tworzone za pomocą technologii SVG lub Canvas w HTML5.

  3. Projekty 3D wektorowe:

    • Stosowane w wizualizacjach architektonicznych, symulacjach i grach.
    • Przykład: Modele 3D, renderowane na podstawie wektorowych informacji.

  4. Grafiki na potrzeby druku:

    • Wektorowe projekty, które są dynamicznie dostosowywane (np. wizytówki, plakaty z możliwością zmiany danych).

3. Jak rozpoznać grafikę wektorową?

Rozpoznanie grafiki wektorowej można opierać na kilku wskaźnikach:

  1. Format pliku:

    • Popularne formaty grafiki wektorowej to:
      • SVG (Scalable Vector Graphics): Powszechnie używany w internecie.
      • AI (Adobe Illustrator): Format do edycji w Adobe Illustrator.
      • EPS (Encapsulated PostScript): Popularny w druku i grafice profesjonalnej.
      • PDF (Portable Document Format): Może zawierać elementy wektorowe.

  2. Brak widocznych pikseli:

    • Powiększenie grafiki wektorowej nie powoduje „ziarnistości” ani widocznych pikseli.

  3. Edytowalność:

    • Grafika wektorowa jest łatwa do modyfikacji w specjalistycznych programach, takich jak:
      • Adobe Illustrator.
      • CorelDRAW.
      • Inkscape (darmowy).

  4. Obiekty geometryczne:

    • Grafika wektorowa składa się z linii, krzywych i kształtów, a nie z pojedynczych pikseli.

Część praktyczna

Ćwiczenia

Ćwiczenie 1: Rozpoznawanie grafiki wektorowej

  1. Przygotuj zestaw obrazów: rastrowych i wektorowych (np. zdjęcia, ikony, ilustracje).
  2. W grupach oceńcie, które obrazy są grafiką wektorową, analizując:
    • Format pliku.
    • Skalowalność obrazu (powiększ obraz i zobacz, czy jakość się zmienia).
    • Elementy geometryczne.

Ćwiczenie 2: Tworzenie prostej grafiki wektorowej w SVG

  1. Otwórz edytor tekstowy i stwórz prostą grafikę wektorową w formacie SVG.
  2. Przykładowy kod: 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Prosta grafika wektorowa</title>
</head>
<body>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="50" fill="blue" />
        <rect x="50" y="150" width="100" height="50" fill="green" />
        <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2" />
    </svg>
</body>
</html>
  3. Otwórz plik w przeglądarce i zobacz efekt.

Ćwiczenie 3: Tworzenie animacji wektorowej

  1. W pliku HTML dodaj prostą animację SVG: 
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate attributeName="r" from="50" to="70" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>
  2. Obserwuj animację i zmodyfikuj wartości czasu lub rozmiarów.

Podsumowanie lekcji

Po tej lekcji uczniowie:

  • Zdefiniują, czym jest grafika wektorowa.
  • Poznają rodzaje grafiki dynamicznej opartej na wektorach.
  • Nauczą się rozpoznawać i tworzyć grafikę wektorową za pomocą narzędzi takich jak SVG lub Inkscape.