Grafika wektorowa - co to jest i kiedy jej używać

Klient przysyła logo do umieszczenia na stronie. Plik nazywa się logo.jpg, waży sto dwadzieścia kilobajtów i ma czterysta pikseli szerokości. Wygląda dobrze w podglądzie, ale po wstawieniu w nagłówek na ekranie z wysoką rozdzielczością krawędzie liter robią się rozmyte, a wokół znaku widać szarawą obwódkę. To moment, w którym zaczyna się rozmowa o grafice wektorowej.

Różnica między wektorem a rastrem to nie akademicka ciekawostka, tylko decyzja, która wraca przy każdym druku wizytówki, przy każdym nowym rozmiarze banera i przy każdej zmianie kolorystyki znaku. Zrozumienie jej raz oszczędza lata drobnych problemów, a przy okazji pozwala świadomie rozmawiać z grafikiem i drukarnią.

W tym tekście tłumaczymy, czym jest grafika wektorowa i jak działa, czym różni się od rastrowej, jakie formaty są w użyciu, gdzie wektor wygrywa, a gdzie przegrywa, oraz jak wykorzystać go na stronie internetowej. Piszemy z perspektywy zespołu, który codziennie osadza cudze pliki graficzne w projektach, więc sporo miejsca zajmują sprawy praktyczne: o co poprosić grafika i co zrobić, gdy oryginałów już nie ma.

Czym jest grafika wektorowa

Grafika wektorowa, nazywana też obiektową, to sposób zapisu obrazu, w którym plik nie przechowuje kolorów poszczególnych punktów, tylko opis kształtów. Zamiast informacji "w tym miejscu jest czerwony piksel" zapisane jest polecenie w rodzaju "narysuj okrąg o środku w punkcie o danych współrzędnych, promieniu takim a takim, wypełniony kolorem czerwonym".

Konsekwencja jest prosta i zarazem kluczowa. Skoro plik zawiera instrukcje, a nie gotowy obraz, to program wyświetlający może narysować kształt w dowolnym rozmiarze. Powiększenie dziesięciokrotne oznacza po prostu przeliczenie tych samych wzorów przy innej skali, więc krawędzie pozostają ostre. W grafice rastrowej powiększenie oznacza rozciągnięcie istniejących pikseli, a te nie mają skąd wziąć nowych szczegółów.

Dlatego wektor jest naturalnym wyborem tam, gdzie ten sam element musi działać w wielu rozmiarach: logo na wizytówce i na banerze wielkoformatowym, ikona w interfejsie i w prezentacji, znak na koszulce i na fakturze. Jeden plik źródłowy obsługuje wszystkie te zastosowania.

Jak zbudowany jest plik wektorowy

Podstawowym budulcem są punkty kontrolne, zwane też węzłami, oraz łączące je odcinki i krzywe. Krzywe opisuje się najczęściej za pomocą krzywych Béziera: każdy węzeł ma uchwyty sterujące, które określają, w którą stronę i jak mocno linia się wygina. Z takich krzywych składa się kontur, a kontur może mieć obrys o określonej grubości i kolorze oraz wypełnienie.

Wypełnienie bywa jednolite, gradientowe albo deseniowe. Do tego dochodzą przezroczystość, kolejność warstw, grupy obiektów i maski przycinające. Tekst w grafice wektorowej może pozostać tekstem edytowalnym albo zostać zamieniony na krzywe, czyli na zwykłe kształty, i to rozróżnienie ma duże znaczenie praktyczne przy przekazywaniu plików do druku.

Rozmiar pliku zależy więc od liczby obiektów, a nie od wymiarów obrazu. Prosty znak firmowy z kilkunastu kształtów może ważyć kilka kilobajtów niezależnie od tego, czy wydrukujesz go na znaczku pocztowym, czy na billboardzie. Ilustracja z tysiącami punktów potrafi natomiast urosnąć do rozmiarów, przy których zwykłe zdjęcie byłoby lżejsze.

Wektor a raster: różnica w praktyce

Grafika rastrowa, nazywana też bitmapową, to siatka pikseli. Każdy piksel ma swój kolor, a obraz to ich uporządkowany zbiór. Zdjęcie z aparatu, zrzut ekranu i większość tego, co widzisz w internecie, to raster. Jego siłą jest wierne oddanie fotograficznych detali i płynnych przejść tonalnych, czego wektor nie potrafi w naturalny sposób.

Wektor wygrywa tam, gdzie obraz składa się z wyraźnych kształtów i płaskich albo prosto cieniowanych powierzchni. Logo, ikona, mapa, wykres, schemat, ilustracja o graficznym charakterze, krój pisma. Raster wygrywa tam, gdzie liczy się fotorealizm i miękkie przejścia: zdjęcia produktowe, portrety, tekstury, obrazy generowane przez modele AI.

