Grafika wektorowa

Grafika wektorowa to jeden z najciekawszych obszarów projektowania graficznego, którego możliwości są naprawdę ogromne. Z uwagi na nieco większy poziom trudności w jej tworzeniu, została ona w pewnym momencie nieco wyparta na rzecz łatwiejszych, szybszych i bardziej efektownych ścieżek realizacji.

Był jednak czas, kiedy to wektorowe projekty święciły triumfy. Istniała nawet konsola o nazwie Vectrex, oferująca pakiet gier zbudowanych grafiką wektorową. Rozkwit grafik rastrowych, a potem trójwymiarowych, sprawił, że żmudna sztuka projektowania wektorowego odeszła na chwilę w zapomnienie. Obecnie jednak znowu wraca do łask, znajdując zastosowanie w animacjach, stronach www czy szeroko pojętym web designie, grach komputerowych.

O co chodzi z tymi wektorami czyli definicja grafiki wektorowej

Otóż grafika wektorowa opiera się na obiektach, tzw. „prymitywach”. Są to proste figury geometryczne: wielokąty, okręgi, krzywe i oczywiście odcinki. Opisuje się je za pomocą odpowiednich parametrów matematycznych, parametrów charakterystycznych dla tychże figur. Wiadome jest to, że do parametrów odcinka należą przede wszystkim współrzędne jego końców, a w przypadku okręgu podajemy środek i długość promienia.

Teoretycznie można taką grafikę programować -- lecz wykorzystuje się do tego specjalne programy, które później generują wzór punktów, ich zależności i zapisując je w dowolnym formacie grafiki wektorowej np. .svg (Scalable Vector Graphics).

Czym różni się grafika wektorowa od rastrowej?

Grafika rastrowa jest grafiką, która generuje obraz na podstawie danych cyfrowych znajdujących się w poszczególnych pikselach. Grafika wektorowa  zapisuje grafikę w formacie kodu matematycznego, który następnie jest renderowany przez programy graficzne, system, bądź przeglądarkę internetową.

Przykład prostej grafiki inkscape z wygenerowanym kodem svg.

Zalety grafiki wektorowej

Jedną z największych zalet grafiki wektorowej jest jej pełna skalowalność. Można ją powiększać oraz pomniejszać proporcje praktycznie każdego wektorowego tworu. Wprawdzie idzie to w parze często z wykorzystaniem zasobów sprzętowych, ale dzisiejsze, nawet standardowo wyposażone komputery dają ku temu możliwości.

Grafiki wektorowe pozwalają na pełna responsywność -- tym samym nie musimy generować specjalnych typów grafik do stron responsywnych jak w przypadku grafik rastrowych, które oczywiście można pomniejszyć -- ale czy naprawdę musimy wczytywać duży plik zeskalowany do małych wymiarów za pomocą CSS?

Pamiętajmy o tym że grafikę wektorową można bezpośrednio umieścić w kodzie CSS, czy HTML. Tym samym nie musimy posiadać jakichkolwiek plików graficznych na serwerze. Przeglądarka przetworzy kod do postaci graficznej.

W przypadku mniej skomplikowanych grafik -- kolejną zaletą jest waga pliku -- w wyżej wymienionym przypadku
grafika wektorowa svg zajmuje 2,7 kB -- plik w postaci grafiki rastrowej png 6,0 kB.

Kolejnym elementem jest łatwość konwersji do grafiki rastrowej, pliki wektorowe w przystępny sposób można zamienić na formaty grafiki rastrowej.

Wady grafiki wektorowej

Największą wadą jest jej zaleta -- czyli kod matematyczny. Grafiki o bogatej barwie, informacjach i wielu kolorach znanych z grafik rastrowych nie mogą być wygenerowane w ten sam sposób poprzez grafikę wektorową!

Porównajmy grafikę rastrową do wektorowej.

Jajka.jpg (104 kB)

Jajka SVG (2.3)

Plik SVG składa się z 578 lini, jego wygenerowanie dla przeglądarki zajmuje około 2 sekund a wczytanie kodu źródłowego to 5 sekund. Liczba znaków tego pliku wynosi 2298818!  A jakościowo jest o wiele gorszy od grafiki rastrowej zajmującej 104 kB.

