Wektoryzacja obrazu w Boxy SVG: śledzić kontury czy importować ścieżki?
Boxy SVG ma generator Vectorize. Wybierz śledzenie konturów, stylizację geometryczną lub import SVG, a potem sprawdź edytowalne obszary i otwory, zanim użyjesz grafiki.
Na tej stronie
Boxy SVG potrafi wektoryzować obraz przez śledzenie konturów za pomocą generatora Vectorize. Jego twórca potwierdził, że śledzenie konturów obrazu pojawiło się w wersji 3.35.0, wraz z generatorami Pixelate, Triangulate i Primitivize. Starsze porady, które przedstawiają ręczne obrysowywanie jako jedyną możliwość, nie uwzględniają tej nowej funkcji.
W przypadku logo lub ilustracji, której kolory chcesz zmieniać, zacznij od śledzenia konturów. Jeśli zależy Ci na celowo geometrycznej interpretacji, wypróbuj pozostałe generatory. Jeśli masz już przydatny plik SVG z innego narzędzia do śledzenia konturów, zaimportuj tę grafikę do Boxy SVG i edytuj ją, zamiast ponownie ją wektoryzować.
Wybór zależy od kształtów, których będziesz później potrzebować. Kubek zbudowany z wielu kolorowych kafelków może być grafiką wektorową, a mimo to trudno będzie go edytować jako jeden kubek z osobnym uchem. Zanim ocenisz wynik, zdecyduj, co chcesz zaznaczać, którym elementom zmieniać kolor i które kształty modyfikować.
Wybierz geometrię, z którą chcesz pracować
Vectorize i pozostałe generatory mają wspólny ogólny cel: przekształcanie informacji rastrowych w grafikę wektorową. Służą jednak różnym efektom wizualnym. W omówieniu Triangulate i Primitivize twórca opisuje przybliżanie obrazu za pomocą figur geometrycznych, w tym możliwość wyboru trójkątów lub prostokątów w Primitivize.
Kieruj się tym rozróżnieniem, wybierając punkt wyjścia:
| Twój cel | Sposób rozpoczęcia | Co sprawdzić przed zaakceptowaniem wyniku |
|---|---|---|
| Zachować rozpoznawalny emblemat jako edytowalne kontury | Vectorize | Ważne zarysy i puste przestrzenie zostały zachowane |
| Stworzyć geometryczną reinterpretację | Wypróbuj Pixelate, Triangulate lub Primitivize | Stylizacja jest zamierzona, a geometria nadaje się do późniejszych zmian |
| Dopracować wynik śledzenia konturów wykonanego już w innym narzędziu | Otwórz SVG w Boxy SVG | Widoczna grafika zawiera użyteczne obiekty wektorowe |
| Odtworzyć prosty znak z pełną kontrolą nad krzywymi | Narysuj go ręcznie | Konstrukcja odpowiada zamierzonemu projektowi |
Żaden z tych sposobów nie odtwarza automatycznie struktury obiektów utworzonej przez autora oryginalnego projektu. Narzędzie do śledzenia konturów widzi gotowy obraz. Nie wie, że traktujesz kubek, ucho i refleks jako trzy osobne, nazwane elementy projektu.
Wyobraź sobie ilustrację dla herbaciarni, która ma trafić zarówno na duży plakat, jak i do menu jako mała ikona. Wielokątne powierzchnie mogą pasować do plakatu. Ikona może potrzebować prostszego zarysu z otworem w uchu widocznym na pierwszy rzut oka. To różne wymagania projektowe, nawet jeśli oba materiały są w formacie SVG.