Praktyczna reguła brzmi więc prosto. Jeśli grafika ma być powiększana, przerabiana, drukowana w różnych rozmiarach albo wycinana ploterem, potrzebujesz wektora. Jeśli grafika przedstawia rzeczywistość uchwyconą obiektywem, pozostaje raster i trzeba go dobrze zoptymalizować, o czym piszemy w tekście o optymalizacji obrazów na stronie.

Formaty plików wektorowych

Formatów jest kilka i każdy ma swoje miejsce. Mylenie ich to najczęstsze źródło nieporozumień między klientem, grafikiem a drukarnią, więc warto poświęcić chwilę na rozróżnienie.

SVG: standard internetu

SVG to otwarty format oparty na języku znaczników, spokrewniony z HTML. Plik SVG można otworzyć w edytorze tekstu i zobaczyć opis kształtów w czytelnej postaci. Przeglądarki rozumieją go natywnie, więc grafikę można osadzić bezpośrednio w kodzie strony, stylować z poziomu arkusza stylów, a nawet animować.

To czyni SVG domyślnym wyborem dla logo, ikon i prostych ilustracji w serwisach internetowych. Plik jest zwykle bardzo lekki, wygląda ostro na każdym ekranie, w tym na wyświetlaczach o wysokiej gęstości pikseli, i skaluje się bez żadnych dodatkowych wersji. Nie trzeba przygotowywać osobnych plików dla telefonu i dla monitora.

SVG ma też ograniczenia. Bardzo złożone ilustracje z tysiącami punktów obciążają przeglądarkę przy renderowaniu, a niektóre efekty graficzne, jak zaawansowane filtry czy tryby mieszania warstw, bywają w różny sposób obsługiwane przez różne przeglądarki. Przy skomplikowanych grafikach rozsądniej wyeksportować raster w kilku rozmiarach.

AI, EPS i PDF: świat druku

Plik z rozszerzeniem AI to format roboczy programu Adobe Illustrator. Zawiera pełną strukturę projektu: warstwy, grupy, edytowalny tekst, ustawienia kolorów. To najbardziej wartościowa forma pliku źródłowego, bo pozwala wprowadzić dowolną zmianę, ale otwiera się poprawnie głównie w oprogramowaniu Adobe.

EPS to starszy, uniwersalny format wymiany, przez lata standard w komunikacji z drukarniami. Wciąż bywa wymagany, choć jest stopniowo wypierany. PDF w wersji przeznaczonej do druku potrafi przechowywać zarówno obiekty wektorowe, jak i rastrowe, dlatego stał się dziś najwygodniejszym formatem przekazywania materiałów: otworzy go każdy, a przy poprawnym zapisie zachowuje pełną jakość.

Warto zapamiętać jedno rozróżnienie. PDF może być wektorowy, ale może też zawierać wyłącznie wklejone zdjęcie, i wtedy nie daje żadnych zalet skalowania. Sama końcówka nazwy pliku niczego nie gwarantuje, o czym łatwo przekonać się, próbując powiększyć taki dokument do dwustu procent.

CDR, DXF i formaty specjalistyczne

CDR to format programu CorelDRAW, popularnego zwłaszcza w polskich drukarniach i studiach reklamy. Bywa problematyczny w wymianie, bo starsze wersje programu nie otwierają plików zapisanych w nowszych, dlatego przy przekazywaniu materiałów warto pytać o wersję albo prosić o dodatkowy eksport do PDF.

DXF i DWG pochodzą ze świata projektowania technicznego i architektury. Używa się ich przy wycinaniu laserem, obróbce CNC i w dokumentacji technicznej. W typowej pracy nad stroną internetową nie występują, ale pojawiają się, gdy klient produkuje elementy fizyczne i chce spójności między dokumentacją a materiałami marketingowymi.

Osobną kategorią są formaty czcionek, które w istocie też są zbiorem kształtów wektorowych. Każda litera w kroju pisma to kontur opisany krzywymi, dlatego tekst na stronie zachowuje ostrość przy dowolnym powiększeniu, dokładnie z tego samego powodu co logo w SVG.

Zalety grafiki wektorowej

Pierwszą i najważniejszą zaletą jest skalowalność bez utraty jakości. Ten sam plik obsłuży favikonę o wymiarach kilkunastu pikseli i naklejkę na samochód dostawczy. W praktyce oznacza to koniec z pytaniem "czy macie logo w większej rozdzielczości", które potrafi wracać kilka razy w roku.

