> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVGcode: sprawdź eksportowane kształty

> Obrysuj obraz w jednolitych kolorach w SVGcode, skopiuj rzeczywisty plik SVG i sprawdź jego paletę, wewnętrzne otwory, tło i płótno przed użyciem pliku w swoim projekcie.

Source: https://perfectvector.com/pl/blog/svgcode-image-tracing

Language: pl
Author: Irene Kim
Published: 2026-11-02T08:00:00+09:00

W przypadku śledzenia obrazu SVGcode załaduj grafikę rastrową, wybierz Color SVG lub Monochrome SVG, dostosuj ślad, a następnie sprawdź sam wyeksportowany plik SVG. Przed przyjęciem sprawdź kolory, dziury wewnętrzne i płótno. W naszym teście płaskich kolorów SVGcode wygenerował rzeczywiste ścieżki i zachował otwarcie ramki, ale oba wyeksportowane warianty zmieniły oryginalną paletę i użyły innego płótna.

Jeśli chcesz, aby obraz, który już masz, działał w innej przeglądarce, [obejrzyj go bezpłatnie w PerfectVector](https://perfectvector.com/pl/image-to-vector). Musisz odblokować wynik, zanim będziesz mógł go edytować lub wyeksportować. Użyj tych samych kontroli kształtu i koloru poniżej; ten przewodnik nie porównuje jakości wyjściowej obu narzędzi.

## Co śledzi SVGcode i co przygotować

[SVGcode](https://svgco.de/) konwertuje obrazy rastrowe na grafikę wektorową SVG. Jej autor opisuje implementację WebAssembly opartą na Potrace, która śledzi kolor po kolorze; [oficjalne repozytorium źródłowe](https://github.com/tomayac/SVGcode) dokumentuje tę implementację. To wyjaśnia podejście, ale wyeksportowany plik jest dowodem na istnienie Twojej własnej grafiki.

Zacznij od kopii pliku PNG lub innego obsługiwanego obrazu rastrowego, przeglądarki umożliwiającej dostęp do SVGcode i pozwolenia na przetwarzanie grafiki. Aby skorzystać z poniższej ścieżki schowka, Twoja przeglądarka musi umożliwiać dostęp do schowka obrazów. Udostępnij edytor zwykłego tekstu, aby zapisać skopiowane znaczniki SVG, a także przeglądarkę lub edytor SVG w celu sprawdzenia ukończenia.

Przydatnym pierwszym wprowadzeniem jest płaski znak z wyraźnie zaznaczonymi kolorowymi obszarami. Przed zmianą ustawień zapisz kolory i otwory, które należy zachować. W przypadku zdjęcia lub miękkiego gradientu zdecyduj, które szczegóły możesz uprościć; śledzenie nie może wywnioskować wszystkich zamierzonych granic na podstawie pikseli. [Przewodnik po wektoryzacji obrazu](https://perfectvector.com/pl/blog/what-is-image-vectorization) wyjaśnia bardziej szczegółowo tę decyzję dotyczącą przejścia od rastra do ścieżki.

## 1. Załaduj obraz i wybierz tryb śledzenia

Otwórz SVGcode i załaduj swój obraz. W przypadku testowanej trasy umieść rzeczywisty obraz w schowku i wybierz opcję **Wklej obraz**. Przed wprowadzeniem jakichkolwiek zmian upewnij się, że podgląd pokazuje zamierzony obraz, łącznie z przezroczystymi obszarami i drobnymi szczegółami wnętrza.

Wybierz opcję **Color SVG**, jeśli istotne są oddzielne kolorowe obszary. Użyj **Monochrome SVG**, jeśli zamierzonym efektem jest jednokolorowa sylwetka. W tym instruktażu wykorzystano w całym tekście Color SVG; nie zgłasza oddzielnego testu monochromatycznego.

Pozostaw oryginalny raster otwarty obok podglądu. Nie oceniaj śladu tylko po tym, czy jego krawędzie wyglądają gładko po powiększeniu. Pusty środek, mała szczelina lub celowo oddzielony kolor mogą mieć większe znaczenie niż gładka zewnętrzna krawędź.

## 2. Zmień ustawienia, mając na uwadze jeden widoczny szczegół

Zacznij od jednej wady, na którą możesz wskazać, takiej jak niechciane kropki poza grafiką lub mały otwór, który znika. Zmień jedną kontrolkę, poczekaj na aktualizację podglądu, a następnie porównaj ponownie szczegóły.

Opcja **Pomiń plamki** usuwa małe obszary. Podniesienie go może pomóc w przypadku bezpańskich kropek, ale sprawdź drobne szczegóły, które miałeś zachować. **Posteryzacja obrazu wejściowego** zmniejsza różnice kolorów przed śledzeniem; posteryzacja grupuje kolory na mniejszą liczbę poziomów. [SVGcode](https://web.dev/case-studies/svgcode?hl=en) autora wyjaśnia zarówno sterowanie, jak i posteryzację na kanał.

Obecna aplikacja udostępnia także szerokość obrysu i ustawienia eksperckie. Pozostaw elementy sterujące, których nie potrzebujesz, do czasu uzyskania eksportu linii bazowej. Duży zestaw jednoczesnych zmian sprawia, że ​​trudno stwierdzić, która z nich zmieniła wynik.

**Ilustracja**

![Paleta koncepcyjna, otwarta ramka i obszar roboczy ilustrujące trzy oddzielne kontrole inspekcji SVG](https://perfectvector.com/blog/svgcode-image-tracing/inspection-checklist.webp)

*Paleta, dziury i płótno to osobne kontrole.*

### Co pokazał nasz oryginalny test płaskich kolorów

Zrobiliśmy 512 × 512 PNG z przezroczystym tłem, granatową prostokątną ramką z otworem, złotym prostokątem i zachodzącym na siebie turkusowym prostokątem. Wkleiliśmy ten oryginalny obraz do publicznej aplikacji SVGcode, użyliśmy Color SVG, Pomiń plamki 2 i Szerokość obrysu 0, a następnie skopiowaliśmy dwa rzeczywiste wyniki SVG.

W pierwszym przypadku zastosowano posteryzację obrazu wejściowego z kolorem czerwonym, zielonym i niebieskim w krokach 7 każdy i alfa w kroku 1. W drugim przypadku użyto tego samego obrazu z odznaczoną opcją Posterize Input Image. Sterowanie RGB i alfa zostało wyłączone w tym drugim stanie.

| Sprawdzać                | Oryginalne PNG                  | Posteryzacja włączona                | Posteryzacja wyłączona               |
| ------------------------ | ------------------------------- | ------------------------------------ | ------------------------------------ |
| Jednolite kolory regionu | `#152b46`, `#e6aa3c`, `#3e948d` | Czarny, `#d4aa00`, turkusowy         | `#002a2a`, `#d4aa2a`, `#2a8080`      |
| Otwarcie ramy            | Przezroczysty                   | Otwórz w wyrenderowanym formacie SVG | Otwórz w wyrenderowanym formacie SVG |
| Płótno                   | 512 × 512 pikseli               | `viewBox="0 0 1024 1024"`            | `viewBox="0 0 1024 1024"`            |
| Struktura SVG            | Wejście rastrowe                | Trzy ścieżki, bez osadzonego obrazu  | Trzy ścieżki, bez osadzonego obrazu  |

Wyłączenie posteryzacji **nie** przywróciło dokładnie oryginalne kolory tego obrazu. Obydwa SVG umieściły także grafikę na innym płótnie. Są to obserwacje z jednego kontrolowanego obrazu, a nie punkt odniesienia lub prognoza dla każdego pliku. Są to dobre powody, aby sprawdzić rzeczywisty eksport przed użyciem go jako wzorca koloru lub układu.

## 3. Skopiuj plik SVG i zachowaj rzeczywisty znacznik

Gdy podgląd będzie gotowy, wybierz **Kopiuj SVG**. Poczekaj na zakończenie **Optymalizacji SVG**, zanim przeczytasz lub wkleisz zawartość schowka. W naszym przypadku natychmiastowy odczyt schowka był pusty; przeczytanie go po optymalizacji zwróciło znaczniki SVG.

Wklej znacznik do edytora zwykłego tekstu i zapisz go z rozszerzeniem `.svg`, takim jak `artwork-trace.svg`. Upewnij się, że zawiera element `<svg>` i zamykający `</svg>`, a nie zrzut ekranu lub dokument w formacie sformatowanym. Zachowaj osobną nazwę pliku dla każdego wariantu ustawień, aby późniejszy eksport nie zastąpił Twojego odniesienia.

To jest trasa ze skopiowanymi znacznikami, którą ukończyliśmy. SVGcode wyświetla również opcję Zapisz SVG, ale ten przewodnik nie potwierdza natywnego zachowania okna dialogowego zapisywania plików ani pomyślnego importu do innej aplikacji.

## 4. Sprawdź kolory, otwory i płótno w zapisanym pliku

Otwórz zapisany plik SVG w przeglądarce lub edytorze obok nietkniętego źródła. Sprawdź je osobno:

1. **Paleta:** porównuj ważne wypełnienia z zamierzonymi wartościami kolorów. Ślad może zachować trzy regiony, zmieniając jednocześnie wszystkie trzy kolory. Jeśli wymagane są dokładne kolory, przywróć i zweryfikuj zamierzone wypełnienia w swoim edytorze.
2. **Otwory:** umieść kontrastujące tło za grafiką. Nowe tło powinno prześwitywać przez zamierzone otwory i przestrzeń zewnętrzną. Kształt pomalowany na biało może wyglądać jak otwór na białym tle. [przewodnik dotyczący przezroczystego tła SVG](https://perfectvector.com/pl/blog/transparent-background-svg) pokazuje, jak je rozróżnić.
3. **Płótno:** sprawdź krawędzie dokumentu i grafiki. **viewBox** definiuje wewnętrzny prostokąt współrzędnych SVG; nie jest to obietnica wymiarów fizycznych. Sprawdź marginesy i rozmiar w aplikacji, w której będziesz używać pliku.
4. **Geometria:** wybierz indywidualnie ważne obszary i spróbuj ponownie pokolorować lub przesunąć, a następnie cofnij. Plik zawierający ścieżki nadal wymaga sprawdzenia możliwości edycji dla zamierzonego zadania.

SVG może reprezentować otwór z kilkoma konturami w ramach jednej ścieżki złożonej; [standard ścieżki SVG](https://www.w3.org/TR/SVG2/paths.html) opisuje ścieżki podrzędne i dziury. Nie potrzebujesz osobnego elementu ścieżki dla każdej widocznej granicy. I odwrotnie, sama mała liczba ścieżek nie dowodzi, że wszystkie zamierzone szczegóły przetrwały.

Nasza kontrola ukończenia była cyfrowa: sprawdź skopiowane znaczniki i wyrenderuj rzeczywiste pliki SVG. W obu wariantach otwór i przestrzeń zewnętrzna były przezroczyste. Nie testowano żadnych wyników importu, drukowania ani cięcia w edytorze docelowym. Aby uzyskać szerszą ocenę przekazania, użyj [karty wyników jakości śledzenia wektorowego](https://perfectvector.com/pl/blog/evaluate-vector-trace-quality).

## Odzyskaj po pierwszym nieudanym sprawdzeniu

| Co widzisz                          | Co dalej sprawdzić                                                                                                         |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Pozostają przypadkowe kropki        | Ostrożnie zwiększ opcję Suppress Speckles, a następnie ponownie sprawdź celowo małe części.                                |
| Mała funkcja znika                  | Porównaj źródło i niższe ustawienie plamki przed wypróbowaniem niepowiązanych elementów sterujących.                       |
| Kolory się różnią                   | Porównaj wyeksportowane wypełnienia ze swoją paletą; nie zakładaj, że wyłączenie posteryzacji przywraca dokładne wartości. |
| Dziura wygląda na wypełnioną        | Przetestuj na kontrastowym tle, a następnie sprawdź, czy istnieje wewnętrzny kontur.                                       |
| Grafika ma nieoczekiwane marginesy  | Porównaj granice płótna i grafiki; ustaw wymagany rozmiar dokumentu w aplikacji docelowej.                                 |
| Kopiuj SVG nie daje nic użytecznego | Poczekaj na optymalizację, skopiuj ponownie i sprawdź wklejony tekst przed zapisaniem.                                     |
| Wklej obraz jest niedostępny        | Sprawdź uprawnienia schowka i inne widoczne opcje ładowania obrazów w aplikacji w przeglądarce.                            |

Jeśli otwór pozostaje nieprawidłowy, [Przewodnik rozwiązywania problemów z otworami SVG](https://perfectvector.com/pl/blog/svg-holes-fill-in) oddziela brakującą geometrię śledzenia od interpretacji reguły wypełnienia. Aby zapoznać się z procedurą śledzenia pulpitu za pomocą narzędzi do bezpośredniego czyszczenia, zobacz [Mapa bitowa śledzenia Inkscape](https://perfectvector.com/pl/blog/inkscape-trace-bitmap).

Zachowaj oryginalny obraz i zaakceptowany plik SVG razem. Zapisz wszelkie korekty palety lub dostosowania płótna, których będzie potrzebować następna osoba. Jeśli chcesz wypróbować istniejącą grafikę w innej przeglądarce, [zacznij bezpłatnie od PerfectVector](https://perfectvector.com/pl/image-to-vector) i sprawdź sylwetkę i otwory podglądu.

## Często zadawane pytania

**Czy SVGcode może prześledzić plik PNG w rzeczywistych ścieżkach SVG?**

Tak. Nasz oryginalny plik PNG w płaskim kolorze utworzył skopiowany znacznik SVG zawierający trzy ścieżki i bez osadzonego obrazu. Sprawdź swój własny wyeksportowany plik; wynik ten nie gwarantuje tej samej struktury i wierności dla każdego obrazu.

**Czy wyłączenie posteryzacji zachowuje oryginalne kolory?**

W naszym kontrolowanym teście tak się nie stało. Obydwa ustawienia zmieniły oryginalne wartości jednolitego koloru. Porównaj wyeksportowane wypełnienia z zamierzoną paletą i popraw je, gdy liczy się dokładny kolor.

**Dlaczego rozmiar obszaru roboczego SVG różni się od mojego rozmiaru PNG?**

Skopiowany plik SVG w naszym teście korzystał z widoku 1024 × 1024 viewBox z wejścia 512 × 512. Sprawdź osobno wyeksportowane płótno, granice grafiki i zamierzony rozmiar wyświetlania, zamiast zakładać, że źródłowe wymiary w pikselach zostaną zachowane.

**Po czym poznam, że otwór jest przezroczysty?**

Umieść kontrastowe tło za zapisanym plikiem SVG. Powinno być widoczne przez otwór. Jeśli tak nie jest, sprawdź, czy ślad utracił wewnętrzny kontur lub utworzył tam namalowany kształt.

## Źródła

1. [Aplikacja SVGcode](https://svgco.de/) — interfejs śledzenia obrazu i bieżące elementy sterujące.
2. [SVGcode przewodnik autora na web.dev](https://web.dev/case-studies/svgcode?hl=en) — śledzenie kolor po kolorze, eliminacja plamek i posteryzacja.
3. [Oficjalne repozytorium SVGcode](https://github.com/tomayac/SVGcode) — realizacja projektu i dokumentacja źródłowa.
4. [Ścieżki W3C SVG](https://www.w3.org/TR/SVG2/paths.html) — ścieżki złożone, podścieżki i otwory.

## Explore

- [Read the HTML article](https://perfectvector.com/pl/blog/svgcode-image-tracing)
- [Potrace: PNG do SVG z obsługą alfy i zachowaniem otworów](https://perfectvector.com/pl/blog/potrace-png-to-svg.md)
- [Najlepsze narzędzia AI do wektoryzacji 2026: wybór według zastosowania](https://perfectvector.com/pl/blog/best-ai-vectorizers-2026.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)