Wypróbuj wbudowane śledzenie konturów, zachowując obraz źródłowy
Zachowaj oryginalny obraz i utwórz osobny dokument roboczy do śledzenia konturów. Zanim przetworzysz cały zestaw, zacznij od jednego reprezentatywnego obrazu, na przykład ikony kubka.
Znajdź Vectorize wśród generatorów dostępnych w Twojej edycji Boxy SVG. Użyj go do pierwszej próby śledzenia konturów, a następnie obejrzyj wygenerowaną grafikę niezależnie od obrazu źródłowego. Jeśli oba zajmują to samo miejsce, przesuń wynik na bok lub ukryj źródło na czas sprawdzania. W przeciwnym razie pozostawiona bitmapa może maskować brakujący fragment wyniku wektorowego.
Zmieniaj po jednym dostępnym ustawieniu śledzenia konturów i po każdej próbie porównuj ten sam drobny szczegół. W przypadku kubka obserwuj otwór w uchu i połączenie ucha z kubkiem. Zachowaj wersję, która utrzymuje te cechy, zanim zaczniesz eksperymentować z prostszym wynikiem. Nie da się obiecać jednego użytecznego, uniwersalnego ustawienia dla każdego obrazu źródłowego.
Jeśli w Twojej instalacji nie ma Vectorize, sprawdź swoją edycję i wersję w informacjach pomocy technicznej Boxy SVG. Brak tego narzędzia nie dowodzi, że Boxy SVG nigdy nie obsługiwał śledzenia konturów obrazów. Możesz też użyć zewnętrznego narzędzia do śledzenia konturów i kontynuować edycję SVG w Boxy SVG.
Sprawdź otwór w uchu, zanim uprościsz ścieżki
Ucho kubka dobrze nadaje się do testu, ponieważ jego pusta przestrzeń jest częścią tego, co czyni go rozpoznawalnym. Umieść za wynikiem kontrastowe tło. Jeśli jego kolor prześwituje przez otwór, sprawdź, czy zamierzony pusty obszar został zachowany. Jeśli otwór pozostaje biały, może znajdować się w nim biały obiekt zasłaniający tło.
To coś więcej niż wybór koloru. W SVG reguła wypełnienia określa, które obszary ścieżki uznaje się za jej wnętrze, uwzględniając także relacje między podścieżkami. Zmiana konstrukcji ścieżki może więc zmienić otwór. Przed łączeniem lub upraszczaniem kształtów utwórz kopię i pracuj na niej, a potem ponownie sprawdź otwór.
W przykładzie z kubkiem wykonaj te czynności w podanej kolejności:
- Obejrzyj wynik bez obrazu rastrowego w tle. Upewnij się, że kubek i ucho nadal wyglądają na kompletne.
- Sprawdź ucho na kontrastowym tle. Przyjrzyj się też wąskim szczelinom między elementami dekoracyjnymi.
- Zaznacz kolorowy obszar kubka i spróbuj tymczasowo zmienić jego wypełnienie. Zwróć uwagę, czy zmiana obejmuje jeden użyteczny obszar, czy wiele drobnych fragmentów.
- Obejrzyj zewnętrzny kontur za pomocą narzędzi do edycji ścieżek. Zmień niewielki fragment, a potem cofnij zmianę, aby upewnić się, że pracujesz z właściwą geometrią.
- Zmniejsz grafikę do rozmiaru ikony w menu. Oceń, czy ucho pozostaje czytelne i czy drobne wielokątne powierzchnie wnoszą coś użytecznego.
Złożony wynik może nadawać się na plakat, a jednocześnie wymagać osobnej, uproszczonej wersji do menu. Szczegółowe wskazówki dotyczące porządkowania grafiki znajdziesz w artykułach jak edytować SVG i co zrobić ze zbyt dużą liczbą węzłów w SVG.
Zaimportuj wynik z osobnego narzędzia do śledzenia konturów, jeśli pasuje to do zadania
PerfectVector to jedna z możliwości, gdy chcesz osobno przeprowadzić śledzenie konturów, a Boxy SVG wykorzystać do końcowych poprawek. Przekształć obraz źródłowy w SVG, a następnie otwórz pobraną grafikę w Boxy SVG i sprawdź kontur kubka, otwór w uchu oraz obszary, którym można zmieniać kolor. Dzięki temu możesz niezależnie wybrać sposób śledzenia konturów i edytor, w którym wolisz układać oraz dopracowywać projekt.
W opisie Boxy SVG w Google Play przygotowanym przez twórcę wymieniono edycję geometrii, operacje na ścieżkach, zapisywanie w SVG/SVGZ i inspektor kodu SVG/CSS. To przydatne narzędzia do końcowych poprawek, niezależnie od tego, czy ścieżki powstały dzięki wbudowanemu śledzeniu konturów, zewnętrznej konwersji, czy ręcznemu rysowaniu.
Sprawdź zaimportowaną grafikę, zamiast ufać jej rozszerzeniu. Element image w SVG może odwoływać się do pliku PNG lub JPEG, więc SVG nadal może zawierać treść rastrową. Jeśli kubek pozostaje obiektem obrazu, otwarcie go w edytorze grafiki wektorowej nie przekształciło go w kontury. Nasz poradnik o plikach SVG zawierających obrazy rastrowe wyjaśnia, jak rozpoznawać grafikę łączącą oba rodzaje zawartości.
Jeśli porównujesz różne sposoby śledzenia konturów, używaj tego samego obrazu źródłowego i tych samych kryteriów oceny wyniku. Oceń, czy wynik pozwala wykonać zamierzoną zmianę, zamiast automatycznie wybierać plik o najmniejszym rozmiarze lub najmniejszej liczbie obiektów.
Kiedy lepszy jest ręczny rysunek lub obraz rastrowy
Prostą ikonę kubka może być łatwiej odtworzyć z kilku kształtów, nad którymi masz pełną kontrolę, niż poprawiać po śledzeniu konturów. Ręczne konstruowanie pozwala zdecydować, jak ucho łączy się z kubkiem i jak refleks zachowuje się przy zmianie koloru. Pozwala też uniknąć zachowania przypadkowych nierówności widocznych na małym, skompresowanym obrazie źródłowym.
Fotografia szkliwionego kubka ceramicznego stawia Cię przed innym wyborem. Odbicia, faktura szkliwa i subtelne cieniowanie mogą być istotą zdjęcia. Zachowaj obraz rastrowy, jeśli chcesz utrzymać te szczegóły. Stylizacja geometryczna może być świadomą decyzją artystyczną, ale zmienia to, co plik ma przedstawiać.
FAQ
Czy Boxy SVG ma automatyczne śledzenie konturów obrazów? Tak. Jego twórca opisuje generator Vectorize jako funkcję śledzenia konturów obrazów wprowadzoną w wersji 3.35.0. Jeśli nie możesz jej znaleźć, sprawdź swoją edycję i wersję, zamiast polegać na starszych instrukcjach opisujących wyłącznie ręczne obrysowywanie.
Czy Vectorize i Triangulate to to samo? Służą różnym celom. Zacznij od Vectorize, gdy potrzebujesz konturów uzyskanych przez śledzenie obrazu. Wypróbuj generatory geometryczne, jeśli zamierzonym efektem jest interpretacja złożona z wielokątnych powierzchni lub stylizowana w inny sposób, i sprawdź, czy powstałe fragmenty pozwalają wykonać planowane zmiany.
Czy mogę edytować w Boxy SVG plik SVG utworzony przez inne narzędzie do wektoryzacji? Możesz używać Boxy SVG do pracy z zaimportowaną grafiką wektorową. Najpierw sprawdź plik: SVG zawierający wyłącznie osadzoną bitmapę nie udostępnia edytowalnych konturów tego obrazu.
Dlaczego zniknął otwór w kształcie uzyskanym przez śledzenie konturów? Sprawdź, czy śledzenie konturów zamknęło otwór, czy zasłania go obiekt w kolorze tła albo czy operacja na ścieżce zmieniła sposób wypełniania wnętrza. Zanim zmienisz kolejne ścieżki, porównaj wynik z zapisaną kopią i przetestuj go na kontrastowym tle.
Źródła
- Boxy SVG developer response on the Mac App Store — potwierdzenie twórcy dotyczące Vectorize i pozostałych generatorów w wersji 3.35.0.
- Boxy SVG developer discussion of geometric generators — wyjaśnienie twórcy dotyczące Triangulate i Primitivize, odrębne od opinii innych użytkowników.
- Boxy SVG on Google Play — przygotowany przez twórcę opis edycji, operacji na ścieżkach, zapisywania i inspekcji kodu.
- W3C — SVG 2 fill rules — sposób określania wnętrza ścieżek.
- W3C — SVG 2 embedded content — możliwość odwoływania się do obrazów rastrowych wewnątrz SVG.
Wybierz geometrię, która pozwoli Ci wykonać kolejną zmianę. Jeśli pomocne byłoby osobne śledzenie konturów, wypróbuj własny obraz w PerfectVector, otwórz SVG w Boxy SVG i sprawdź najmniejszy istotny otwór oraz obszar, którego kolor chcesz zmienić.
Więcej z bloga

Alternatywy dla Vectorizer.AI: porównaj koszty i kontrolę
Istnieją darmowe alternatywy dla Vectorizer.AI, a większość recenzji piszą ich twórcy. Oto rzeczywiste kompromisy i sposób na samodzielne sprawdzenie dowolnego konwertera.

Krzywe Béziera w SVG: usuń załamanie bez dodawania węzłów
Napraw połączenie krzywych Béziera trzeciego stopnia w SVG, wyrównując ich uchwyty. Porównaj uchwyty o różnej długości i uchwyty odbite symetrycznie, poznaj polecenie S i zachowaj zamierzone narożniki.