Dlatego też nie można używać formatów grafiki wektorowej do grafik rastrowych -- mija się to całkowicie z sensem i powoduje:

• duże obciążenie procesora użytkownika, któremu program, przeglądarka musi wygenerować plik,
• duże rozmiary grafik,
• jakość grafiki nie dorównująca do grafiki rastrowej.

Zastosowanie i wykorzystanie grafiki wektorowej

Grafika wektorowa posiada wiele zastosowań -- najważniejsze z nich to:

• Strony internetowe i księgi identyfikacji wizualnej -- grafiki wektorowe wykorzystywane są w logotypach oraz ikonach,

• Typografii -- czcionki są grafikami wektorowymi w formacie TrueType,

Źródło: https://computer.howstuffworks.com/question460.htm

• Gry komputerowe -- grafiki wektorowe mogą być wykorzystywane w grach indie oraz szczególnie popularne są na smartfonach,

• Animacji i video -- Grafikę wektorową wykorzystują programy typu 3DS max, Blender. Głównym nośnikiem informacji dwu i trójwymiarowych  jest format DXF.

Źródło: Studio Kreacja Youtube

• Infografiki,

Przykład elementów infografiki wykonanych w programie Adobe Ilustrator źródło: pixabay.com

• Branża reklamowa, bannery.
• Branża projektowa -- grafiki wektorowe są wykorzystywane przez programy typu CAD jak AutoCAD, które zawierają informacje dwu i trójwymiarowe

Proces wektoryzacji -- czyli jak zrobić grafikę wektorową z  jpg, png

Procesem wektoryzacji określamy łatwe wygenerowanie punktów wektorowych poprzez algorytm poszczególnych programów do grafiki wektorowej na podstawie wybranej grafiki rastrowej.

W przypadku mniej skomplikowanych grafik -- jak piktogramy, znaki drogowe, szkice jest to bardzo łatwy sposób na przekształcenie grafiki rastrowej w wektorową.

W zależności od użytych opcji programu, możemy wygenerować bardziej dokładne grafiki wektorowe -- o większej ilości ścieżek, krzyw beziera i punktów -- tym samym o większej ilości informacji.

W darmowym narzędziu Inkscape wybieramy w górnym menu opcje ścieżka -> wektoryzuj mapę bitową

Wektoryzacja bitmapy za pomocą programu inkscape -- czyli tworzenie grafiki wektorowej ze zdjęcia

Najważniejsze programy do grafiki wektorowej

Inkscape

Program dający olbrzymie wsparcie dla grafiki wektorowej jest Inkscape. W pełni wykorzystuje on cechy formatu SVG, coraz bardziej popularnego wśród twórców grafik na strony internetowe. To program w pełni darmowy, a przy tym bardzo rozbudowany. Działa na systemach Linux, Windows, Mac OS.

Adobe Illustrator

Innym znakomitym narzędziem jest Adobe Illustrator. Wraz z CorelDraw i Inkscape zajmuje podium, jeśli chodzi o wszechstronność w tworzeniu ilustracji opartych o grafikę wektorową. Posiada w pełni modyfikowalny interfejs, w którym w najdrobniejszym calu jesteśmy w stanie dostosować do naszych potrzeb grubość używanych pędzli. Ustawiać możemy je w dowolnym punkcie, dzięki czemu nie nic nas nie może ograniczyć w w naszej praktyce tworzenia.

Jest to edytor przeznaczony dla profesjonalistów, bardzo mocno zaawansowany i rozbudowany w porównaniu do Inkscape.

Formaty grafiki wektorowej

Wyróżniamy kilka kontenerów graficznych, które przechowują informacje na temat grafiki wektorowej.

Najważniejszym z nich jest format SVG (Scalable Vector Graphics), który został opracowany w 1999 roku przez organizacje W3C. Format ten występuję również w wersji skompresowanej (gzip) -- svgz. Można w nim opisywać informacje o krzywych, gradientach, cieniach a nawet animacji. Wyparł on takie formaty jak EPS. Wszystkie aktualne przeglądarki wspierają ten format.

Format ten umożliwia modyfikacje poprzez CSS oraz JavaScript -- np. istnieje możliwość stworzenia linków bezpośrednio w JavaScript

