Grafika wektorowa w Inkscape — kształty, ścieżki i operacje logiczne

Po co się tego uczymy?

W poprzedniej lekcji poznałeś TEORIĘ grafiki wektorowej (wzory matematyczne zamiast pikseli). Teraz czas zobaczyć, jak w praktyce buduje się takie obrazy w darmowym, otwartoźródłowym programie Inkscape — od podstawowych kształtów, przez łączenie ich operacjami logicznymi (suma, różnica, część wspólna), aż po gotowe logo czy ikonę.

Teoria

Inkscape — darmowy, otwartoźródłowy edytor grafiki wektorowej, zapisujący pliki natywnie w formacie SVG (ten sam format, który poznałeś w poprzedniej lekcji jako czytelny kod tekstowy).

Podstawowe narzędzia kształtów: prostokąt, koło/elipsa, wielokąt/gwiazda, linia prosta oraz najważniejsze — narzędzie ŚCIEŻKI (Bézier pen), pozwalające rysować dowolne, płynne krzywe poprzez rozstawianie punktów kontrolnych.

Ścieżka i punkty kontrolne — każda skomplikowana krzywa w grafice wektorowej to w rzeczywistości ŚCIEŻKA (path) złożona z punktów węzłowych połączonych odcinkami prostymi lub krzywymi Béziera. Przeciąganie "uchwytów" przy punkcie kontrolnym zmienia krzywiznę odcinka — to najbardziej elastyczne, ale i najtrudniejsze narzędzie do opanowania.

Operacje logiczne na kształtach (Path operations) — pozwalają budować złożone kształty z prostych figur:

Suma (Union) — łączy dwa nakładające się kształty w jeden, większy kształt.
Różnica (Difference) — WYCINA kształt górnej figury z figury dolnej (np. wycięcie koła z kwadratu tworzy kwadrat z dziurą).
Część wspólna (Intersection) — zostawia TYLKO obszar, w którym oba kształty się nakładają.
Różnica symetryczna (Exclusion) — zostawia obszary, które NIE nakładają się wzajemnie (usuwa część wspólną).

Grupowanie obiektów (Group) — pozwala połączyć wiele osobnych kształtów w JEDEN obiekt, który można razem przesuwać, skalować i obracać, zachowując przy tym możliwość rozgrupowania i edycji pojedynczych elementów później.

Wektoryzacja rastra (Trace Bitmap) — Inkscape potrafi automatycznie PRZEKSZTAŁCIĆ wczytane zdjęcie rastrowe (np. zeskanowane logo) w przybliżony obraz wektorowy — przydatne przy odtwarzaniu starych, niskiej jakości logotypów w formie skalowalnej.

Schemat

OPERACJE LOGICZNE NA KSZTAŁTACH:

  Kwadrat  ∪  Koło        Kwadrat  −  Koło        Kwadrat  ∩  Koło
  (SUMA)                  (RÓŻNICA)               (CZĘŚĆ WSPÓLNA)

  ┌────┐                  ┌────┐                    ░░
  │ ▓▓▓╲___                │  ╲___                  ░▓▓░
  │▓▓▓▓▓▓ )               │   ○ )  <- wycięte       ░▓▓░
  └────┘  ‾‾‾               └────‾‾‾                  ░░
  (jeden większy          (kwadrat z                (tylko obszar
   kształt)                dziurą)                   nakładania się)

Przykład z życia

Projektant ikony aplikacji mobilnej rzadko rysuje skomplikowany kształt ręcznie ścieżką — zamiast tego składa go z prostych figur (koła, prostokąty) i łączy je operacjami logicznymi (np. "kubek z parującą kawą" to koło minus mniejsze koło w środku, plus dodane fale pary z operacji sumy) — szybciej i precyzyjniej niż rysowanie krzywą od zera.

kwadrat-minus-kolo.svg

<!-- Wynik operacji "Różnica" (kwadrat minus koło) zapisany jako
     JEDNA ścieżka (path) - dokładnie to eksportuje Inkscape -->
