PerfectVector
Autor: Claire Yoon

WebP do SVG: zamień piksele w prawdziwe ścieżki

WebP to raster, więc zapis jako SVG nie wystarczy. Trzeba go przetrasować. Zobacz, jak uzyskać czysty, prawdziwy wektor i uniknąć pozornej konwersji.

6 min czytania
Na tej stronie

WebP to obraz rastrowy, czyli siatka pikseli jak JPG lub PNG. Dokumentacja Google definiuje stratny i bezstratny WebP jako formaty kompresji obrazów, podczas gdy SVG opisuje grafikę wektorową przez kształty i ścieżki. Nie istnieje więc polecenie „Zapisz jako SVG”, które zamieni piksele w geometrię wektorową; obraz trzeba najpierw przetrasować do kształtów i ścieżek. (Przegląd WebP od Google; W3C SVG 2)

Oto jak naprawdę przekonwertować WebP do czystego, edytowalnego SVG, na co uważać i kiedy nie warto tego robić.

Jeśli źródłem jest AVIF zamiast WebP, zachowaj oryginalny plik i użyj konwertera AVIF do SVG, zamiast dodawać zmianę formatu przed trasowaniem.

Wersja w skrócie
  • WebP jest rastrem, więc trzeba go przetrasować do wektora, a nie tylko „zapisać” jako wektor.
  • Uważaj na pozorne wektory: konwerter osadzający WebP w .svg, który nadal ujawnia piksele.
  • WebP może być stratny lub bezstratny. Wersja stratna zawiera szum kompresji, więc zacznij od najczystszego źródła.
  • Płaska grafika o wysokim kontraście konwertuje się dobrze. Zdjęcia nie.
  • Przetrasuj obraz konwerterem WebP do SVG, a potem sprawdź, czy naprawdę da się go edytować.

Najpierw rzecz, którą pomija większość konwerterów

Warto jasno wyjaśnić, co faktycznie się dzieje, ponieważ czołowe wyniki wyszukiwania tego nie robią:

  • WebP przechowuje piksele. Format obsługuje stratną i bezstratną kompresję, przezroczystość i animację, ale pozostaje rastrem. Zobacz specyfikację kontenera WebP od Google.
  • SVG przechowuje matematykę: punkty, ścieżki i krzywe, które zachowują ostrość w każdym rozmiarze.

Animacja wymaga osobnej decyzji: zmiana ruchomego rastra w SVG nie zachowuje automatycznie ruchu. Poradnik animowanego GIF do SVG wyjaśnia różnicę między trasowaniem jednej klatki a odtworzeniem animacji SVG.

Jeśli źródłem jest GIF i chcesz jedną edytowalną klatkę, użyj konwertera klatki GIF do SVG, aby wybrać ten moment przed trasowaniem. Zachowaj animację osobno, jeśli nadal potrzebujesz jej ruchu.

Nie ma bezstratnej „konwersji” między tymi formatami. Przejście z WebP do SVG oznacza przerysowanie pikseli jako kształtów, czyli wektoryzację lub trasowanie. Dlatego prawdziwa konwersja wymaga narzędzia do trasowania zamiast zmiany nazwy pliku.

Pułapka, której warto uniknąć: plik SVG może osadzać raster za pomocą elementu <image>. Taki plik ma rozszerzenie .svg, ale osadzone piksele nie zmieniają się w edytowalne ścieżki i nadal mogą rozmywać się przy powiększaniu. Zobacz specyfikację W3C dotyczącą osadzonej zawartości SVG. Potrzebujesz narzędzia, które odtwarza obraz jako prawdziwe ścieżki.

Stratny czy bezstratny? To zmienia wynik

WebP występuje w wersji stratnej i bezstratnej, a to, którą masz, wpływa na trasowanie:

  • Stratny WebP, typowy eksport internetowy, stosuje kompresję podobną do JPG, więc zawiera artefakty i miękkie, zaszumione krawędzie. Trasowanie je przechwytuje, dlatego zacznij od najlepszej dostępnej wersji. (To ten sam problem co przy konwersji JPG do SVG.)
  • Bezstratny WebP zachowuje ostre krawędzie jak PNG, dzięki czemu daje czyste ścieżki. (Zobacz konwersję PNG do SVG bez utraty jakości, aby poznać procedurę pracy z czystym źródłem.)

WebP obsługuje też przezroczystość przez kanał alfa, więc jeśli obraz ma przezroczyste tło, użyj konwertera, który je zachowuje. Inaczej za kształtami pojawi się niechciany wypełniony prostokąt. Zobacz specyfikację bezstratnego strumienia WebP od Google.

Jak przekonwertować WebP do SVG krok po kroku

  1. Zacznij od najlepszego źródła. Użyj oryginalnego WebP o najwyższej jakości. Jeśli to mocno skompresowany plik stratny, spodziewaj się bardziej zaszumionego wyniku.
  2. Użyj prawdziwego narzędzia do wektoryzacji zamiast ogólnego konwertera plików. Potrzebujesz narzędzia, które trasuje obraz do ścieżek, a nie osadza raster.
  3. Zwektoryzuj. Wrzuć WebP do konwertera WebP do SVG i pozwól mu odtworzyć obraz jako czyste ścieżki z małą liczbą węzłów.
  4. Uprość kolory i zachowaj przezroczystość. Połącz niemal identyczne kolory (stratny WebP dodaje ich kilka) i upewnij się, że przezroczyste tło pozostaje przezroczyste.
  5. Pobierz i sprawdź wynik według wskazówek poniżej.