Druga zaleta to niewielki rozmiar przy prostych grafikach. Ikona w SVG waży zwykle od jednego do kilku kilobajtów, podczas gdy jej rastrowy odpowiednik przygotowany na ekrany o wysokiej gęstości potrafi ważyć kilkadziesiąt. Przy zestawie kilkunastu ikon różnica robi się widoczna w czasie ładowania strony, co ma znaczenie dla wskaźników Core Web Vitals.

Trzecia to łatwość edycji. Zmiana koloru logo w wektorze to kliknięcie w kształt i wybór nowej barwy. W rastrze oznacza żmudne zaznaczanie obszarów, walkę z antyaliasingiem na krawędziach i zwykle gorszy efekt. Podobnie z modyfikacją proporcji, usunięciem elementu czy przygotowaniem wersji monochromatycznej.

Czwarta zaleta bywa niedoceniana: wektor jest edytowalny w nieskończoność bez degradacji. Raster traci jakość przy każdym zapisie w formacie stratnym, więc plik przesyłany między osobami i wielokrotnie zapisywany stopniowo się psuje. Wektor pozostaje identyczny niezależnie od liczby otwarć i zapisów.

Co daje wektor na stronie internetowej

Na stronie wektor rozwiązuje problem, który inaczej wymaga przygotowywania wielu wariantów tego samego obrazka. Bez SVG trzeba zwykle eksportować logo w kilku rozmiarach i podpinać je warunkowo, żeby na telefonie ładowała się mniejsza wersja, a na dużym monitorze większa. Z SVG wystarczy jeden plik, co upraszcza cały układ opisany w tekście o responsywności strony.

Drugi zysk to możliwość stylowania. Ikona osadzona bezpośrednio w kodzie strony może zmieniać kolor przy najechaniu kursorem, dostosowywać się do trybu ciemnego albo dziedziczyć barwę tekstu, w którym stoi. Wersja rastrowa wymagałaby osobnych plików dla każdego stanu.

Trzeci to animacja. Prosty wykres, który rysuje się przy przewinięciu strony, albo ikona reagująca na kliknięcie to efekty osiągalne w SVG bez ciężkich bibliotek. Warto tylko pamiętać o umiarze: animacje mają wspierać czytelność, a nie odciągać uwagę od treści i wydłużać czas ładowania. Więcej o tej równowadze piszemy przy okazji projektowania doświadczeń użytkownika.

Ograniczenia grafiki wektorowej

Wektor nie nadaje się do fotografii. Odwzorowanie zdjęcia za pomocą kształtów wymagałoby milionów obiektów, a efekt i tak byłby uproszczony. Dlatego zdjęcia produktowe, portrety zespołu i fotografie realizacji zawsze pozostają rastrem, niezależnie od tego, jak nowoczesna jest strona.

Drugie ograniczenie to złożoność. Bardzo szczegółowa ilustracja wektorowa potrafi mieć plik cięższy od rastra o tej samej treści wizualnej, a jej wyświetlenie obciąża procesor, bo przeglądarka musi przeliczyć każdy kształt. Przy takich grafikach opłaca się wyeksportować wersję rastrową i podać ją użytkownikowi, zostawiając wektor jako plik źródłowy.

Trzecie to kwestia narzędzi i kompetencji. Tworzenie i edycja wektorów wymaga innego oprogramowania niż obróbka zdjęć oraz innego sposobu myślenia o obrazie. Osoba, która swobodnie retuszuje fotografie, niekoniecznie poradzi sobie z rysowaniem krzywymi, i odwrotnie.

SVG a bezpieczeństwo

Ponieważ SVG jest formatem tekstowym spokrewnionym z HTML, może zawierać skrypty. To zaleta przy tworzeniu interaktywnych grafik, ale i ryzyko, gdy plik pochodzi z zewnątrz. Serwis pozwalający użytkownikom wgrywać obrazki powinien traktować SVG ostrożnie i oczyszczać go z niepotrzebnych elementów.

Praktyka jest prosta: pliki od zaufanego grafika osadzamy normalnie, pliki wgrywane przez użytkowników przepuszczamy przez filtr usuwający skrypty i odwołania zewnętrzne albo w ogóle nie akceptujemy tego formatu w formularzach. Wiele systemów zarządzania treścią domyślnie blokuje wgrywanie SVG właśnie z tego powodu.

Jeśli korzystasz z popularnego systemu, na przykład opisanego w tekście o tym, czym jest WordPress, i chcesz włączyć obsługę tego formatu, zrób to świadomie i ogranicz uprawnienia do zaufanych kont redakcyjnych. To jeden z tych drobiazgów, które warto ustalić na etapie wdrożenia, obok innych ustawień opisanych w tekście o systemach zarządzania treścią.

Programy do grafiki wektorowej

