Co to jest SVG? Kiedy wybrać SVG, a kiedy PNG?

Czym jest plik SVG?

SVG to skrót od Scalable Vector Graphics, czyli skalowalnej grafiki wektorowej. Zamiast przechowywać wyłącznie siatkę kolorowych pikseli, format może opisywać kształty, ścieżki, wypełnienia i tekst. Przeglądarka lub program do rysowania używa tych instrukcji, aby narysować obraz w żądanym rozmiarze. Nie musisz pisać kodu, żeby stworzyć SVG: program do grafiki wektorowej może wyeksportować taki plik.

Wyobraź sobie okrągłe logo. SVG może opisać okrąg i jego kolor, a PNG zapisuje piksele tworzące ten okrąg w jednym konkretnym rozmiarze. SVG może narysować większy okrąg z gładką krawędzią. Powiększanie PNG rozciąga istniejące piksele na większy obszar, przez co krawędź może stracić ostrość. Wprowadzenie do SVG w MDN wyjaśnia, jak działa ten format.

SVG i PNG: różnice w praktyce

Żaden z tych formatów nie jest zawsze mniejszy. Szczegółowy SVG z tysiącami ścieżek może zajmować więcej miejsca niż odpowiednio dobrany PNG. Porównaj rzeczywiste pliki i sprawdź, czy miejsce ich użycia je akceptuje. Dla zdjęć rozważ JPG, WebP lub AVIF, zamiast traktować SVG jako format do kompresji fotografii.

Kiedy SVG jest dobrym wyborem

Logo używane w nagłówku strony, w prezentacji i na dużym banerze warto mieć w oryginalnej wersji wektorowej. SVG sprawdza się też przy ikonach i prostych diagramach, które muszą działać w kilku rozmiarach. Mimo to sprawdź najmniejszą wersję: ostry obraz nie sprawia, że bardzo drobny tekst staje się czytelny, ani nie zapobiega słabej widoczności cienkich linii.

SVG może zawierać zwykły obraz pikselowy, na przykład PNG lub JPG. Taki obraz zachowuje oryginalną rozdzielczość. Umieszczenie małego zdjęcia w SVG nie odzyskuje szczegółów i nie zamienia go w kształty wektorowe. Zmiana nazwy pliku z .png na .svg również nie zmienia jego formatu.

Wymiary, viewBox i puste miejsce wokół grafiki

Szerokość i wysokość określają wymiary obrazu. Atrybut viewBox definiuje obszar współrzędnych, w którym umieszczona jest grafika. Pomaga dopasować rysunek do miejsca wyświetlania; nie jest ustawieniem rozmiaru pliku. Dokumentacja viewBox w MDN opisuje tę zależność.

Jeśli logo wygląda na małe wewnątrz dużego pustego obszaru, sprawdź granice obszaru roboczego lub strony w programie graficznym. Eksport całej strony może objąć nieużywaną przestrzeń wokół rysunku. W razie potrzeby dopasuj stronę do grafiki, zostawiając miejsce na obrysy i cienie. Samo zwiększenie szerokości wyświetlania powiększa także pustą przestrzeń.

Używanie SVG na stronie internetowej

Zwykłe logo strony można umieścić jako plik obrazu SVG. Obrazom przekazującym informacje nadaj opisowy tekst alternatywny i zarezerwuj w układzie właściwą szerokość oraz wysokość. Obrazy dekoracyjne powinny mieć pusty tekst alternatywny. Przykłady znajdziesz w przewodniku po tekstach alternatywnych.

To, że przeglądarka wyświetla SVG, nie oznacza, że każdy CMS lub formularz przesyłania akceptuje ten format. Sprawdź zasady swojej platformy przed wyborem końcowego eksportu. SVG używany jako obraz zachowuje się też inaczej niż SVG osadzony bezpośrednio w kodzie strony: w kontekście obrazu wykonywanie skryptów i ładowanie zasobów zewnętrznych jest ograniczone. Przewodnik MDN o SVG jako obrazie wyjaśnia te ograniczenia. Korzystaj z grafiki z zaufanych źródeł i metody publikacji obsługiwanej przez platformę.

Przygotuj SVG do udostępnienia

• Eksportuj potrzebny obszar grafiki, a nie niepotrzebnie dużą stronę.
• Dołącz podlinkowane obrazy i wymagane style do pliku, aby nie zależał od osobnych plików.
• Jeśli litery muszą wyglądać identycznie na innym urządzeniu, zamień tekst na krzywe w programie graficznym. Zachowaj edytowalny oryginał: tekst zamieniony na krzywe nie jest już zwykłym tekstem, który można swobodnie edytować.
• Usuń nieużywane obiekty i zbędne dane programu z kopii. Sprawdź wynik przed zastąpieniem oryginału.
• Otwórz wyeksportowany SVG w docelowej aplikacji lub na stronie i sprawdź krawędzie, tekst, tło oraz ewentualne brakujące elementy.

Zamiana tekstu na krzywe może zwiększyć liczbę ścieżek i rozmiar pliku. Zbyt mocne uproszczenie ścieżek może zmienić rysunek. Oceniaj optymalizację przez porównanie rzeczywistego wyniku, zamiast usuwać dane bez sprawdzenia skutków. Narzędzie SVG na PNG w Pixilo tworzy obraz pikselowy; nie optymalizuje SVG ani nie zwraca mniejszego pliku SVG.

Kiedy utworzyć kopię PNG

Utwórz PNG, gdy wymaga go usługa odbierająca plik, gdy potrzebujesz statycznej kopii podobnej do zrzutu ekranu lub określonych wymiarów w pikselach. Eksportuj z oryginalnego SVG w wymaganym rozmiarze. PNG nie zachowuje ścieżek wektorowych ani funkcji interaktywnych, a późniejsze powiększenie może rozmyć obraz. Zachowaj SVG do kolejnych eksportów.

Użyj SVG na PNG, aby wybrać wymiary w pikselach i zachować przezroczyste obszary lub dodać jednolite tło. Strona narzędzia wyjaśnia limity rozmiaru, kwestie czcionek i nieobsługiwane treści. Opcja przezroczystego tła zachowuje istniejącą przezroczystość; nie usuwa kształtu tła narysowanego w SVG.

Przed publikacją lub wysłaniem obrazu

1. Sprawdź, jakie formaty akceptuje miejsce użycia obrazu.
2. Zachowaj SVG, jeśli kształty wektorowe i elastyczne skalowanie są przydatne; utwórz PNG, jeśli potrzebny jest obraz pikselowy.
3. Sprawdź granice grafiki, czcionki i osadzone obrazy.
4. Obejrzyj końcowy plik w planowanym rozmiarze wyświetlania, na tle, na którym będzie używany.
5. Porównaj rozmiary plików, jeśli szybkość ładowania ma znaczenie, i zachowaj edytowalny oryginał.