Jak wygląda to w PerfectVector

Celem pracy z WebP jest prawdziwy wektor: czyste, edytowalne ścieżki zamiast ukrytych pikseli. Właśnie to tworzy PerfectVector. Trasuje WebP do gładkich ścieżek z małą liczbą węzłów, zachowuje przezroczystość i udostępnia edytor kolorów do łączenia dodatkowych odcieni wprowadzonych przez stratny WebP. Możesz przekonwertować WebP do czystego SVG i samodzielnie sprawdzić ścieżki. Pierwsze obrazy przekonwertujesz bezpłatnie, bez karty płatniczej.

Przed
Stratny WebP prostego emblematu o miękkich, zaszumionych krawędziach, osadzony jako raster w SVG, który nadal ujawnia piksele przy powiększaniu
WebP opakowany w .svg: nadal piksele i nadal rozmycie po zwiększeniu rozmiaru.
Po
Ten sam emblemat przetrasowany do prawdziwego SVG z czystymi, edytowalnymi ścieżkami o małej liczbie węzłów, zachowującymi ostrość w każdym rozmiarze
Prawdziwe trasowanie z czystymi, edytowalnymi ścieżkami zachowującymi ostrość w każdym rozmiarze.

Szybka kontrola wyniku. Prawdziwa konwersja WebP do SVG daje:

  • Edytowalne ścieżki zamiast WebP osadzonego w .svg; po powiększeniu obraz powinien pozostać ostry.
  • Małą liczbę węzłów, czyli czyste krzywe zamiast tysięcy punktów (więcej o liczbie węzłów).
  • Zachowaną przezroczystość, jeśli występowała w źródle, bez zbędnego prostokąta tła.
  • Uporządkowaną paletę, zawierającą zamierzone kolory zamiast dodatków po kompresji stratnej WebP.

Kiedy pominąć konwerter

Trasowanie nie jest odpowiednie dla każdego WebP:

  • Fotografie i obrazy fotorealistyczne spłaszczają się do plam po posteryzacji, więc zachowaj je jako rastry.
  • Grafika z wieloma gradientami lub fakturami traci subtelności. Jeśli potrzebujesz wektora, odtwórz ją jako płaskie kształty.
  • Małych lub mocno skompresowanych WebP nie da się uratować. Znajdź lepsze źródło lub odtwórz grafikę.

Jak zawsze wektoryzacja jest przeznaczona do płaskiej grafiki ilustracyjnej, takiej jak logo, ikony i proste obrazy, nie do zdjęć. (Dopiero poznajesz temat? Zacznij od wyjaśnienia wektoryzacji obrazu.)

FAQ

Czy mogę po prostu zapisać WebP jako SVG? Nie. WebP to raster (piksele), a SVG to wektor (kształty i ścieżki). Żadne „Zapisz jako” nie zamieni jednego w drugie. Obraz trzeba przetrasować do kształtów wektorowych, czym zajmuje się narzędzie do wektoryzacji.

Dlaczego WebP nadal wygląda na pikselizowany po „konwersji” do SVG? Ogólny konwerter prawdopodobnie osadził WebP w opakowaniu .svg, zamiast go przetrasować. To pozorny wektor, który nadal ujawnia piksele. Użyj narzędzia odtwarzającego obraz jako prawdziwe, edytowalne ścieżki.

Czy mogę przekonwertować WebP do SVG bezpłatnie? Tak. Prześlij WebP do narzędzia do wektoryzacji, uprość kolory i pobierz SVG. Pierwsze obrazy przekonwertujesz bezpłatnie, bez karty płatniczej. Potwierdź tylko, że wynik jest prawdziwym trasowanym wektorem, a nie WebP opakowanym w .svg.

Czy przezroczystość WebP przechodzi do SVG? Może, jeśli użyjesz konwertera, który ją zachowuje. WebP obsługuje przezroczystość, a dobre trasowanie pozostawia tło przezroczyste, bez niechcianego wypełnionego prostokąta.

Czy mogę przekonwertować zdjęcie z WebP do SVG? Możesz, ale zazwyczaj nie warto. Zdjęcia mają zbyt wiele tonów i gradientów, aby zmienić się w czyste kształty, więc otrzymasz plamy po posteryzacji lub ogromny plik. Wektoryzacja służy do logo, ikon i ilustracji.

Źródła

  1. Google for Developers — format obrazu dla internetu — Oficjalny przegląd stratnej i bezstratnej kompresji WebP oraz obsługi kanału alfa.
  2. Google for Developers — specyfikacja kontenera WebP — Szczegóły formatu dotyczące obrazów nieruchomych, animacji i przezroczystości.
  3. W3C — Scalable Vector Graphics (SVG) 2 — Standard definiujący model grafiki wektorowej SVG.
  4. W3C — osadzona zawartość SVG — Specyfikacja pokazująca, że SVG może zawierać osadzony raster bez zamiany go w ścieżki.

Masz logo lub grafikę WebP, którą trzeba skalować? Przekonwertuj ją do prawdziwego, edytowalnego SVG, przetrasuj, uprość kolory i pobierz w kilka sekund.

Więcej z bloga

PerfectVector

Zamień plik obrazu w
edytowalny SVG

Bez karty kredytowej