Rynek dzieli się na rozwiązania płatne, bezpłatne i przeglądarkowe. Wybór zależy od tego, czy tworzysz grafikę zawodowo, czy tylko potrzebujesz drobnych poprawek w gotowych plikach.

Wśród narzędzi zawodowych najczęściej spotyka się Adobe Illustrator, standard w agencjach i studiach graficznych, oraz CorelDRAW, mocno zakorzeniony w branży poligraficznej i reklamy zewnętrznej. Do tego dochodzi Affinity Designer, ceniony za jednorazową opłatę zamiast abonamentu, oraz Sketch i Figma po stronie projektowania interfejsów.

Po stronie bezpłatnej króluje Inkscape, otwarte oprogramowanie z pełnym wsparciem dla SVG, wystarczające do większości zadań, w tym do przygotowania logo czy zestawu ikon. Do drobnych operacji, jak zmiana koloru czy konwersja formatu, wystarczają też narzędzia przeglądarkowe, choć przy plikach klienta warto uważać, gdzie się je wgrywa.

Narzędzia do projektowania interfejsów

Figma i podobne narzędzia zajmują dziś szczególne miejsce, bo łączą pracę wektorową z projektowaniem układu strony. Projektant rysuje w nich ikony i elementy interfejsu, a jednocześnie buduje makiety podstron, które programista otwiera i z których pobiera gotowe pliki SVG.

Dla firmy zamawiającej stronę oznacza to wygodny tryb współpracy: projekt jest w jednym miejscu, komentarze zostają przy konkretnych elementach, a eksport grafik nie wymaga dodatkowej rundy maili. Warto zapytać wykonawcę, w czym projektuje i czy dostaniesz dostęp do pliku projektowego po zakończeniu prac.

Ten ostatni punkt bywa pomijany, a jest istotny. Dostęp do projektu to możliwość późniejszych zmian bez odtwarzania wszystkiego od zera, podobnie jak dostęp do plików źródłowych logo. Warto zapisać to w ustaleniach razem z pozostałymi elementami opisanymi w poradniku o procesie tworzenia strony internetowej.

Gdzie używa się grafiki wektorowej

Najbardziej oczywiste zastosowanie to identyfikacja wizualna. Logo, znak firmowy, sygnet, wersje poziome i pionowe, warianty monochromatyczne. Wszystkie te elementy muszą działać w skrajnie różnych rozmiarach i na różnych tłach, więc powstają w wektorze i tylko w wektorze.

Drugi obszar to materiały drukowane: wizytówki, ulotki, katalogi, opakowania, roll-upy, oznakowanie wnętrz. Drukarnia potrzebuje plików, które można wyskalować do formatu maszyny i rozłożyć na kolory farb. Zdjęcia w takich materiałach zostają rastrowe, ale cała warstwa graficzna i typograficzna jest wektorowa.

Trzeci to produkcja fizyczna: wycinanie folii ploterem, grawerowanie laserem, haft komputerowy, nadruk na odzieży. Maszyna potrzebuje ścieżki, po której ma prowadzić nóż, wiązkę albo igłę, a ścieżka to nic innego jak kontur wektorowy.

Czwarty obszar to interfejsy i strony internetowe: ikony, piktogramy, ilustracje, wykresy, mapy, elementy dekoracyjne. Szczególnie widać to na stronach sprzedażowych, gdzie grafika prowadzi wzrok do formularza, o czym piszemy w tekście o landing page. Piąty obszar to wizualizacja danych, gdzie wektor pozwala generować wykresy programowo i wyświetlać je ostro na każdym urządzeniu.

Logo: dlaczego zawsze w wektorze

Logo jest jedynym elementem identyfikacji, który pojawia się dosłownie wszędzie: na stronie, w stopce maila, na fakturze, w ogłoszeniu o pracę, na plandece samochodu, na gadżecie reklamowym. Każde z tych miejsc ma inne wymagania co do rozmiaru, tła i techniki reprodukcji.

Jeśli masz plik wektorowy, każde z tych zastosowań to eksport w odpowiednim formacie. Jeśli masz tylko obrazek rastrowy w rozmiarze, w jakim akurat go dostałeś, każde nowe zastosowanie to problem: albo znak jest rozmyty, albo trzeba go odtwarzać ręcznie, albo rezygnujesz z pomysłu.

Dlatego przy zamawianiu identyfikacji warto z góry ustalić, że przekazanie projektu obejmuje pliki źródłowe w wektorze wraz z prawem do ich modyfikowania. Bez tego zapisu bywa, że po zakończeniu współpracy zostajesz z eksportami, a oryginał pozostaje u autora.

Ikony i systemy ikon

