Import SVG do Penpot: dodaj edytowalne kształty do swojego projektu

Aby zaimportować SVG do Penpot, otwórz plik projektu i przeciągnij plik .svg na jego obszar roboczy albo wybierz narzędzie obrazu na pasku narzędzi i wskaż plik. Polecenie Import files na pulpicie służy do importowania plików projektów Penpot. Jeśli chcesz wstawić ikonę, zacznij od otwarcia projektu. Wskazówki Penpot dotyczące wstawiania warstw i dokumentacja importowania projektów opisują te dwie odrębne metody.

Gdy grafika się pojawi, sprawdź, czy możesz zmienić kolor jednego obszaru i edytować jeden kontur. Ikona może wyglądać poprawnie, a mimo to być niewygodna w edycji. Jeśli źródło jest już grafiką wektorową, w razie potrzeby napraw je lub wyeksportuj ponownie. Wektoryzuj PNG lub JPG tylko wtedy, gdy potrzebujesz odtworzyć kształty z pikseli.

Sprawdź import, zanim ponownie wykorzystasz grafikę

Zachowaj oryginalny SVG, zaimportuj jedną reprezentatywną ikonę i pracuj na duplikacie. Sprawdź wygląd, jedno wypełnienie, jedną krzywą i ewentualny edytowalny tekst. Wyeksportuj osobny SVG i porównaj go z oryginałem, zanim powtórzysz te czynności dla całego zestawu.

Zacznij od obszaru roboczego, a potem sprawdź warstwy

Otwórz plik Penpot, do którego ma trafić grafika. Wstaw zapisany SVG w pustym miejscu, aby móc obejrzeć go z dala od reszty projektu. Jeśli przeciąganie nie działa, skorzystaj z okna wyboru pliku w narzędziu obrazu, aby sprawdzić import bez korzystania z mechanizmu przeciągania i upuszczania.

Zaznacz zaimportowaną grafikę i rozwiń jej pozycję w panelu Layers. Grupa pomaga w organizacji, ale nie świadczy o tym, że SVG stał się bitmapą. Możesz zaznaczyć element podrzędny w panelu lub wejść do grupy dwukrotnym kliknięciem; Penpot obsługuje też zaznaczanie zagnieżdżonych elementów przez kliknięcie z wciśniętym klawiszem Ctrl lub Command. Te sposoby opisano w przewodniku po zaznaczaniu warstw.

Różne elementy SVG mogą stać się różnymi typami obiektów. W opublikowanej wersji importera Penpot typowe kształty, takie jak ścieżki, prostokąty i elipsy, mają procedury obsługi przekształcające je w natywne kształty; inne elementy mogą pozostać surową zawartością SVG. Importer obsługuje również osobno elementy obrazu. Dlatego sama nazwa pliku nie pozwala ustalić, jak będzie można edytować każdą jego część. Zobacz importer kształtów SVG.

Nie rozgrupowuj ani nie spłaszczaj wszystkiego od razu. Najpierw znajdź część, którą chcesz zmienić. Zachowaj grupę, jeśli jej elementy podrzędne już dają Ci potrzebną kontrolę.

Sprawdź jedno wypełnienie i jedną krzywą

Użyj małej ikony z wyraźnie oddzielonymi częściami. Dobrym przykładem jest roślina w doniczce: zmiana koloru doniczki nie powinna wpływać na liście, a edycja jednego liścia nie powinna zniekształcać całej rośliny.

Na duplikacie zaimportowanej ikony:

1. Zaznacz warstwę doniczki i zmień jej wypełnienie na kontrastowy kolor. Sprawdź, czy zmienia się tylko zamierzony obszar.
2. Zaznacz ścieżkę jednego liścia. Naciśnij Enter, aby edytować jej węzły, przesuń nieznacznie jeden punkt, a następnie cofnij zmianę. Penpot opisuje to w instrukcji edycji węzłów.
3. Porównaj duplikat z niezmienioną zaimportowaną grafiką. Upewnij się, że po cofnięciu testowej zmiany oryginalna sylwetka, drobne odstępy i grubość obrysu pozostają nienaruszone.

Jeśli doniczka i liście zmieniają się razem, sprawdź zaznaczenie i strukturę źródła. Być może masz zaznaczoną zewnętrzną grupę albo w źródle kilka obszarów połączono w jedną ścieżkę. Udana zmiana koloru nie dowodzi, że każdy kontur jest osobną natywną ścieżką.

