CodeKitHubCzym jest to narzędzie?
SVG to format wektorowy — kształty opisane za pomocą wzorów matematycznych, które można skalować w nieskończoność, idealny do tworzenia logo i ikon. Jednak wiele miejsc go nie obsługuje: dokumenty programu Word, większość platform społecznościowych, klienci poczty elektronicznej oraz niezliczone formularze do przesyłania plików wymagają obrazów pikselowych. Konwersja (rasteryzacja) polega na przekształceniu grafiki wektorowej w plik PNG lub JPG o określonym rozmiarze.
Ponieważ pliki wektorowe nie mają stałej rozdzielczości, to użytkownik wybiera szerokość wyjściową — a ponieważ źródłem jest wzór matematyczny, plik wyeksportowany w rozdzielczości 2048 pikseli jest dokładnie tak samo ostry jak ten w rozdzielczości 256 pikseli. Plik wyjściowy w formacie PNG zachowuje przezroczyste tło pliku SVG; plik w formacie JPG wypełnia je bielą.
Dlaczego warto go używać?
- Wszelkie rozdzielczości z jednego źródła: od ikony favicon o rozmiarze 256 pikseli po plik do druku o rozmiarze 2048 pikseli – wszystkie z idealną precyzją pikselową.
- Pliki PNG zachowują przezroczystość — logo można umieścić na dowolnym tle.
- W ciągu kilku sekund rozwiązuje problem odrzucania plików podczas przesyłania z komunikatem „SVG nie jest obsługiwane”.
- Konwersja zbiorcza, przetwarzanie lokalne, bez konieczności przesyłania plików.
- Obsługuje pliki SVG bez jawnie określonych wartości szerokości i wysokości poprzez odczytanie ich parametru viewBox.
Jak używać
- Przeciągnij pliki .svg do pola lub kliknij, aby je wybrać.
- Wybierz szerokość wyjściową — opcja „Auto” wykorzystuje rozmiar zadeklarowany w samym pliku SVG.
- Wybierz format PNG (z zachowaniem przezroczystości) lub JPG (z białym tłem).
- Pobierz każdy z renderowanych obrazów; wymiary podano w opisie każdego pliku.
Przykład
Wejście
logo.svg — 4 KB vectorWynik
logo.png — 1024×1024, transparent background, crisp at every pixelJedno niewielkie źródło wektorowe pozwala uzyskać rastrowe obrazy o idealnej rozdzielczości w dowolnym rozmiarze.
Typowe zastosowania
- Wstawianie logo firmy (zwykle dostarczanego przez projektanta w formacie SVG) do dokumentu programu Word lub PowerPoint, który nie obsługuje osadzania plików SVG.
- Generowanie ikon aplikacji lub favikonów we wszystkich wymaganych rozmiarach w pikselach (16, 32, 180, 512 pikseli) na podstawie jednego pliku SVG.
- Dodanie ikony do podpisu w wiadomości e-mail, ponieważ większość klientów poczty wyświetla wyłącznie obrazy rastrowe.
- Przesyłanie grafiki na platformę społecznościową lub do systemu CMS, który odrzuca pliki SVG ze względów bezpieczeństwa.
Dlaczego w ogóle istnieją ograniczenia dotyczące przesyłania plików SVG?
Wiele platform celowo blokuje przesyłanie plików SVG ze względów bezpieczeństwa, a nie z powodu przeoczenia: ponieważ format SVG opiera się na XML i technicznie umożliwia osadzanie kodu JavaScript, złośliwy plik SVG może stać się wektorem wstrzyknięcia skryptu, jeśli platforma wyświetli go bez odpowiedniej obróbki. Rasteryzacja pliku SVG do formatu PNG lub JPG usuwa wszystko poza danymi pikselowymi, co jest jednym z powodów, dla których konwersja ta jest często konieczna, a nie tylko wygodna — platforma docelowa rzeczywiście nie może bezpiecznie akceptować formatu wektorowego, niezależnie od tego, czy dany plik SVG jest nieszkodliwy.
Jak właściwie działa niezależność od rozdzielczości
Plik SVG w ogóle nie przechowuje pikseli — zawiera matematyczne definicje ścieżek („narysuj linię od tego punktu do tamtego punktu”, „wypełnij tę krzywą tym kolorem”) oraz element viewBox, który określa przestrzeń współrzędnych, w której znajdują się te ścieżki. Podczas rasteryzacji silnik renderujący przeglądarki za każdym razem od podstaw przelicza każdą krzywą i wypełnienie zgodnie z żądanymi wymiarami w pikselach. Różni się to zasadniczo od zmiany rozmiaru istniejącego obrazu rastrowego (JPG lub PNG), gdzie powiększenie oznacza tworzenie pikseli, których nigdy nie było, co nieuchronnie powoduje rozmycie obrazu — plik SVG renderowany w rozdzielczości 4000 pikseli jest dokładnie tak samo ostry jak ten renderowany w rozdzielczości 100 pikseli, ponieważ oba są na nowo obliczane na podstawie dokładnie tych samych wzorów matematycznych, a nie rozciągnięte z mniejszego źródła.
Najczęściej zadawane pytania
W jakiej rozdzielczości powinienem wyeksportować plik?
Wybierz rozmiar co najmniej o nieco większy od największego, jaki zamierzasz wyświetlać: 512 pikseli wystarcza do większości zastosowań logo w sieci, 1024 pikseli i więcej – do wyświetlaczy Retina i prezentacji, a 2048 pikseli – do druku. W przeciwieństwie do powiększania zdjęć, eksportowanie plików SVG w dużych rozmiarach nie powoduje utraty ostrości.
Dlaczego mój plik SVG wyświetla się jako pusty lub jest uszkodzony?
Zazwyczaj odwołania zewnętrzne: pliki SVG zawierające odwołania do zewnętrznych obrazów, czcionek lub arkuszy CSS nie mogą załadować tych elementów w ramach piaskownicy bezpieczeństwa przeglądarki. Pliki SVG z treścią osadzoną (inline) konwertują się bez problemów. Tekst może się również przesuwać, jeśli wykorzystuje czcionkę, której brakuje w systemie.
Plik wyjściowy w formacie PNG czy JPG — który wybrać?
Prawie zawsze należy wybierać format PNG: logo i ikony wymagają przezroczystości i ostrych krawędzi, które format PNG zachowuje, a format JPG zniekształca. Format JPG należy wybierać tylko wtedy, gdy jest to bezwzględnie wymagane przez przeznaczenie pliku lub gdy plik SVG zawiera ilustrację przypominającą zdjęcie.
Czy mogę tutaj przekonwertować plik PNG z powrotem na SVG?
Nie — to zupełnie inne zadanie (przekształcanie pikseli w kształty), które w najlepszym razie daje wyniki przybliżone. To narzędzie działa na zasadzie „wektor → raster”, co zapewnia dokładność.
Czy mój plik SVG został już przesłany do konwersji?
Nie. Przeglądarka wyświetla plik SVG na lokalnym obszarze roboczym i generuje plik PNG/JPG na Twoim urządzeniu. Żadne dane nie są przesyłane.