Wektoryzacja obrazu do SVG

Jak zamienić obraz na SVG

1. Upuść obraz PNG, JPG, WebP lub GIF na pole albo kliknij je, aby go wybrać. Oryginał pojawi się po lewej stronie.
2. Wybierz Ustawienie wstępne: - Logo (jednolite kolory, czyste kształty) do logo, ikon, pieczątek i płaskich ilustracji; - Szczegółowe (więcej kolorów i ścieżek) do rysunków z cieniowaniem lub wieloma kolorami; - Posteryzacja (4 wygładzone kolory) do stylizowanego, plakatowego efektu ze zdjęcia.
3. W razie potrzeby dostosuj Liczba kolorów (od 2 do 64) i Ignoruj plamki mniejsze niż (px). Ustawienie wstępne wpisuje rozsądne wartości dla obu.
4. Wybierz Rozmiar roboczy (dłuższy bok). Obraz jest wektoryzowany w tym rozmiarze, a sam plik SVG zachowuje oryginalne wymiary.
5. Kliknij Wektoryzuj do SVG. Wynik pojawi się po prawej stronie z rozmiarem pliku, liczbą ścieżek i kolorów oraz czasem wektoryzacji.
6. Kliknij Pobierz SVG albo Kopiuj kod SVG, aby wkleić kod do swojego HTML-a lub programu graficznego.

Jak działa wektoryzacja

Narzędzie korzysta z imagetracerjs, otwartej biblioteki do wektoryzacji, w trzech krokach:

1. Kwantyzacja kolorów: obraz jest redukowany do wybranej liczby kolorów. Każdy piksel jest przypisywany do najbliższego koloru palety, a sama paleta jest dopracowywana w kilku przebiegach.
2. Wykrywanie krawędzi: dla każdego koloru śledzone są kontury wszystkich obszarów w tym kolorze, łącznie z otworami (np. wnętrzem litery „O”).
3. Dopasowanie ścieżek: kontury są upraszczane do odcinków prostych i krzywych kwadratowych, które stają się elementami <path> w pliku SVG.

Obszary mniejsze niż próg Ignoruj plamki mniejsze niż (px) są pomijane, co usuwa szum i artefakty JPG. Wartość 0 zachowuje wszystko; 8–20 jest dobre dla logo; większe wartości dają czystszy, ale prostszy rysunek. W pełni przezroczyste obszary są usuwane, więc logo na przezroczystym tle pozostaje przezroczyste.

Co daje dobre efekty

Wektoryzacja działa najlepiej przy prostych logo i rysunkach: niewiele jednolitych kolorów, wyraźne krawędzie, brak gradientów. Zeskanowany szkic, czarno-biały podpis czy ikona w stylu pixel art wektoryzują się bardzo dobrze przy 2–8 kolorach.

Ze zdjęciami jest inaczej. Zdjęcie zawiera tysiące subtelnych odcieni, więc wierna wersja wektorowa wymaga wielu kolorów i dziesiątek tysięcy ścieżek, a plik SVG wychodzi dużo cięższy niż JPG. Zamiast tego użyj Posteryzacja (4 wygładzone kolory) dla efektu artystycznego i nie oczekuj fotograficznego wyniku. Gdy SVG robi się bardzo duży, narzędzie cię ostrzeże.

Wskazówki dla czystszego logo:

• zacznij od największej i najostrzejszej wersji obrazu, jaką masz;
• ustaw Liczba kolorów na rzeczywistą liczbę kolorów logo (łącznie z tłem);
• zwiększ próg plamek, jeśli widzisz drobne kropki wokół krawędzi.

Prywatność i bezpieczeństwo podglądu

Obraz jest wektoryzowany w twojej przeglądarce i nigdy nie jest przesyłany. Podgląd SVG jest wyświetlany jako zwykły obraz z prywatnego adresu blob i nigdy nie jest wstawiany do strony, więc nawet nietypowy plik nie może uruchomić kodu.