<svg width="200" height="200" viewBox="0 0 200 200">
    <path d="M 20,20 L 180,20 L 180,180 L 20,180 Z
             M 100,140 A 40,40 0 1 0 100,60
                        A 40,40 0 1 0 100,140 Z"
          fill="#3498db" fill-rule="evenodd" />
</svg>

<!-- "M" = przesuń pióro (Move), "L" = narysuj linię (Line),
     "A" = narysuj łuk (Arc), "Z" = zamknij ścieżkę.
     fill-rule="evenodd" sprawia, że wewnętrzny okrąg
     tworzy DZIURĘ zamiast być wypełniony tym samym kolorem -->

Komentarz i wyjaśnienie kodu

To, co w Inkscape robisz JEDNYM kliknięciem przycisku "Różnica", w kodzie SVG zapisuje się jako pojedyncza ścieżka <path> z dwoma pod-kształtami i atrybutem fill-rule="evenodd", który mówi przeglądarce "tam, gdzie kształty się nakładają NIEPARZYSTĄ liczbę razy, wypełnij kolorem, a gdzie PARZYSTĄ — zostaw dziurę". To dobry przykład tego, jak narzędzie graficzne (Inkscape) w tle generuje niskopoziomowy kod, podobnie jak wizualny projektant formularzy w Visual Studio generuje kod XAML/HTML, który poznałeś w innych działach kursu.

Ćwiczenie samodzielne

Zainstaluj Inkscape (lub użyj wersji online) i narysuj koło oraz nakładający się na nie kwadrat. Zaznacz oba kształty i po kolei wypróbuj wszystkie cztery operacje logiczne (Suma, Różnica, Część wspólna, Wykluczenie) z menu "Ścieżka" ("Path"), obserwując różnicę w wyniku.

Zadania do pracy własnej

Narysuj w Inkscape prosty napis lub kształt złożony wyłącznie z gotowych figur (koło, prostokąt, gwiazda) bez użycia narzędzia ścieżki — np. prosty bałwan z trzech kół różnej wielkości.
Zaprojektuj prostą ikonę (np. koperta, dom, żarówka) łącząc co najmniej 3 podstawowe kształty za pomocą operacji logicznych Suma i Różnica. Wyeksportuj wynik jako plik SVG i sprawdź w edytorze tekstu, jak wygląda wygenerowany kod.
Zaprojektuj kompletne, proste logo składające się z: (1) kształtu głównego zbudowanego operacjami logicznymi z co najmniej 2 figur, (2) warstwy tekstowej z nazwą, (3) pogrupowania całości w jeden obiekt (Group). Wyeksportuj wynik jako SVG, a następnie osobno jako PNG w dwóch różnych rozmiarach (np. 64×64 i 1024×1024) i porównaj jakość obu eksportów PNG względem oryginalnego pliku SVG powiększonego w przeglądarce.

Typowe błędy

Rysowanie skomplikowanych kształtów wyłącznie narzędziem ścieżki od zera zamiast łączenia prostszych figur operacjami logicznymi — dłuższe, trudniejsze do poprawienia i mniej precyzyjne niż budowanie z gotowych elementów.

Zapominanie o zgrupowaniu powiązanych elementów — bez grupowania przesunięcie "całego" logo wymaga ręcznego zaznaczenia każdego elementu osobno, co łatwo prowadzi do rozjechania kompozycji.

Eksport finalnego logo WYŁĄCZNIE do PNG bez zachowania oryginalnego pliku SVG — traci się możliwość późniejszej edycji i swobodnego skalowania bez utraty jakości.

Nawiązanie do egzaminu zawodowego

Po poznaniu edycji rastra (GIMP/Photopea) i wektora (Inkscape) w praktyce, w kolejnej lekcji zajmiemy się tym, co dzieje się "pod maską" tych formatów — czyli kompresją danych, która decyduje o tym, ile miejsca zajmuje gotowy plik graficzny.