Import SVG do Excalidraw: co staje się edytowalne?

Przeciągnięcie pliku SVG do Excalidraw może dać Ci ostry obraz, którego rozmiar możesz zmieniać, bez możliwości edytowania poszczególnych ścieżek. Jeśli chcesz zmienić kolor lub przesunąć jakąś część, potrzebujesz sceny Excalidraw złożonej z natywnych elementów. Konwerter SVG do Excalidraw może utworzyć takie elementy, ale wynik nadal wymaga sprawdzenia wyglądu. Dyskusja Excalidraw o imporcie SVG opisuje dokładnie ten problem: pojedynczy obiekt a edytowalne części.

Przetestowaliśmy małą dwukolorową ikonę z przezroczystym otworem. Konwerter w ustalonej wersji utworzył trzy elementy Excalidraw, które można było zaznaczać, ale wypełnił otwór, który w SVG był przezroczysty. To przydatne przypomnienie: możliwość edycji i wierność odwzorowania trzeba sprawdzać osobno.

Trzy rzeczy, które może oznaczać „SVG w Excalidraw”

Trzeci przypadek działa w przeciwnym kierunku. Narzędzie może umieścić dane źródłowe Excalidraw w eksportowanym SVG, aby można było ponownie otworzyć do edycji rysunek utworzony w tym narzędziu. Na przykład rozszerzenie Excalidraw do VS Code opisuje w dokumentacji pliki .excalidraw.svg z osadzonymi danymi sceny. Nie oznacza to, że dowolna ilustracja SVG już zawiera kształty Excalidraw.

Jeśli nie możesz rozgrupować zaimportowanej grafiki, najpierw ustal strukturę zaznaczonego obiektu. Nasz poradnik rozgrupowywania SVG rozróżnia obiekty typu obraz, ścieżki złożone i rzeczywiste grupy; w Excalidraw oprócz struktury pliku źródłowego trzeba też uwzględnić własny format sceny tego narzędzia.

Jeśli potrzebujesz jedynie edytować ścieżki SVG, wykonaj opisane w poradniku Boxy SVG kroki pozwalające sprawdzić, czy potrzebne jest trasowanie, czy import i zachowaj główny plik SVG. Konwertuj do sceny Excalidraw wtedy, gdy potrzebujesz natywnych elementów sceny.

Mały test konwersji: kształty przetrwały, otwór nie

Naszym źródłem był ręcznie napisany plik SVG: jeden turkusowy pierścień utworzony ze ścieżki złożonej z regułą wypełnienia even-odd oraz złote koło. Środek pierścienia był w oryginale rzeczywiście przezroczysty, a nie zamalowany na biało. Przekonwertowaliśmy go za pomocą oficjalnego repozytorium svg-to-excalidraw, używając pakietu npm w wersji 0.0.2, zapisaliśmy zwróconą scenę jako plik .excalidraw, otworzyliśmy ten plik w Excalidraw i wyeksportowaliśmy PNG z przezroczystością do porównania.

Oryginalny plik źródłowy a przekonwertowana scena

Konwersja nie zgłosiła błędów i utworzyła trzy natywne elementy: dwa turkusowe elementy typu draw i jedną złotą elipsę. Złoty akcent można było zaznaczyć oddzielnie. Przezroczysty środek nie przeszedł jednak kontroli wyglądu. W oryginalnym renderze piksel w jego środku był przezroczysty; w pliku PNG z przezroczystością wyeksportowanym z Excalidraw odpowiadający mu piksel był nieprzezroczysty i turkusowy. Odpowiedź konwertera bez błędów nie gwarantowała zgodnego wyglądu obrazu.

To pojedynczy test o celowo ograniczonym zakresie, a nie twierdzenie dotyczące każdego SVG czy każdej metody konwersji. Osobny eksperyment SVG Chop również traktuje złożone struktury SVG jako wyzwanie dla konwersji. Szybkie sprawdzenie liczby obiektów nie wystarczy. Otwory, maski, przycinanie, gradienty, tekst i zagnieżdżone grupy wymagają osobnych testów, jeśli wykorzystujesz je w swoim projekcie.

Jak sprawdzić własny SVG

