Inkscape natywnie obsługuje SVG, więc pozwala tworzyć grafikę wektorową bez pracy na pikselach. W tym poradniku przygotujesz prostą ikonę, poznasz ścieżki i węzły, a następnie zapiszesz plik w formie gotowej do użycia w sieci.
Dlaczego Inkscape dobrze nadaje się do pracy z SVG?
Inkscape to otwartoźródłowy edytor grafiki wektorowej, którego głównym formatem jest SVG, czyli Scalable Vector Graphics. Plik nie przechowuje obrazu jako siatki pikseli, lecz opisuje kształty za pomocą współrzędnych, linii, krzywych, kolorów i innych parametrów.
Dzięki temu ikonę lub logo można powiększać bez typowego dla grafiki rastrowej rozmycia. SVG jest też standardem używanym przez przeglądarki, dlatego sprawdza się przy ikonach, ilustracjach i elementach interfejsów. Inkscape pozwala edytować te obiekty wizualnie, a w razie potrzeby także zaglądać do ich kodu XML.
Sprawdź także: Jak przekonwertować plik AI na SVG bez programu Illustrator?
Czym jest plik SVG?
SVG jest formatem opartym na XML. W jego kodzie znajdują się między innymi elementy opisujące prostokąty, okręgi, ścieżki i tekst. Ścieżka może składać się z odcinków oraz krzywych, a jej kształt można zmieniać za pomocą węzłów.
To odróżnia SVG od plików rastrowych, takich jak PNG czy JPEG. W grafice rastrowej każdy piksel ma określony kolor. W SVG obiekty są opisane matematycznie, więc ich rozmiar można zmieniać bez utraty ostrości. Format pozostaje szczególnie wygodny w internecie, choć jego rozmiar zależy od liczby i złożoności obiektów.
Zobacz także: Jak zmienić kolor obiektu w programie Illustrator?
Najważniejsze różnice między popularnymi formatami wektorowymi przedstawia tabela:
| Format | Główne zastosowanie | Web-ready | Edytowalność w Inkscape |
|---|---|---|---|
| SVG | Strony internetowe, ikony, ilustracje i interfejsy | Tak, natywna obsługa w przeglądarkach | Tak, bezpośrednia |
| AI | Projekty tworzone w Adobe Illustrator | Nie jako podstawowy format przeglądarki | Częściowa, zależna od zawartości pliku |
| EPS | Starsze procesy drukarskie i wymiana grafiki | Nie, wymaga konwersji | Możliwa po imporcie, z ograniczeniami |
| Dokumenty i finalne materiały do druku | Tak jako dokument, ale nie jako typowy kod grafiki webowej | Możliwa po imporcie |
Jak stworzyć pierwszy plik SVG w Inkscape?
Najprościej przećwiczyć podstawy na ikonie złożonej z prostokąta i koła. Poniższy proces odpowiada typowej pracy w Inkscape 1.x.
- Przygotuj obszar roboczy – uruchom Inkscape i wybierz Plik → Nowy. Rozmiar strony możesz ustawić w panelu właściwości dokumentu. Przy ikonie internetowej wystarczy niewielki kwadrat, na przykład 128 × 128 px.
- Narysuj podstawowe kształty – użyj narzędzia Prostokąt lub Elipsa. Przytrzymanie klawisza Ctrl pomaga zachować proporcje, więc łatwiej utworzysz idealne koło albo kwadrat.
- Dodaj własną ścieżkę – wybierz narzędzie Pióro, nazywane też narzędziem Béziera, i klikaj kolejne punkty obiektu. Kliknięcie i przeciągnięcie tworzy odcinek krzywy.
- Edytuj węzły – aktywuj Node Tool, czyli narzędzie Węzły. Zaznacz ścieżkę, aby zobaczyć jej punkty. Możesz przesuwać węzły, zmieniać typ punktu oraz regulować uchwyty krzywych.
- Połącz lub odejmij kształty – zaznacz obiekty i skorzystaj z menu Ścieżka. Polecenie Suma tworzy jeden kształt z kilku figur, a Różnica wycina górny obiekt z dolnego. Obiekty powinny być zaznaczone w odpowiedniej kolejności.
- Zapisz plik źródłowy – wybierz Plik → Zapisz jako i pozostaw format SVG. Do dalszej edycji wybierz zwykle Inkscape SVG, ponieważ zachowuje informacje potrzebne podczas pracy, takie jak warstwy i dodatkowe ustawienia.
- Przygotuj wersję do użycia w sieci – przy zapisie końcowym wybierz wariant Optimized SVG, jeśli jest dostępny w używanej wersji programu, i sprawdź ustawienia optymalizacji.
Podczas edycji przydatne są także podstawowe narzędzia i funkcje:
- Selector Tool – zaznacza, przesuwa, skaluje i obraca obiekty.
- Node Tool – zmienia przebieg ścieżek i położenie węzłów.
- Bezier Tool – tworzy linie oraz niestandardowe ścieżki.
- Shape Tools – rysują prostokąty, elipsy, gwiazdy i wielokąty.
- Fill and Stroke – ustawia wypełnienie, kolor obrysu i jego szerokość.
Zapis i eksport to różne operacje. Polecenie Zapisz jako tworzy plik projektu, który możesz później ponownie otworzyć i edytować. Panel Eksport służy natomiast do przygotowania wybranego obiektu, rysunku lub strony w innym formacie, na przykład PNG. Jeśli potrzebujesz pliku wektorowego do strony, zapisuj SVG, a nie eksportuj projektu do bitmapy.
Sprawdź także: Affinity Designer – jak tworzyć rysunki i grafiki wektorowe?
Jak przygotować SVG do publikacji w sieci?
Czysty plik SVG ładuje się sprawniej i łatwiej go później modyfikować. Nie każda informacja zapisana przez edytor jest potrzebna przeglądarce. Przed wdrożeniem sprawdź następujące elementy:
- Grupuj powiązane obiekty – uporządkowane grupy ułatwiają późniejszą edycję i zmniejszają ryzyko przypadkowego przesunięcia elementów.
- Upraszczaj ścieżki – usuń zbędne węzły, jeśli nie zmieniają widocznego kształtu. Zbyt wiele punktów zwiększa rozmiar kodu.
- Usuń zbędne metadane – informacje o historii dokumentu, programie czy nieużywanych ustawieniach nie zawsze są potrzebne w wersji webowej.
- Konwertuj obrysy na ścieżki, gdy to konieczne – polecenie Obrys w ścieżkę zamienia szerokość obrysu w rzeczywisty kształt. Jest to przydatne, gdy wygląd musi pozostać taki sam niezależnie od środowiska.
- Usuń nieużywane elementy – sprawdź, czy dokument nie zawiera ukrytych obiektów, pustych grup lub kopii pozostawionych poza stroną.
Uwaga: zbyt mocna optymalizacja może zmienić wygląd grafiki albo usunąć informacje przydatne przy dalszej edycji. Zachowaj osobno pełny plik roboczy Inkscape, a do strony używaj jego oczyszczonej kopii. „Zaśmiecony” kod nie zawsze powoduje widoczny problem, ale może zwiększać rozmiar pliku i utrudniać pracę z SVG w kodzie strony.
Co dalej?
Gdy opanujesz kształty, węzły i operacje na ścieżkach, zajrzyj do Edytora XML w Inkscape. Pozwala on obserwować zależność między obiektami widocznymi na płótnie a elementami zapisanymi w kodzie SVG. To dobry następny krok, jeśli chcesz świadomie poprawiać pliki używane w projektach internetowych.