Inną możliwością jest surowa zawartość SVG. Penpot ma dla niej osobny panel opcji, obejmujący ustawienia wyglądu obsługiwanych elementów. Obecność ustawień wypełnienia lub obrysu nie gwarantuje więc standardowej edycji węzłów. Jeśli danej części nie możesz edytować zgodnie z potrzebami, uprość ją lub narysuj ponownie w edytorze źródłowym i zaimportuj nową kopię. To rozróżnienie widać w implementacji opcji surowego SVG w Penpot.

Rozpoznaj objaw, zanim zmienisz plik

Użyj niezmienionego SVG jako punktu odniesienia. Otwórz go w przeglądarce i porównaj sposób jego wyświetlania z grafiką zaimportowaną do Penpot. Jeśli już w przeglądarce wygląda nieprawidłowo, wróć do eksportu ze źródła, zanim spróbujesz naprawić kopię w Penpot.

Brakujące obrysy i niewidoczna grafika

Zanim usuniesz zaznaczoną warstwę, sprawdź jej ustawienia wypełnienia i obrysu. Penpot udostępnia ustawienia koloru, krycia, szerokości, stylu i widoczności obrysu, a także ustawienia zakończeń otwartych ścieżek. Krótki element z obrysem może wyglądać zupełnie inaczej z innym zakończeniem, więc porównaj kształt, zamiast zakładać, że linia zniknęła. Dostępne ustawienia opisano w Color and Strokes.

W przypadku niewidocznego obiektu sprawdź również ukryte warstwy i przycinanie. Jeśli przeglądarka wyświetla źródło poprawnie, a Penpot nie, wyodrębnij problematyczny element w kopii źródła. Wyeksportuj ponownie tę uproszczoną próbkę i jeszcze raz porównaj. Dzięki temu będziesz mieć konkretny plik i objaw do zbadania, zamiast zmieniać kilka ustawień naraz.

Nie usuwaj wszystkich elementów style, masek ani definicji tylko dlatego, że sugeruje to starsze obejście problemu. Te elementy mogą zawierać informacje o wyglądzie. Jeśli problem wynika ze sposobu utworzenia obrysu w źródle, skorzystaj z dokładniejszego przewodnika po diagnozowaniu brakujących obrysów SVG i zachowaj edytowalny plik główny, zanim zamienisz obrysy na kontury.

Tekst, który wygląda poprawnie, ale nie daje się edytować

W przypadku etykiety przycisku spróbuj zmienić jedno słowo. W przypadku logo zdecyduj, czy wystarczy zachować kształty liter. To różne wymagania.

Zaimportowane litery mogą już być konturami albo pozostać zawartością SVG zamiast natywną warstwą tekstową. Nie zakładaj, że każdy zaimportowany element tekstowy SVG staje się edytowalnym tekstem w Penpot. Jeśli treść wymaga regularnych zmian, odtwórz ją za pomocą narzędzia tekstowego Penpot, wybierz docelowy font i porównaj odstępy oraz podział na wiersze. Przewodnik Penpot po tekście wyjaśnia tworzenie warstw tekstowych i edycję ich treści.

Gdy litery zmieniają kształt lub tekst inaczej przechodzi do kolejnego wiersza, skorzystaj z przewodnika po rozwiązywaniu problemów z fontami w SVG. Zachowaj kopię z edytowalnym tekstem, nawet jeśli wersja do przekazania wymaga liter zamienionych na kontury.

Kiedy włączyć PerfectVector do pracy

PerfectVector przydaje się, gdy masz rastrową ikonę lub ilustrację i potrzebujesz edytowalnych konturów w Penpot. Przekształć PNG lub JPG w ścieżki SVG, sprawdź sylwetkę i obszary kolorów, a następnie zaimportuj wynik i wykonaj test jednego wypełnienia oraz jednej krzywej. Wynik wektoryzacji nadal trzeba ocenić w odniesieniu do grafiki, której chcesz użyć.

Obraz rastrowy umieszczony wewnątrz SVG nie zyskuje edytowalnych konturów liści czy doniczki tylko dlatego, że zmienił się jego kontener. Importer Penpot ma osobną procedurę obsługi obrazów; nie przekształca takiego obrazu w natywne obiekty ścieżek obsługiwane w innym miejscu kodu importera.