Ikony na stronie mają jedno zadanie: skracać czas rozumienia. Koszyk, telefon, koperta, strzałka, znacznik lokalizacji. Wszystkie powinny pochodzić z jednego zestawu, mieć tę samą grubość linii, ten sam styl narożników i ten sam rozmiar siatki projektowej, bo inaczej strona wygląda na sklejoną z przypadkowych elementów.

Technicznie najczęściej stosuje się dziś dwa podejścia. Pierwsze to osadzanie każdej ikony bezpośrednio w kodzie strony jako SVG, co daje pełną kontrolę nad kolorem i animacją. Drugie to jeden plik zbiorczy, z którego poszczególne symbole są wywoływane po identyfikatorze, co ogranicza liczbę zapytań do serwera.

Dawniej popularne były czcionki ikonowe, w których symbole podstawiano zamiast znaków. Dziś odchodzi się od nich, bo utrudniają dostępność, potrafią wyświetlić przypadkowy znak przy problemach z ładowaniem i nie pozwalają na wielokolorowe symbole. SVG rozwiązuje wszystkie te problemy naraz.

Ilustracje i grafiki na stronę

Ilustracje wektorowe stały się rozpoznawalnym stylem stron usługowych: uproszczone postacie, płaskie kolory, delikatne cienie. Ich zaletą jest lekkość plików i spójność, wadą wrażenie generyczności, jeśli pochodzą z popularnej biblioteki gotowych grafik i widnieją na kilkuset innych stronach.

Jeśli decydujesz się na gotowe zestawy, warto przynajmniej dostosować kolorystykę do palety marki, co przy wektorze jest kwestią kilku minut. Jeszcze lepiej działa zamówienie kilku autorskich ilustracji kluczowych dla oferty i uzupełnienie ich elementami z biblioteki w tym samym stylu. Ten sam mechanizm co przy tekstach: własne materiały wyróżniają, powielane rozmywają przekaz, co opisujemy przy okazji content marketingu.

Warto też pamiętać o licencjach. Darmowe zbiory grafik mają różne warunki: część wymaga podania autora, część zabrania użycia komercyjnego, część nie pozwala na modyfikacje. Sprawdzenie licencji zajmuje minutę, a jej naruszenie potrafi skończyć się wezwaniem do zapłaty.

Konwersja między wektorem a rastrem

Zamiana wektora na raster to operacja prosta i bezstratna w tym sensie, że zawsze się udaje. Nazywa się rasteryzacją i sprowadza do wyrenderowania kształtów w zadanej rozdzielczości. Eksport logo z pliku źródłowego do pliku PNG w rozmiarze potrzebnym do konkretnego zastosowania to codzienność.

Operacja odwrotna, czyli wektoryzacja, jest znacznie trudniejsza. Program analizuje obraz rastrowy, wykrywa krawędzie i obszary jednolitego koloru, a następnie próbuje odtworzyć je jako kształty. Przy prostym, kontrastowym logo na białym tle efekt bywa bardzo dobry. Przy zdjęciu powstaje karykatura złożona z plam koloru.

Automatyczna wektoryzacja zawsze wymaga ręcznego poprawienia: usunięcia zbędnych węzłów, wygładzenia krzywych, wyrównania kątów i odtworzenia tekstu właściwym krojem pisma zamiast obrysowanych liter. Dobrze wykonana konwersja starego logo to zwykle kilka godzin pracy grafika, a nie kliknięcie w przycisk.

Co zrobić, gdy nie ma plików źródłowych

Sytuacja jest częstsza, niż mogłoby się wydawać, zwłaszcza w firmach z długą historią. Agencja, która robiła logo piętnaście lat temu, już nie istnieje, dysk z projektami dawno padł, a jedyne, co zostało, to obrazek wycięty ze starej strony.

Ścieżka jest wtedy dwuetapowa. Najpierw zbierasz najlepszy dostępny materiał: największy plik, jaki uda się znaleźć, oraz materiały drukowane, które można zeskanować w wysokiej rozdzielczości. Potem grafik odtwarza znak od nowa w wektorze, korzystając z tych materiałów jako wzoru.

Przy okazji takiej operacji warto rozważyć delikatne odświeżenie: wyrównanie proporcji, poprawienie odstępów, zamianę przestarzałego kroju pisma na czytelniejszy. To moment, w którym niewielkim kosztem można naprawić rzeczy, które przez lata drażniły, a nie było pretekstu, żeby się nimi zająć.

Kolory: RGB, CMYK i przygotowanie do druku

Ekran świeci, papier odbija światło, więc obie techniki opisują kolor inaczej. RGB to model addytywny używany na ekranach: kolory powstają ze światła czerwonego, zielonego i niebieskiego. CMYK to model subtraktywny używany w druku: kolory powstają z farb błękitnej, purpurowej, żółtej i czarnej.

