Co robi to narzędzie
To narzędzie zamienia kod SVG lub plik .svg na obraz PNG, JPG lub WebP. Wklej znaczniki, upuść plik, wybierz skalę lub dokładną szerokość i pobierz bitmapę. Renderowanie odbywa się w twojej przeglądarce, więc ikony, logo i diagramy nigdy nie opuszczają twojego komputera.
Przydaje się wszędzie tam, gdzie SVG nie jest akceptowane: ikony aplikacji, grafiki do mediów społecznościowych, prezentacje, dokumenty, stopki e-mail czy starsze oprogramowanie. Podgląd na żywo na tle w szachownicę pokazuje dokładnie, które fragmenty są przezroczyste.
Jak używać
- Wklej kod
<svg>do edytora, kliknij Wczytaj plik, aby otworzyć plik, albo przeciągnij go na stronę. Przykład wczytuje małe logo. - Wybierz rozmiar: 1× używa wymiarów samego SVG, 2×–4× je mnoży. Możesz też wpisać własną szerokość w pikselach; wysokość dopasuje się do proporcji.
- Wybierz format: PNG dla bezstratnego wyniku z przezroczystością, JPG dla zdjęć i zgodności, WebP dla małych plików.
- Wybierz tło: przezroczyste, białe lub dowolny kolor.
- Kliknij Pobierz. Linia pod podglądem pokazuje ostateczny rozmiar w pikselach, format i rozmiar pliku.
Jak wyliczany jest rozmiar
Narzędzie sprawdza główny element <svg>. Atrybuty width i height w px, pt, mm, cm, in lub em są przeliczane na piksele. Jeśli ich brakuje lub są podane w procentach, używana jest szerokość i wysokość z viewBox. Następnie stosowana jest wybrana skala lub własna szerokość, a SVG jest przepisywane z jawnie podanymi rozmiarami w pikselach, aby każda przeglądarka rysowała je tak samo.
Przykład
Ikona z viewBox="0 0 24 24" bez szerokości i wysokości staje się przy 1× plikiem PNG 24 × 24. Przy 4× ma 96 × 96, a z własną szerokością 512 staje się plikiem PNG 512 × 512, odpowiednim na ikonę w sklepie z aplikacjami — nadal idealnie ostrym, bo renderowanym z wektorów zamiast powiększanym.
Wskazówki
- Nieprawidłowy XML jest zgłaszany z numerem linii, więc możesz od razu przejść do problemu.
- Osadzone obrazy rastrowe (
<image href="data:...">) działają; linki zewnętrzne nie. - Tekst używa czcionek zainstalowanych na twoim komputerze. Aby wszędzie uzyskać identyczny wynik co do piksela, najpierw zamień tekst na krzywe w swoim programie graficznym.
- Największy możliwy wynik jest ograniczony rozmiarem canvasu przeglądarki, około 16 000 pikseli na bok.
FAQ
› Czy SVG jest gdzieś wysyłane?
Nie. Twoja przeglądarka rysuje SVG na canvasie i zapisuje wynik. Kod i obraz pozostają na twoim urządzeniu.
› Jak uzyskać ostrzejszy PNG?
Wybierz skalę 2×, 3× lub 4× albo wpisz dokładną szerokość. SVG to format wektorowy, więc renderowanie w większym rozmiarze daje ostre krawędzie na ekranach o wysokiej gęstości pikseli. 2× to dobry wybór domyślny dla wyświetlaczy Retina.
› Dlaczego w wyniku brakuje niektórych obrazów lub czcionek?
Ze względów bezpieczeństwa przeglądarki nie wczytują plików zewnętrznych (podlinkowanych obrazów, fontów webowych, CSS), gdy SVG jest rysowane jako obraz. Osadź obrazy jako data URL i zamień tekst na ścieżki albo użyj czcionek systemowych.
› Czy mogę zachować przezroczyste tło?
Tak. Wybierz Przezroczyste z formatem PNG lub WebP. JPG nie obsługuje przezroczystości, więc przezroczyste obszary są wypełniane bielą lub wybranym kolorem.
› Moje SVG nie ma szerokości ani wysokości. Jaki rozmiar zostanie użyty?
Narzędzie odczytuje viewBox i używa jego szerokości i wysokości. Jeśli nie ma ani rozmiaru, ani viewBox, używa domyślnego rozmiaru przeglądarki 300 × 150 i o tym informuje.