Przeciągnij plik SVG albo kliknij, aby go wybrać
SVG
Jak to działa
SVG to format wektorowy: opisuje kształty za pomocą współrzędnych, więc można go narysować w dowolnym rozmiarze bez utraty ostrości. PNG i JPG są natomiast bitmapami o stałej liczbie pikseli. Rasteryzacja to właśnie ten krok: ustalenie rozdzielczości i narysowanie wektora na tej siatce pikseli.
Dlatego rozdzielczość wybiera się przed konwersją, a nie po niej. Narzędzie zmienia szerokość i wysokość pliku SVG na żądany rozmiar i dopiero wtedy go rysuje, więc przeglądarka wykreśla krzywe w tej skali, zamiast powiększać mały obraz. Możesz podać mnożnik (2×, 4×…) albo dokładną szerokość i wysokość w pikselach.
PNG zachowuje przezroczystość, a JPG nie, więc przezroczyste obszary są wypełniane wybranym kolorem tła. Całe rysowanie odbywa się w przeglądarce przy użyciu Canvas: ani plik, ani kod SVG nie trafiają na żaden serwer.
Przykłady
<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 pxIkona 24 px przekonwertowana z mnożnikiem 4× ma 96 × 96 px – typowy rozmiar dla ekranów o wysokiej gęstości.<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxPlik SVG bez atrybutów width i height przyjmuje rozmiar z viewBox; tutaj jest rasteryzowany w skali 1× na obraz podglądu w mediach społecznościowych.Przypadki użycia
- Przygotować ikony PNG wymagane przez sklepy z aplikacjami lub manifesty webowe, które nie przyjmują SVG.
- Przekonwertować wektorowe logo na PNG z przezroczystym tłem, aby wstawić je do prezentacji lub dokumentu.
- Wyeksportować diagram lub wykres SVG do JPG, aby dołączyć go do wiadomości albo wysłać na platformę, która nie przyjmuje wektorów.
- Uzyskać wersje @2x i @3x tej samej ikony na ekrany o wysokiej gęstości.
- Przygotować obraz podglądu (Open Graph) strony na podstawie szablonu SVG.
Najczęstsze pytania
Jaką rozdzielczość wybrać?
Taką, jakiej wymaga docelowe zastosowanie. Na zwykłych ekranach wystarczy rozmiar, w jakim obraz będzie wyświetlany; na ekranach o wysokiej gęstości lepiej wziąć 2× lub 3× tej wartości. Do druku pomnóż wymiar w calach przez 300, aby uzyskać 300 dpi.
Dlaczego mój plik SVG ma nieoczekiwany rozmiar?
Początkowy rozmiar pochodzi z atrybutów width i height; jeśli ich brakuje albo są podane w procentach, używane są proporcje z viewBox. Gdy nie ma żadnego z nich, przeglądarka przyjmuje 300 × 150 px. Możesz pominąć tę wartość i wpisać dokładną szerokość oraz wysokość w trybie własnym.
Czy przezroczystość jest zachowana?
W PNG tak, o ile pozostawisz zaznaczoną opcję przezroczystego tła. JPG nie ma kanału alfa, więc zawsze rysowany jest na jednolitym kolorze: domyślnie białym, który możesz zmienić.
Dlaczego plik SVG z zewnętrznymi obrazami lub czcionkami się nie udaje?
Rysowany wewnątrz obrazu plik SVG nie może pobierać zasobów z innych domen, więc przeglądarka blokuje eksport ze względów bezpieczeństwa. Rozwiązaniem jest osadzenie tych zasobów w samym SVG: obrazów jako data URI, a tekstu zamienionego na ścieżki.
Czy można wrócić z PNG do SVG?
Nie bezpośrednio: rasteryzacja usuwa informacje wektorowe i zostają same piksele. Odzyskanie krzywych wymaga wektoryzacji, która odtwarza jedynie przybliżone kształty, a nie oryginał. Warto zawsze zachować wyjściowy plik SVG.