SVG vs PNG dla logo: którego formatu użyć (i kiedy)
W przypadku logo trzymaj plik wzorcowy jako SVG i używaj go wszędzie, gdzie format jest obsługiwany — pozostaje ostry w każdym rozmiarze i waży prawie nic. Po PNG sięgaj tylko, gdy potrzebujesz obrazu rastrowego o stałym rozmiarze albo miejsca, które nie przyjmie SVG, jak większość profili społecznościowych. Do druku przekaż wektorowy PDF lub EPS. Nigdy nie używaj JPG do logo.
Na tej stronie
Jaka jest różnica między SVG a PNG?
Różnica to wektor kontra raster. SVG (Scalable Vector Graphics) opisuje logo jako kształty — punkty, krzywe i wypełnienia — zdefiniowane matematyką. Jest rysowany na nowo w dowolnym rozmiarze, w jakim się pojawia, więc pozostaje ostry wszędzie. Będąc kodem, jest też maleńki dla czystej geometrii większości log, często zaledwie kilka kilobajtów.
PNG (Portable Network Graphics) to obraz rastrowy: stała siatka pikseli o ustalonej szerokości i wysokości. Obsługuje przezroczystość, więc logo czysto zasiada na dowolnym kolorze — ale pokazane większe, niż zostało wyeksportowane, rozciąga piksele i zmiękcza krawędzie.
Kiedy powinieneś używać SVG?
Uczyń SVG swoim plikiem wzorcowym i domyślnym do wszystkiego na ekranie:
- Strony i aplikacje internetowe — logo w nagłówku, stopce i sekcji hero. Nowoczesne przeglądarki renderują SVG idealnie ostro na każdym ekranie, włącznie z retina i 4K.
- Wszędzie tam, gdzie logo musi się skalować — układy responsywne i ekrany o wysokiej gęstości.
- Jako jedno źródło, z którego eksportujesz wszystko inne.
- Favikony, ponieważ nowoczesne przeglądarki akceptują favikonę w SVG.
Kiedy powinieneś używać PNG?
Używaj PNG, gdy potrzebujesz rastra o stałym rozmiarze albo miejsca, które nie przyjmie SVG:
- Zdjęcia profilowe i tła społecznościowe — większość platform przyjmuje tylko przesyłanie rastrów, więc wyeksportuj kwadratowy PNG w rozmiarze zalecanym przez każdą z nich.
- Niektóre klienty e-mail i narzędzia do podpisów, które nie renderują SVG niezawodnie.
- Dokumenty, prezentacje i marketplace'y, które przyjmują tylko obrazy rastrowe.
- Szybkie podglądy i miniatury.
SVG vs PNG w skrócie
| Co się liczy | SVG (wektor) | PNG (raster) |
|---|---|---|
| Skalowanie | ostry w każdym rozmiarze | stały rozmiar; rozmywa się po powiększeniu |
| Rozmiar pliku (loga) | maleńki dla prostych znaków | rośnie z wymiarami |
| Przezroczystość | tak | tak |
| Edytowalność | kształty i kolory pozostają edytowalne | spłaszczone piksele |
| Najlepszy do | sieci, pliku wzorcowego, skalowania | awatarów, rastra o stałym rozmiarze, przesyłania |
| Zgodność | nowoczesne przeglądarki i narzędzia projektowe | akceptowany niemal wszędzie |
A co z EPS, PDF, AI — i JPG?
SVG i PNG pokrywają sieć, ale kompletny pakiet logo zwykle zawiera kilka innych:
- PDF — format wektorowy akceptowany przez niemal każdą drukarnię i narzędzie biurowe. To najbezpieczniejszy plik do przekazania drukarni.
- EPS — starszy format wektorowy, który niektóre drukarnie wciąż zamawiają. Traktuj go jako eksport na potrzeby zgodności z drukiem, a nie coś, czego używasz na co dzień.
- AI (Adobe Illustrator) — plik roboczy/źródłowy. Jeśli logo wykonał projektant, zachowaj AI (albo SVG) w archiwum jako edytowalny oryginał.
- JPG — unikaj go do logo. JPG nie ma przezroczystości, więc wymusza prostokąt tła wokół znaku, a jego kompresja jest stratna, co rozmazuje ostre krawędzie. Jest stworzony do zdjęć, nie do log.
Zachowaj SVG jako jedno źródło prawdy. Każdy PNG, favikona, PDF i obraz społecznościowy powinien być z niego eksportowany — nigdy odwrotnie. Odtworzenie PNG z powrotem w wektor rzadko dorównuje oryginałowi.
Czy można przekonwertować PNG z powrotem na SVG?
Nie czysto. Konwersja PNG na SVG oznacza trasowanie pikseli w kształty, co rzadko dorównuje oryginałowi i często daje bałaganiarskie ścieżki. Jeśli masz SVG, zawsze zaczynaj od niego. Jeśli masz tylko PNG w niskiej rozdzielczości, zwykle lepiej odbudować znak jako wektor, niż automatycznie go trasować.
A co z favikonami i ikonami aplikacji?
Favikona to po prostu bardzo mała wersja twojego logo, więc eksportuj ją z SVG: favikonę SVG do nowoczesnych przeglądarek plus małe PNG (na przykład 32×32 i ikonę Apple touch 180×180) dla szerokiej zgodności. Ta sama zasada dotyczy ikon aplikacji — generuj rozmiary, których żąda każda platforma, z wektorowego pliku wzorcowego. Zobacz jak zrobić favikonę z logo.
Krótka odpowiedź
Projektuj i przechowuj logo jako SVG, używaj go w sieci, eksportuj PNG do rastrowych zastosowań o stałym rozmiarze, drukarniom daj PDF lub EPS, a JPG pomiń całkowicie. Zachowaj wektorowy plik wzorcowy, a później wytworzysz dowolny rozmiar czy format bez utraty jakości.
Stwórz logo i wyeksportuj SVG, PNG oraz favikonęCzęste pytania
Czy SVG jest lepszy niż PNG dla logo?
W przypadku logo zwykle tak: SVG jest wektorem, więc pozostaje ostry w każdym rozmiarze i jest maleńki dla prostych znaków. PNG wciąż przydaje się do rastrowych zastosowań o stałym rozmiarze, jak awatary społecznościowe i narzędzia, które nie odczytują SVG.
Czy logo w SVG traci jakość przy skalowaniu?
Nie. SVG opisuje kształty matematyką, więc renderuje się ostro w każdym rozmiarze — od favikony po billboard — nigdy nie stając się rozmyty ani spikselowany.
Dlaczego moje logo w PNG wygląda rozmyte?
PNG ma stały rozmiar w pikselach. Pokazanie go większym niż wyeksportowano albo na ekranie o wysokiej gęstości rozciąga te piksele i zmiękcza krawędzie. Wyeksportuj większy PNG albo użyj SVG.
Czy powinienem używać JPG do logo?
Nie. JPG nie ma przezroczystości (więc dodaje prostokąt tła) i jest stratny, co rozmazuje ostre krawędzie znaku. Do logo używaj SVG lub PNG, nigdy JPG.
Który format dać drukarni?
Plik wektorowy — zwykle PDF lub EPS wyeksportowany z twojego logo — by drukarnia mogła czysto przeskalować go do dowolnego rozmiaru. Zachowaj SVG jako plik wzorcowy, z którego je generujesz.
Źródła
- Scalable Vector Graphics (SVG) 2 — W3C
- Image file type and format guide — MDN Web Docs