Konsekwencja praktyczna jest taka, że intensywne barwy widoczne na monitorze bywają nieosiągalne w druku, zwłaszcza nasycone zielenie i pomarańcze. Dlatego przy projektowaniu identyfikacji ustala się kolory w obu przestrzeniach, a często dodatkowo w systemie kolorów dodatkowych stosowanym przy bardziej wymagających zleceniach.

Dobrze przygotowana księga znaku podaje wartości koloru w RGB do zastosowań ekranowych, w CMYK do druku, w zapisie szesnastkowym do stron internetowych oraz numer koloru dodatkowego. Dzięki temu logo wygląda tak samo niezależnie od tego, kto i gdzie je reprodukuje.

Co przekazać drukarni

Standardowy zestaw wymagań drukarni obejmuje kilka rzeczy. Plik w formacie PDF przygotowanym do druku albo w formacie uzgodnionym z konkretnym zakładem. Teksty zamienione na krzywe, żeby brak czcionki na komputerze drukarni nie podmienił kroju pisma. Kolory w przestrzeni CMYK.

Do tego spady, czyli zapas grafiki wychodzący poza linię cięcia, zwykle trzy milimetry z każdej strony, oraz margines bezpieczeństwa, w którym nie umieszcza się istotnych elementów, bo nóż może przyciąć nieco inaczej. Osadzone albo dołączone zdjęcia w odpowiedniej rozdzielczości, standardowo trzysta punktów na cal w skali jeden do jednego.

Warto zapytać drukarnię o jej wymagania przed przygotowaniem plików, a nie po. Każdy zakład ma swoje preferencje co do formatów, profili kolorystycznych i sposobu oznaczania linii cięcia, a poprawki na etapie akceptacji kosztują czas i opóźniają termin.

Jak stosować SVG na stronie internetowej

Są trzy sposoby osadzenia i każdy ma inne zastosowanie. Pierwszy to zwykły znacznik obrazka wskazujący na plik SVG. Najprostszy, dobry dla grafik dekoracyjnych, które nie muszą reagować na style strony. Przeglądarka traktuje taki plik jak każdy inny obrazek i może go zapisać w pamięci podręcznej.

Drugi to osadzenie kodu SVG bezpośrednio w treści strony. Grafika staje się wtedy częścią dokumentu, można ją stylować i animować, ale powiększa rozmiar samej strony i nie jest zapisywana osobno w pamięci podręcznej. Ten sposób sprawdza się przy niewielkich ikonach używanych w wielu stanach.

Trzeci to tło ustawione w arkuszu stylów. Wygodne przy elementach dekoracyjnych i wzorach, choć wyklucza interakcję z poszczególnymi częściami grafiki. Wybór między tymi trzema sposobami zależy od tego, czy grafika ma być interaktywna, jak często się powtarza i jak duża jest.

Optymalizacja plików SVG

Pliki wyeksportowane z programów graficznych zawierają dużo zbędnych danych: metadane edytora, ukryte warstwy, nadmiarową precyzję współrzędnych zapisaną z dokładnością do wielu miejsc po przecinku, puste grupy. Wyczyszczenie tego potrafi zmniejszyć plik o połowę bez żadnej widocznej zmiany.

Do czyszczenia służą dedykowane narzędzia, dostępne zarówno jako aplikacje przeglądarkowe, jak i wtyczki do procesu budowania strony. Warto uruchamiać je automatycznie przy publikacji, żeby nie zależeć od tego, czy ktoś pamiętał o ręcznym kroku.

Poza czyszczeniem warto zadbać o kompresję przesyłu na serwerze, bo SVG jako format tekstowy kompresuje się znakomicie, często do jednej czwartej rozmiaru. To ustawienie po stronie serwera, które przy okazji przyspiesza wszystkie pozostałe zasoby tekstowe, o czym piszemy w tekście o przyspieszaniu strony internetowej.

Dostępność grafik wektorowych

Grafika niosąca treść potrzebuje tekstowego opisu, tak samo jak każdy inny obrazek. Przy SVG osadzonym jako obrazek wystarczy standardowy atrybut opisu. Przy kodzie osadzonym bezpośrednio w stronie stosuje się element tytułu wewnątrz grafiki albo etykietę dostępności.

Grafiki czysto dekoracyjne powinny być z kolei ukryte przed czytnikami ekranu, żeby nie zaśmiecać odczytu. Ikona obok napisu "Zadzwoń" nie wnosi nic ponad to, co mówi tekst, więc czytnik nie powinien jej ogłaszać. To drobiazg, który odróżnia stronę zrobioną porządnie od zrobionej pospiesznie.

