Logo w PNG czy SVG: jak wybrać dla strony, plakatu i druku

To samo logo w nawigacji strony może mieć 24 piksele wysokości, a na ściance targowej rozrosnąć się do dwóch metrów szerokości. Wybór między PNG a SVG zaczyna się od sceny, w której się pojawi: w stronach i interfejsach produktów pierwszeństwo ma SVG — znak zapisany jako ścieżki jest przy każdym rozmiarze rysowany na nowo; wejścia przyjmujące wyłącznie bitmapy (awatary społecznościowe, część dokumentów biurowych) dostają przezroczysty PNG; plakaty, szyldy i materiały drukowane korzystają z SVG lub plików wektorowych z niego eksportowanych, bez rozmycia przy powiększeniu. Jeśli na razie masz tylko PNG, nie musisz zaczynać od zera — najpierw ustal format wymagany przez scenę, a brakujący plik dorzuć osobno.

Najważniejsze punkty

• Strony, interfejsy i sytuacje wymagające wielokrotnego skalowania i zmian kolorów obsługuj w SVG: grafika zapisana ścieżkami przy powiększeniu jest rysowana na nowo, a krawędzie się nie rozmywają.
• Wejścia przyjmujące tylko bitmapy (awatary społecznościowe, część oprogramowania biurowego) załatwia przezroczysty PNG; nie warto zmuszać platformy do obsługi SVG.
• Logo graficzne i logotyp literowy zasługują na główny plik SVG; maskotkom fotograficznym i grafikom marki o złożonych fakturach wystarczy PNG w wysokiej rozdzielczości.
• SVG nie jest automatycznie mniejsze od PNG: rozmiar pliku zależy od złożoności grafiki, a kryterium wyboru stanowi zastosowanie, nie waga pliku.

Zacznij od trzech scen użycia

Trzy najczęstsze zadania dostawy pokrywają praktycznie wszystkie miejsca, do których trafiają pliki logo.

Znak w nawigacji strony. Logo w pasku nawigacji, stopce i interfejsie mobilnym wyświetla się w różnych rozmiarach przy różnych gęstościach ekranu. SVG pasuje tu najlepiej: przeglądarka rysuje ścieżki na bieżąco, więc od szerokości małej ikony po duży baner w stopce obraz pozostaje ostry; zmiana koloru odbywa się wprost w pliku lub kodzie, a ten sam plik możesz oddać projektantowi do dalszej edycji.

Awatar społecznościowy w małym rozmiarze. Wejścia awatarów zwykle przyjmują tylko JPG i PNG, więc wystarczy przygotować PNG z przezroczystym tłem: gdy platforma przytnie awatar do koła lub kwadratu, wokół znaku nie pojawi się biały kwadrat. Rozmiary wyświetlania awatara są ograniczone, a ostrość bitmapy zupełnie wystarcza — ta scena nie potrzebuje SVG.

Duże plakaty i materiały drukowane. Plakat, roll-up czy szyld nad wejściem powiększają znak kilkudziesięciokrotnie. SVG rozwiązuje skalowanie u źródła: ścieżki są niezależne od rozdzielczości, a o wielkości wyjścia decyduje miejsce użycia. Przy małym PNG bezpośrednie powiększenie daje rozmycie i schodki — dopiero ta scena naprawdę wymaga pliku wektorowego.

Gdzie objawiają się różnice między PNG i SVG

Fundamentalna różnica leży w sposobie zapisu grafiki. PNG posługuje się siatką pikseli: każdy punkt nosi jeden kolor, więc nawet duży plik ma stałą liczbę pikseli; po przekroczeniu oryginalnych wymiarów program może jedynie rozciągnąć istniejące piksele, a krawędzie zamazują się i pojawiają się schodki. SVG opisuje grafikę ścieżkami i kształtami: gdzie linia się zaczyna, jak zakrzywia się krzywa, jakim kolorem wypełniono obszar — przy powiększeniu program rysuje obraz od nowa według tych opisów i krawędzie zawsze pozostają gładkie.

Przezroczyste tło obsługują oba formaty, tylko inaczej. PNG zachowuje wycięcia wokół znaku kanałem przezroczystości pikseli; SVG z natury nie ma „podłoża” — grafika sama jest zbiorem ścieżek. Większym rozgraniczeniem jest późniejsza edycja: SVG otwierasz i zmieniasz kolory całości, ruszasz punkty kotwiczące, rozbierasz i składasz na nowo; PNG obrabiasz piksel po pikselu, a zmiana jednej plamy koloru oznacza łatanie obszaru w programie rastrowym.

Waga pliku bywa źle odczytywana. Przy prostej grafice SVG zapisuje tylko kilka ścieżek i zwykle jest małe; bitmapa bogaty w gradienty i ziarno po konwersji na SVG rozpada się na mnóstwo drobnych ścieżek i może ważyć znacznie więcej niż pierwotny PNG. Zdanie „SVG jest mniejsze” nie jest prawdziwe — prawdziwe jest „SVG prostej grafiki jest małe”.