1. Zachowaj oryginalny SVG. Zapisz kopię przed importem lub konwersją. Sprawdź, czy obszar, który chcesz zmienić, jest już oddzielną ścieżką lub kształtem. Pojedyncza ścieżka złożona może mieć otwór, mimo że nie składa się z części, które można zaznaczać oddzielnie.
2. Ustal, co oznacza „edytowalny” w przypadku tego rysunku. Jeśli potrzebujesz tylko skalować ilustrację i zmieniać jej położenie, obraz może wystarczyć. Jeśli chcesz przesuwać jakąś część lub zmieniać jej kolor, ta część musi istnieć jako natywny element sceny.
3. Wypróbuj konwersję na kopii. Projekt SVG-to-Excalidraw o otwartym kodzie źródłowym przekształca geometrię SVG w zawartość sceny Excalidraw. Sprawdź aktualny sposób konfiguracji i zanotuj używaną wersję pakietu. Zaimportuj lub otwórz wynikową scenę, zamiast zakładać, że zwykłe umieszczenie obrazu udostępni jego ścieżki.
4. Policz i zaznacz poszczególne części. Czy możesz zaznaczyć akcent bez głównej części? Czy możesz zmienić jego kolor, pozostawiając drugi kolor bez zmian? Ponownie otwórz zapisaną scenę i powtórz edycję.
5. Porównaj wygląd, nie tylko obiekty. Umieść oryginał i eksport z Excalidraw na kontrastujących tłach. Sprawdź otwory, nakładające się części, krawędzie, tekst i wszystkie efekty, na których Ci zależy. Nasz test przeszedłby kontrolę „trzech elementów”, ale na tym etapie wykazałby błąd.

Jeśli konwersja dzieli część, która miała stanowić jedną całość, na wiele elementów typu draw, grupowanie może ułatwić jej przesuwanie, ale nie przywróci oryginalnej struktury ścieżki. Jeśli otwór znika, popraw plik źródłowy lub użyj innego edytora do tej grafiki. Zachowaj edytowalny plik główny w edytorze grafiki wektorowej, gdy Excalidraw nie potrafi zachować potrzebnej Ci cechy.

Gdzie przydaje się PerfectVector

PerfectVector pomaga na wcześniejszym etapie pracy tylko wtedy, gdy źródłem jest grafika rastrowa, na przykład płaska ikona PNG, która nie ma jeszcze ścieżek SVG. Przekonwertuj clipart na SVG, sprawdź, czy zachowały się kolorowe obszary i puste przestrzenie, a następnie uporządkuj geometrię przed próbą konwersji do Excalidraw. Poradnik przygotowania małych ikon omawia czytelność i spójność materiałów źródłowych. Sama wektoryzacja nie może zamienić obrazu umieszczonego w Excalidraw w natywne elementy sceny, a plik SVG utworzony przez trasowanie nadal wymaga opisanej wyżej kontroli w aplikacji docelowej.

Jeśli SVG zawiera już odpowiednie kształty wektorowe, pomiń ponowne trasowanie. Zamiast tego porównaj oryginał z przekonwertowaną sceną. Powiązany poradnik tworzenia niestandardowych kształtów SVG w draw.io podobnie rozróżnia obraz i natywny kształt w innym edytorze diagramów.

Często zadawane pytania

Czy mogę rozgrupować umieszczony obraz SVG na kształty Excalidraw? Zaznaczenie całego obrazu nie udostępnia oryginalnych części SVG jako natywnych elementów Excalidraw. Jeśli potrzebujesz oddzielnych kształtów sceny, skorzystaj z konwersji, a następnie sprawdź wynik.

Czy konwersja SVG do Excalidraw zachowuje każdy otwór? Nie zakładaj, że tak jest. W naszym teście wersji 0.0.2 pierścień z regułą even-odd stał się edytowalnymi elementami typu draw, ale jego przezroczysty środek został wypełniony. Porównaj własny plik źródłowy z zapisaną sceną, zwłaszcza tam, gdzie pusta przestrzeń ma znaczenie.

Czy należy zwektoryzować SVG przed importem? Nie. Jeśli SVG zawiera już potrzebne Ci kształty, sprawdź jego strukturę i konwersję do Excalidraw. Wektoryzacja ma zastosowanie wtedy, gdy obraz źródłowy jest obrazem rastrowym, na przykład w formacie PNG lub JPG.

Źródła

1. Excalidraw discussion #6082 — Pytanie użytkownika o zaimportowany SVG, który zachowuje się jak jeden blok zamiast edytowalnych części.
2. Excalidraw — svg-to-excalidraw — Oficjalne narzędzie do konwersji o otwartym kodzie źródłowym, użyte w teście oryginalnej ikony z ustaloną wersją pakietu.
3. Excalidraw Editor extension for VS Code — Dokumentacja plików scen Excalidraw oraz eksportów SVG/PNG z osadzonymi danymi sceny.
4. Minixcali — SVG Chop — Niezależny eksperyment polegający na konwersji części SVG na elementy Excalidraw, z zastrzeżeniami dotyczącymi geometrii.

Jeśli zaczynasz od ikony PNG, przygotuj wstępny plik SVG za pomocą PerfectVector, sprawdź jego oddzielne obszary i otwory, a następnie przetestuj zapisaną scenę Excalidraw, zanim użyjesz jej w rysunku.