Jeśli masz oryginalny eksport wektorowy, użyj go. W przypadku prostego symbolu interfejsu narysowanie go za pomocą natywnych kształtów Penpot może dać Ci bardziej przemyślaną geometrię niż wektoryzacja. Zachowaj fotografie i grafiki z dużą ilością tekstur jako obrazy, jeśli ich piksele są częścią projektu. Wyjaśnienie wektoryzacji obrazów opisuje, co można odtworzyć dzięki wektoryzacji, a co ona zmienia.

Wyeksportuj jedną próbkę, zanim zbudujesz zestaw

Zachowaj projekt roboczy w Penpot i wyeksportuj osobny SVG do przekazania. Zaznacz ikonę lub planszę, na której się znajduje, dodaj ustawienie eksportu przyciskiem plus w sekcji Export panelu Design i wybierz SVG. Penpot opisuje to w Exporting layers.

Otwórz wyeksportowany plik w przeglądarce. Porównaj jego kolory, obrysy, wygląd tekstu, kadrowanie i puste przestrzenie z plikiem referencyjnym. Jeśli plik ma wrócić do edytora projektowego, zaimportuj ten eksport w osobnym miejscu i powtórz test edycji. Zarówno poprawny wygląd, jak i struktura wygodna do edycji wymagają sprawdzenia.

Zanim dodasz próbkę do większego zestawu, upewnij się, że:

• Obszary, które wymagają osobnych kolorów, można zaznaczać niezależnie.
• Kontury, których kształt chcesz zmieniać, udostępniają przydatne narzędzia edycji.
• Edytowalne etykiety pozostają tekstem w projekcie roboczym.
• Wyeksportowana ikona ma zamierzone granice i odstępy od krawędzi.
• Ikona pozostaje czytelna w rzeczywistym rozmiarze, w jakim będzie używana w interfejsie.

Następnie przeprowadź te same kontrole dla całego zestawu. Proces przekształcania ikon PNG w SVG do zestawu elementów interfejsu wprowadza wspólne siatki, optyczne dopasowanie rozmiarów i zasady nazewnictwa, gdy poszczególne importy są już poprawne.

FAQ

Dlaczego okno Import files w Penpot odrzuca mój SVG? To okno importuje pliki projektów Penpot. Aby wstawić grafikę SVG, otwórz plik projektu i użyj narzędzia obrazu lub przeciągnij SVG na obszar roboczy.

Czy import SVG sprawia, że każdą jego część można edytować? Typowe kształty wektorowe mogą stać się natywnymi obiektami Penpot, ale inne elementy mogą pozostać surową zawartością SVG lub obrazami. Zanim ponownie wykorzystasz grafikę, sprawdź konkretną zmianę wypełnienia, krzywej lub tekstu, której potrzebujesz.

Czy muszę rozgrupować zaimportowany SVG? Tylko jeśli zmiana struktury grupy ułatwi Ci zadanie. Najpierw spróbuj zaznaczyć element podrzędny w panelu Layers. Zachowanie przydatnej grupy nie uniemożliwia edycji jej elementów podrzędnych, które można zaznaczyć.

Czy warto zwektoryzować SVG, który importuje się nieprawidłowo? Zacznij od naprawy lub ponownego eksportu istniejącej grafiki wektorowej. Wektoryzacja przydaje się, gdy dostępna grafika jest rastrowa, a potrzebujesz ścieżek; nie jest uniwersalnym sposobem naprawy istniejącego SVG.

Źródła

1. Penpot: Layers — Wstawianie grafiki, zaznaczanie elementów podrzędnych i edycja węzłów ścieżek.
2. Penpot: Export and import Penpot files — Metoda importowania natywnych projektów, odrębna od wstawiania grafiki na obszar roboczy.
3. Penpot: SVG shape importer — Osobna obsługa natywnych kształtów, obrazów i surowej zawartości SVG w opublikowanej wersji.
4. Penpot: Raw SVG options — Same ustawienia wyglądu nie potwierdzają możliwości edycji natywnych ścieżek.
5. Penpot: Color and Strokes — Ustawienia wypełnienia, obrysu i jego zakończeń używane podczas diagnostyki.
6. Penpot: Text and Typography — Tworzenie natywnych warstw tekstowych i edycja ich treści.
7. Penpot: Exporting layers — Dodawanie ustawienia eksportu SVG dla warstwy lub planszy.

---

Jeśli Twoim źródłem jest PNG lub JPG i potrzebujesz edytowalnych kształtów, przygotuj SVG za pomocą PerfectVector. Zaimportuj go do Penpot, zmień jedno wypełnienie i przetestuj jedną krzywą, zanim włączysz grafikę do swojego zestawu projektowego.