Tabela doboru scenariusza i formatu

Typ materiału decyduje bardziej niż parametry formatu. Zalecenia dla trzech typowych grafik markowych:

Wystarczy jedna reguła: im ostrzejsze kontury i mniej pól koloru, tym bardziej opłaca się wektoryzacja; im obraz bliższy fotografii, tym dłużej powinien pozostać w formacie rastrowym.

Jak uzupełnić SVG, gdy masz tylko PNG

Po potwierdzeniu potrzeby sama konwersja to tylko drobny fragment całości. Prześlij PNG przez obraz na wektor: narzędzie przyjmuje PNG, JPG i WebP o szerokości i wysokości co najmniej 256 pikseli, po zalogowaniu konwertuje jeden obraz naraz, a po zakończeniu pobierasz plik SVG. Zrzuty ekranu każdego kroku — przesyłania, sprawdzania, pobierania — zawiera pochodzący z tej samej serii poradnik „Jak zamienić PNG i JPG na SVG”, więc tu nie powtarzamy.

Po konwersji wynik i tak porządkujesz według zastosowania. Panel wyników oferuje powiększenia 1×, 2× i 4× — przed oddaniem przyjrzyj się krzywym, wycięciom i cienkim liniom. Dwie rzeczy warto zaakceptować zawczasu: tekst zamieni się w krzywe konturowe, konwersja nie przywróci edytowalnej czcionki, więc zmiana hasła wymaga ponownego wpisania w narzędziu projektowym; jakość krawędzi zależy od oryginału, mocno skompresowany PNG da szorstkie brzegi — najpierw podmień go na ostrzejszy, a metody porządkowania takich oryginałów opisuje osobny artykuł „Co robić, gdy logo po wektoryzacji ma poszarpane krawędzie”.

Jak złożyć pakiet plików marki do przekazania

Po ustaleniu formatów zbierz logo w zestaw nazwanych plików, żeby żadna ze stron nie musiała o nic prosić w kilka rund. Minimalny użyteczny pakiet wygląda tak:

W nazwach trzymaj się wspólnego prefiksu i przyrostka zastosowania, a przy zmianach aktualizuj numer wersji zamiast tworzyć nowe nazwy — inaczej w pakiecie prędzej czy później zagoszczą obok siebie logo-final-2.png i logo-ostateczna-wersja.png. Podglądy na ciemnym i jasnym tle umieść w tym samym katalogu: odbiorca jednym spojrzeniem potwierdzi, że znak działa na obu tłach.

Pliki dla druku traktuj osobno. Gdy drukarnia wymaga wektorowego PDF, określonego trybu kolorów lub spadów, te produkcyjne pliki powstają w odpowiednim procesie projektowym: źródłem jest SVG, konwersję i eksport wykonujesz w oprogramowaniu projektowym, a standardy kolorów potwierdzasz z drukarnią punkt po punkcie. Narzędzie obraz-na-wektor zwraca plik SVG i nie generuje bezpośrednio plików produkcyjnych do druku.

Częste pytania

Czy SVG zawsze jest mniejsze od PNG?

Nie, rozmiar zależy od złożoności treści. SVG prostej grafiki zapisuje tylko kilka ścieżek i zwykle jest małe; bitmapa pełen gradientów, cieni i ziarna po konwersji na SVG generuje mnóstwo drobnych ścieżek i może być większy. O formacie decydują zastosowanie i potrzeby skalowania, nie waga.

PNG rozmywa się po powiększeniu — trzeba wektoryzować?

Popatrz na dalsze losy logo. Przy jednorazowym, okazjonalnym powiększeniu wystarczy wyeksportować PNG w wyższej rozdzielczości; SVG warto dorzucić dopiero, gdy potrzebujesz wielokrotnego skalowania, całościowych zmian kolorów, druku lub długoterminowego głównego pliku marki. Logo fotograficzne nawet po konwersji da poszatkowane, trudne do edycji ścieżki — rozsądniej trzymać bitmapę w wysokiej rozdzielczości.

Co robić, gdy drukarnia prosi o PDF?

Zrealizuj konkretne wymagania drukarni w odpowiednim procesie projektowym: wczytaj główny plik SVG do oprogramowania projektowego, wyeksportuj wskazany typ PDF, a tryb kolorów, spady i pozostałe parametry potwierdź z drukarnią punkt po punkcie. Narzędzie obraz-na-wektor zwraca SVG; produkcyjny PDF powstaje na etapie projektowym.

Masz tylko PNG — zacznij od dorzucenia SVG

Zacznij od brakującego elementu pakietu: mając tylko PNG, uzupełnij SVG przez obraz na wektor, sprawdź go na podglądach z ciemnym i jasnym tłem i dopiero wtedy zdecyduj, czy może pełnić rolę pliku głównego. Po tym kroku trzy sceny — strona, awatar i plakat — mają swoje pliki we właściwych formatach.