# Konwerter SVG na PNG: Od nieskończonego wektora do uniwersalnego rastra
SVG (Scalable Vector Graphics) to doskonały wybór do projektowania stron internetowych: nieskończenie skalowalny, lekki i edytowalny w dowolnym edytorze kodu. Ale kiedy musisz użyć tego logo lub ikony w aplikacji mobilnej, udostępnić je w mediach społecznościowych lub wstawić do prezentacji PowerPoint, napotykasz barierę: większość tych platform nie obsługuje formatu SVG. Format PNG jest uniwersalnym rozwiązaniem: rastrowy, z kanałem alfa i kompatybilny w absolutnie każdym kontekście.# SVG vs PNG: Wektory dla sieci, raster dla świata
SVG przechowuje obraz jako instrukcje matematyczne: krzywa Béziera, gradient, wielokąt. Oznacza to, że ten sam plik wygląda idealnie przy 16 px lub 16 000 px. Jest to idealny format dla kodu strony internetowej, animacji CSS i wszelkich elementów, które muszą dostosowywać się do różnych rozdzielczości ekranu bez utraty jakości.PNG przechowuje obraz jako siatkę pikseli z informacjami o kolorze i przezroczystości dla każdego piksela. Jest to format bezystratny (lossless), co oznacza pełne zachowanie jakości. Po zrasteryzowaniu formatu SVG do PNG rozdzielczość jest ustalona. Dlatego wybór odpowiedniego rozmiaru eksportu jest kluczowy: nasze narzędzie renderuje w podwójnej skali (2x), aby zapewnić ostrość na ekranach Retina i 4K.# Porównanie: Konwersja lokalna vs w chmurze
Konwertery w chmurze
Narzędzia, które przesyłają pliki na zdalny serwer.
- Twój kod SVG trafia na zewnętrzne serwery
- Zdalne renderowanie o niespójnej jakości
- Czas oczekiwania na przesłanie i przetworzenie
- Ograniczenia dotyczące rozmiaru pliku SVG
Nasza lokalna architektura
Bezpośrednie przetwarzanie na Twoim sprzęcie przy użyciu technologii Vanilla JS.
- Twój plik SVG nigdy nie opuszcza przeglądarki
- Renderowanie natywnym silnikiem przeglądarki dla maksymalnej wierności
- Format PNG w rozdzielczości 2x dla ekranów o wysokiej gęstości
- Przezroczystość zachowana dzięki pełnemu kanałowi alfa
# Jak to działa technicznie
Proces rozpoczyna się od załadowania pliku SVG do elementu JavaScript Image. Gdy silnik przeglądarki przeanalizuje i wyrenderuje wektorowy kod XML, wynikowy obraz jest rysowany na HTML5 Canvas, którego wymiary są dwukrotnie większe od oryginalnego rozmiaru SVG (skala 2x). Daje to plik PNG o dwukrotnie większej liczbie pikseli na wymiar, idealny dla ekranów o wysokiej rozdzielczości.W przeciwieństwie do konwersji na JPG, podczas eksportu do PNG płótno zachowuje pełny kanał alfa: przezroczyste obszary w oryginalnym SVG stają się w pełni przezroczystymi pikselami w wynikowym pliku PNG — bez wypełnienia tła na biało. Eksport wykorzystuje metodętoDataURL('image/png') z bezstratną kompresją.Wskazówka przed rasteryzacją
Dokładnie wybierz rozmiar eksportu PNG — rasteryzacja pliku SVG jest procesem jednokierunkowym: nie można odzyskać wektorów z wynikowego pliku PNG. Zawsze zachowuj oryginalny plik SVG jako źródło master i generuj pliki PNG w najwyższej rozdzielczości, jakiej możesz kiedykolwiek potrzebować.# Zastosowania i kompatybilność
- Eksportowanie logo wektorowych do prezentacji PowerPoint lub Google Slides.
- Tworzenie ikon PNG dla systemów iOS, Android lub Progressive Web Apps.
- Udostępnianie projektów SVG na Instagramie, LinkedInie lub w innych mediach społecznościowych.
- Wstawianie ilustracji wektorowych do dokumentów Word lub PDF.
- Generowanie miniatur PNG grafiki SVG dla podglądu w systemie CMS.