SVG nie ma pikseli, więc to jest renderowanie, a nie konwersja

Wszystkie inne konwertery na tej stronie operują na pikselach, które już istnieją. Ten działa inaczej — i właśnie ta różnica sprawia, że warto przeczytać tę stronę. SVG nie zawiera obrazu jako takiego. To zbiór instrukcji: narysuj tu okrąg, wypełnij tę ścieżkę takim gradientem, umieść tekst w tych współrzędnych. Zamiana SVG na PNG oznacza wykonanie tych instrukcji w wybranym przez Ciebie rozmiarze. Nic nie jest rozciągane ani zgadywane, bo nie ma oryginalnej siatki pikseli, którą można by rozciągnąć lub odtworzyć.

Dlaczego w ogóle potrzebujesz PNG

Format SVG jest świetny, ale prawie nikt go nie obsługuje. Klienci poczty nie wyświetlają SVG. Pakiet Office utrudnia osadzanie tych plików. Sieci społecznościowe i większość formularzy przesyłania plików odrzuca je od razu, a oprogramowanie spoza branży projektowej traktuje SVG jak plik tekstowy — bo technicznie rzecz biorąc, właśnie tym jest. PNG to wersja, którą wszyscy akceptują.

Duży rozmiar nic Cię tu nie kosztuje

Powiększanie zdjęcia wymyśla piksele, których nigdy nie zarejestrowano, dlatego obraz robi się rozmyty przy 2x i zamienia się w papkę przy 10x. Renderowanie wektora nie ma takiego ograniczenia. Ikona 24 piksele wyrenderowana w 1024 pikselach to nie powiększona wersja 24 pikseli — to ten sam rysunek wykonany od nowa w 1024 pikselach, z każdą krzywą i krawędzią obliczoną dla tego rozmiaru. Przetestowaliśmy to: ikona 24 na 24 piksele wróciła jako 1024 na 1024, z identycznymi kolorami jak w oryginale, bajt w bajt, i z gładkimi, antyaliasowanymi krawędziami zamiast schodków.

Wniosek praktyczny jest prosty: renderuj w największym rozmiarze, którego faktycznie użyjesz, nie w najmniejszym, bo PNG to od tego momentu stała siatka pikseli. Większy rozmiar kosztuje Cię tylko kilka milisekund.

Wybierasz rozmiar Ty albo plik

Wpisz szerokość, a rysunek zostanie do niej dopasowany z zachowaniem proporcji. Poproś o logo 2:1 w rozmiarze 400 na 400, a dostaniesz ostre 400 na 200, nigdy spłaszczony kwadrat. Dostępne są gotowe ustawienia jednym kliknięciem: 256, 512, 1024 i 2048, oraz opcja Oryginał, która renderuje w rozmiarze zadeklarowanym w samym pliku SVG. Dla pliku z deklaracją 200 na 100, Oryginał zwrócił dokładnie 200 na 100. Maksymalny rozmiar to 16 384 piksele na bok i 64 megapiksele łącznie, co pozwala na render 8000 na 8000.

Przezroczystość, także częściowa

PNG obsługuje prawdziwy kanał alfa, więc logo z przezroczystym tłem wróci z przezroczystym tłem — gotowe do użycia na slajdzie czy stronie produktu, bez białej ramki. To, co odróżnia dobry silnik renderujący od niedbałego, to częściowa przezroczystość: miękkie cienie, rozmyte krawędzie, dowolne elementy ustawione na półprzezroczystość. Dla kształtu zadeklarowanego na 50% przezroczystości, wynik miał wartość alfa 128, czyli dokładnie połowę. Każdy render wracał jako prawdziwy obraz RGBA. Jeśli wolisz spłaszczyć przezroczystość, ustaw tło na jednolity kolor i wybierz dokładny odcień z palety kolorów.

Tekst i gradienty — dwa najczęstsze problemy

Renderowanie SVG po stronie serwera zwykle zawodzi w dwóch miejscach. Brakuje czcionek, więc tekst znika lub pojawia się w złym kroju. Gradienty zdefiniowane raz i odwołane przez id nie są rozpoznawane, więc kształty wracają płaskie lub czarne. Sprawdziliśmy oba przypadki. Tekst został wyrenderowany z gładkimi, antyaliasowanymi krawędziami znaków, a gradient liniowy odwołany przez url() pojawił się jako prawidłowe przejście kolorów. Jeśli plik żąda czcionki, której serwer nie ma, używana jest zamiennik, a wynik o tym informuje — zamiast zostawiać Cię z niespodzianką.

Przesyłanie SVG od kogoś innego jest tu bezpieczne

SVG może legalnie zawierać JavaScript i wskazywać zasoby z internetu. Dlatego dostawcy poczty blokują ten format i to rzeczywisty powód, by uważać na plik od nieznajomego. Renderowanie tutaj odbywa się przez dedykowany silnik wektorowy, a nie przeglądarkę: skrypty nigdy nie są wykonywane, a zewnętrzne odwołania nigdy nie są pobierane. Nic w pliku nie może się uruchomić, połączyć z internetem ani niczego odczytać. Otrzymujesz prawdziwy, statyczny stan rysunku, dlatego animacje renderują się jako pierwsza klatka, a nie ruchomy obraz.

Szybko i powtarzalnie

Klasyczny tygrys Ghostscript, 94,5 KB gęstych ścieżek Béziera i standardowy test dla silników SVG, został wyrenderowany do PNG 512 pikseli w 53 milisekundy. Renderowanie tego samego pliku dwa razy daje identyczny bajt w bajt wynik, więc rezultat można odtworzyć dokładnie, a nie tylko w przybliżeniu. Skompresowane pliki .svgz są odczytywane bezpośrednio, a format wykrywany jest na podstawie bajtów pliku, więc plik z inną nazwą lub bez rozszerzenia i tak się wyrenderuje.

Zestaw ikon za jednym razem

Kilka plików renderuje się z tymi samymi ustawieniami i wraca jako pojedynczy ZIP pod oryginalnymi nazwami. Trzy różne pliki o nazwie icon.svg wrócą jako icon.png, icon_1.png i icon_2.png, zamiast by dwa z nich po cichu zniknęły. Uszkodzony lub nie-SVG w paczce jest pomijany i wymieniony w wyniku, zamiast przerywać całą operację.

Co otrzymujesz

• PNG wyrenderowany w wybranym przez Ciebie rozmiarze, a nie powiększoną kopię małego pliku
• Zachowane proporcje — nic nie wraca rozciągnięte ani spłaszczone
• Pełny kanał alfa, także dla półprzezroczystych kształtów i miękkich cieni, lub dowolne tło, które wybierzesz
• Tekst i gradienty są renderowane, a nie pomijane, z informacją o zamiennikach czcionek
• Brak wykonywania skryptów i pobierania zewnętrznych zasobów — nieznane SVG jest bezpieczne do przesłania
• Bez konta, bez znaku wodnego, a pliki są usuwane z serwera po godzinie

Co dalej?

Plik wyrenderowany na 4000 pikseli jest duży, więc Kompresuj PNG to zwykle kolejny krok przed umieszczeniem go na stronie, a PNG do WebP pozwala zoptymalizować go pod kątem internetu. Jeśli zachowujesz też wektor, Kompresuj SVG usuwa z niego śmieci po edytorze.