Osobna kwestia to kontrast. Cienkie linie ikon w jasnoszarym kolorze wyglądają elegancko na makiecie i znikają na ekranie telefonu w słońcu. Warto sprawdzać kontrast elementów graficznych tak samo jak kontrast tekstu, bo od tego zależy, czy interfejs da się obsłużyć w realnych warunkach. Podobnie działa hierarchia wizualna budowana nagłówkami: obie warstwy mają prowadzić czytelnika, a nie go zatrzymywać.

Współpraca z grafikiem: o co poprosić

Zamawiając projekt, warto z góry określić listę plików, które mają trafić do Ciebie po zakończeniu prac. Minimalny zestaw przy identyfikacji to: plik źródłowy w formacie edytowalnym, wersja w PDF do druku, eksport SVG do zastosowań internetowych oraz kilka rozmiarów PNG z przezroczystym tłem.

Do tego warianty: wersja podstawowa, wersja pozioma i pionowa, sygnet bez napisu, wersja jednokolorowa czarna i biała do zastosowań, w których kolor nie jest możliwy. Każdy z tych wariantów przyda się prędzej niż później, a dorabianie ich pojedynczo kosztuje więcej niż zamówienie od razu.

Warto też ustalić prawa. Przekazanie plików to nie to samo co przeniesienie praw autorskich majątkowych, a bez nich nie możesz swobodnie modyfikować znaku ani zlecać tego komuś innemu. Zapis w umowie zajmuje jedno zdanie i zamyka temat na zawsze.

Księga znaku i system identyfikacji

Księga znaku to dokument opisujący, jak używać logo: minimalne rozmiary, pole ochronne wokół znaku, dopuszczalne tła, przykłady zastosowań zakazanych, kolory w każdej przestrzeni, kroje pisma marki. Przy większych organizacjach rozrasta się do pełnego systemu identyfikacji obejmującego szablony dokumentów i materiałów.

Dla małej firmy wystarczy kilka stron, ale nawet ten skrócony dokument oszczędza mnóstwo nerwów. Gdy trzeci podwykonawca z rzędu rozciągnie logo w niewłaściwych proporcjach albo umieści je na tle, na którym znika, wystarczy odesłać do konkretnej strony zamiast tłumaczyć wszystko od nowa.

Przy zamawianiu strony internetowej księga znaku jest też punktem wyjścia dla projektanta: definiuje paletę, typografię i charakter marki, dzięki czemu serwis nie wygląda jak oderwany od reszty komunikacji. Jeśli jej nie masz, warto przynajmniej zebrać kolory i kroje pisma w jednym dokumencie.

Najczęstsze błędy przy pracy z grafiką wektorową

Błąd pierwszy: przekazywanie logo w formacie rastrowym jako jedynego pliku. Skutkuje rozmytym znakiem przy każdym większym zastosowaniu i koniecznością odtwarzania go od zera, gdy pojawi się potrzeba druku.

Błąd drugi: wysyłanie do drukarni pliku PDF, w którym wektor jest tylko opakowaniem dla wklejonego zdjęcia. Wygląda poprawnie na ekranie, a w druku wychodzi nieostro. Warto sprawdzić, powiększając widok do kilkuset procent i patrząc na krawędzie.

Błąd trzeci: nieprzekonwertowanie tekstu na krzywe przed przekazaniem materiału. Jeśli odbiorca nie ma tej samej czcionki, program podstawi inną i cały układ się rozjedzie, często niezauważalnie, bo litery po prostu będą nieco inne.

Błąd czwarty: wrzucanie na stronę nieoczyszczonych, ciężkich plików SVG wyeksportowanych prosto z programu graficznego. Błąd piąty: mieszanie ikon z różnych zestawów, przez co interfejs traci spójność. Błąd szósty: brak wersji monochromatycznej logo, przez co znak nie nadaje się na materiały jednokolorowe.

Jak zacząć pracę z wektorem

Jeśli chcesz tylko uporządkować materiały firmy, zacznij od inwentaryzacji: sprawdź, jakie pliki logo posiadasz i czy wśród nich jest cokolwiek wektorowego. Otwórz każdy plik i powiększ do kilkuset procent. Ostre krawędzie oznaczają wektor, widoczne kwadraciki oznaczają raster.

Jeśli wektora nie ma, zamów odtworzenie znaku. To jednorazowy wydatek, który zamyka temat na lata i odblokowuje wszystkie zastosowania, o których wcześniej nie było mowy. Przy okazji zbierz kolory i kroje pisma, żeby mieć komplet w jednym miejscu.

Jeśli chcesz nauczyć się tworzyć wektory samodzielnie, zacznij od darmowego programu i prostych ćwiczeń: odrysuj istniejącą ikonę, zbuduj prosty piktogram z kół i prostokątów, spróbuj napisać słowo i zamienić je na krzywe. Narzędzie pióra bywa na początku nieintuicyjne, ale po kilku godzinach zaczyna być przewidywalne.