Przykładowy plik SVG z linkiem

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <desc>Example link01 - a link on an ellipse
 </desc>
 <rect x=".01" y=".01" width="4.98" height="2.98" 
 fill="none" stroke="blue" stroke-width=".03"/>
 <a xlink:href="http://www.w3.org">
 <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
 fill="red" />
 </a>
</svg>

Źródło: https://www.w3.org/TR/SVG/linking.html

EPS (Encapsulated Postscript) -- Jest to format, który informacje przechowuje w postaci PostScript i to w nim są opisywane rysunki i obrazy. Program ten był podstawowym formatem grafiki wektorowej w Adobe Ilustrator -- dlatego też ściągając np. darmowe grafiki wektorowe często możemy się spotkać z tym formatem graficznym. Ciekawostką jest że zawiera on informacje o poglądzie pliku w niskiej jakości.

AI (Adobe Illustrator Artwork) -- Rozszerzenie programu Adobe Ilustrator, którego wcześniejsze wersje były plikami EPS tylko z ograniczeniami nałożonymi przez firmę Adobe. Jest to format zamknięty, rozwijany i wspierany przez wszystkie programy Adobe Creative Studio.

W przypadku innych programów jak np. Inkscape istnieje możliwość otworzenia i edycji programu -- jednak mogą one różnić się detalami od tego samego pliku otwieranego w Ilustratorze.

CDR (CorelDraw) -- Zamknięty kontener graficzny wykorzystywany przez grafiki stworzone w programie CorelDraw.

SWF (Adobe Flash) -- Wymierający format grafiki flash, stosowanych w animacji i grach znajdujących się na stronach internetowych. Program byl bardzo popularny i powstało w nim wiele interesujących gier.

Gra komputerowa z wykorzystaniem grafiki wektorowej Kingdom Rush Frontiers -- Flash

Formaty grafiki wektorowej wykorzystywanych w komputerowym wspomaganiu projektowania

Grafikę wektorową wykorzystuje branża projektowa (CAD). Kontenery te zawierają informacje dwu i trzy wymiarowe. Dzięki czemu możemy projektować i przenosić elementy projektu pomiędzy różnymi programami oraz ich profesjonalny wydruk. Najważniejsze rozszerzenia z nich to:

DWG -- Kolejny format wykorzystywany przez programy AutoDesk, który może zawierać informacje o danych geometrycznych, mapach, zdjęciach i designu.

DXF  (Drawing Interchange Format /Drawing Exchange Format) -- Format stworzony i wykorzystywany przez firmę AutoDesk w programach CAD. Jego historia zaczyna się w 1982 roku gdy powstała pierwsza wersja AutoCad. Format ten ma możliwość zakodowania poszczególnych danych i posiada bardzo prostą strukturę podzieloną na sekcje. Informacje zawarte w pliku są w postaci ASCII. Wykorzystywany może być w grafice i animacji 3D np. program blender, 3ds max umożliwia import tego rodzaju plików.

Jaka jest różnica pomiędzy dwoma formatami? DWG zawiera dane w postaci binarnej, natomiast DXF w postaci tekstowej -- ASCII.

Konwersja formatów i kompatybilność grafiki wektorowej

Kompatybilność grafiki wektorowej nie powinna stanowić problemu -- program Inkscape jest kompatybilny z grafikami EPS, AI, CDR. Jeżeli korzystamy z Adobe Creative Cloud to format .ai współpracuje ze wszystkimi programami Adobe od Photoshopa do After Effects. Jest to idealne rozwiązanie gdy planujemy stworzyć grafiki wektorowe, które później wykorzystamy przy tworzeniu interaktywnego filmu.

Jak zacząć projektować w grafice wektorowej?

W przypadku osób początkujących oraz dzieci zachęcam do pobrania programu Inkscape i zapoznanie się z interfejsem. W internecie jest dostępnych wiele darmowych poradników i kursów.

Pamiętajmy że istnieje wiele sposobów na tworzenie grafiki wektorowej chociażby narysowanie schematu i jego zeskanowanie i późniejsza wektoryzacja. Wgranie obrazu grafiki rastrowej i jego odwzorowanie ręczne.

Źródło / Source: Derek Banas

Na YouTube znajdziesz setki przykładów jak wykonać logo, grafikę i odwzorować postać.

Wykonanie profesjonalnego loga w Inkscape -- źródło: Nick Saporito