Konwertuj SVG na PNG online

Wektory na wejściu, piksele na wyjściu

Plik SVG nie zawiera pikseli. To tekstowy opis kształtów: okrąg w tych współrzędnych, ścieżka przez te punkty, wypełniona tym kolorem. Dlatego logo w SVG wygląda ostro zarówno na telefonie, jak i na monitorze 5K, i dlatego ten sam plik może ważyć 4 KB przy każdym rozmiarze wyświetlania.

Wiele miejsc nie potrafi użyć takiego opisu bezpośrednio. Sieci społecznościowe, platformy sprzedażowe, newslettery e-mail, dokumenty Office, większość komunikatorów, sklepy z aplikacjami i wiele systemów zarządzania treścią wymaga obrazu rastrowego. Konwersja do PNG renderuje kształty w stałym rozmiarze, z zachowaną przezroczystością, więc wynik działa wszędzie tam, gdzie przyjmowane są obrazy.

Ponieważ rysowanie odbywa się w momencie konwersji, rozmiar docelowy nie kosztuje jakości. PNG wyrenderowany w 3000 px bezpośrednio z SVG jest idealnie ostry, a to samo logo wyeksportowane w 300 px i potem powiększone byłoby rozmyte.

Jak ustalany jest rozmiar wyniku

Jest tylko jedno ustawienie: szerokość w pikselach. Wysokość jest zawsze obliczana z proporcji SVG, więc rysunek nigdy nie jest rozciągany.

Gdy pole „Szerokość, px” zostanie puste, konwerter używa własnego rozmiaru SVG:

1. Atrybutów width i height głównego elementu <svg>, jeśli oba są zwykłymi liczbami lub wartościami w pikselach, np. width="512" height="256".
2. W przeciwnym razie viewBox: viewBox="0 0 120 80" daje 120×80 px. Tak dzieje się też wtedy, gdy rozmiar podano w procentach, em lub centymetrach.
3. W przeciwnym razie rozmiaru, jaki przeglądarka przypisze obrazowi.

Wiele zestawów ikon deklaruje rozmiar 24×24 lub 16×16, co daje bardzo mały PNG. Wpisz szerokość, aby wyrenderować go większym: 512 dla ostrej ikony w stylu aplikacji, 1200 dla grafiki podglądu w mediach społecznościowych. Lista plików pokazuje wynikową szerokość × wysokość i rozmiar każdego pliku PNG, więc możesz sprawdzić wynik przed pobraniem.

Wszystkie pliki w partii mają tę samą szerokość. Przy ikonach o różnych proporcjach oznacza to równe szerokości, ale różne wysokości.

Jaką szerokość wybrać do typowych zastosowań

• Ekrany Retina i o wysokiej gęstości pikseli: renderuj w dwu- lub trzykrotności wyświetlanego rozmiaru. Logo wyświetlane w nagłówku strony w szerokości 200 px powinno mieć jako PNG 400 lub 600 px szerokości.
• Dokumenty i slajdy: 1500–2000 px szerokości utrzymuje ostrość logo nawet wtedy, gdy slajd jest wyświetlany na pełnym ekranie z projektora.
• Druk: pomnóż szerokość wydruku w calach przez 300. Logo drukowane w szerokości 4 cali potrzebuje 1200 px.
• Favicony i ikony aplikacji: do całego zestawu rozmiarów ikon za jednym razem wygodniejszy jest Generator favicon.

Bardzo duże szerokości ogranicza przeglądarka, a nie narzędzie. Przeglądarki limitują łączną liczbę pikseli kanwy; na iPhone'ach i iPadach ten limit wynosi około 16 milionów pikseli, czyli mniej więcej 4000×4000. Jeśli konwersja na telefonie nie udaje się przy dużej szerokości, spróbuj mniejszej albo użyj przeglądarki na komputerze.

Dlaczego PNG może nie wyglądać jak podgląd w edytorze

SVG jest renderowany przez przeglądarkę jako odizolowany obraz, tak samo jak pokazałby go znacznik <img> na stronie internetowej. Ze względów bezpieczeństwa SVG w tym trybie nie może uruchamiać skryptów ani wczytywać niczego z sieci. W praktyce powoduje to kilka typowych różnic:

• Czcionki. Tekst złożony czcionką internetową, która jest podlinkowana, a nie osadzona, wraca do czcionki domyślnej. Używana jest czcionka o tej nazwie, jeśli akurat jest zainstalowana na urządzeniu, co oznacza, że ten sam SVG może wyglądać inaczej na innym komputerze. Zamiana tekstu na krzywe w programie graficznym usuwa ten problem.
• Podlinkowane obrazy. Obrazy rastrowe wskazywane adresem URL nie pojawią się; obrazy osadzone jako dane wewnątrz SVG wyświetlą się normalnie.
• Animacja i interaktywność. Efekty po najechaniu kursorem i zachowania oparte na skryptach nie działają, a animowane SVG są zapisywane jako pojedyncza nieruchoma klatka.
• Efekty. Filtry i tryby mieszania zależą od obsługi SVG w przeglądarce, więc złożone efekty mogą nieco się różnić między Chrome, Firefoksem i Safari.

Tło, pliki i prywatność

Puste obszary pozostają w PNG przezroczyste. Jeśli potrzebujesz jednolitego tła, na przykład dla platformy, która pokazuje przezroczystość jako czerń, przepuść wynik przez PNG na JPG i tam wybierz kolor tła.

Przyjmowane są pliki SVG do 20 MB. Renderowanie i kodowanie PNG odbywają się w przeglądarce, więc pliki, które często zawierają nieopublikowane logo i materiały marki, nigdy nie są wysyłane. Wyniki można pobrać pojedynczo lub jako ZIP.