Najczęściej zadawane pytania

Co to jest grafika wektorowa?

Grafika wektorowa to sposób zapisu obrazu, w którym plik przechowuje matematyczny opis kształtów: punktów, linii, krzywych i wypełnień, zamiast kolorów poszczególnych pikseli. Dzięki temu obraz można powiększać i pomniejszać bez utraty jakości, bo program za każdym razem rysuje kształty od nowa w zadanej skali. Typowe zastosowania to logo, ikony, ilustracje o graficznym charakterze oraz wszystkie materiały przeznaczone do druku i produkcji.

Jakie są główne cechy grafiki wektorowej?

Trzy najważniejsze to skalowalność bez utraty jakości, niewielki rozmiar pliku przy prostych grafikach oraz pełna edytowalność każdego elementu z osobna. Do tego dochodzi brak degradacji przy wielokrotnym zapisie, łatwość zmiany kolorów i proporcji oraz możliwość wygenerowania z jednego pliku źródłowego dowolnej wersji rastrowej. Ograniczeniem jest nieprzydatność do fotografii i rosnące obciążenie przy bardzo złożonych ilustracjach.

Czy JPG to grafika wektorowa?

Nie. JPG, podobnie jak PNG, GIF i WebP, to formaty rastrowe, czyli zbudowane z siatki pikseli. Powiększenie takiego pliku powoduje rozmycie krawędzi, bo nie ma skąd wziąć dodatkowych szczegółów. JPG dodatkowo stosuje kompresję stratną, więc przy każdym zapisie traci część informacji. Do grafik wektorowych służą inne formaty: SVG w internecie oraz AI, EPS, CDR i odpowiednio przygotowany PDF w druku.

Jakie formaty plików są wektorowe?

Najważniejsze to SVG, stosowany w internecie i obsługiwany natywnie przez przeglądarki, AI jako format roboczy programu Adobe Illustrator, CDR jako format CorelDRAW popularny w polskiej poligrafii, EPS jako uniwersalny format wymiany z drukarniami oraz PDF, który może przechowywać zarówno obiekty wektorowe, jak i rastrowe. W zastosowaniach technicznych występują jeszcze DXF i DWG, używane przy obróbce maszynowej i w dokumentacji projektowej.

Czy można zamienić zdjęcie na grafikę wektorową?

Technicznie tak, praktycznie z ograniczonym sensem. Programy potrafią wykryć krawędzie i obszary jednolitego koloru, tworząc z nich kształty, ale przy fotografii efektem jest uproszczona kompozycja z plam koloru, a nie wierne odwzorowanie. Wektoryzacja sprawdza się przy prostych, kontrastowych grafikach: logo, znakach, prostych ilustracjach. Nawet wtedy wynik automatyczny wymaga ręcznego dopracowania krzywych i odtworzenia tekstu właściwym krojem pisma.

W czym tworzy się grafikę wektorową?

Zawodowo najczęściej w Adobe Illustrator lub CorelDRAW, przy projektowaniu interfejsów w Figmie, a jako alternatywę bez abonamentu wybiera się Affinity Designer. Bezpłatną i w pełni funkcjonalną opcją jest Inkscape, obsługujący SVG i wystarczający do przygotowania logo czy zestawu ikon. Do drobnych poprawek, jak zmiana koloru czy konwersja formatu, wystarczają narzędzia działające w przeglądarce, choć przy poufnych materiałach warto sprawdzić, gdzie trafiają wgrywane pliki.

Czy warto używać SVG na stronie internetowej?

Tak, przy logo, ikonach i prostych ilustracjach to najlepszy wybór: pliki są bardzo lekkie, wyglądają ostro na każdym ekranie, w tym na wyświetlaczach o wysokiej gęstości, i można je stylować oraz animować z poziomu kodu strony. Wyjątkiem są bardzo złożone ilustracje, przy których lepiej sprawdzi się wyeksportowany raster, oraz sytuacje, w których użytkownicy wgrywają pliki samodzielnie, bo SVG może zawierać skrypty i wymaga wtedy filtrowania.

Nie mam logo w wektorze, co dalej?

Zbierz najlepsze dostępne materiały: największy plik graficzny, jaki uda się znaleźć, oraz materiały drukowane do zeskanowania w wysokiej rozdzielczości. Następnie zleć grafikowi odtworzenie znaku w wektorze na ich podstawie. Przy prostym logo to zwykle kilka godzin pracy. To dobry moment, żeby przy okazji poprawić proporcje i odstępy oraz zamówić komplet wariantów: poziomy, pionowy, sygnet i wersję jednokolorową.