Własne kształty SVG w draw.io: obrazy czy szablony kształtów?

Jeśli chcesz użyć własnego kształtu SVG w draw.io, ustal, co musisz zmieniać po jego wstawieniu. Osadzony obraz SVG przyda się, gdy zależy Ci na wyglądzie grafiki. Natywny szablon XML pozwala zdefiniować geometrię diagramu, style i konkretne punkty połączeń. Własna biblioteka może przechowywać oba rodzaje elementów do ponownego użycia.

Te opcje rozwiązują różne problemy. Samo zapisanie SVG w bibliotece nie przekształca jego ścieżek w natywny kształt diagramu. Dokumentacja własnych kształtów draw.io rozróżnia osadzone obrazy i kształty zdefiniowane w jego formacie XML.

Jeśli zapisujesz diagramy w Mermaid, skorzystaj z procedury tworzenia własnego pakietu ikon SVG, aby zarejestrować grafikę, zachowując etykiety i łączniki w kodzie źródłowym diagramu.

Wybierz sposób działania przed konwersją grafiki

Wyobraź sobie niewielki symbol urządzenia: prostokątną obudowę z jednym okrągłym wskaźnikiem. Chcesz używać go w kilku diagramach procesów.

W diagramie przeznaczonym do prezentacji może wystarczyć spójny wygląd urządzenia. W diagramie połączeń możesz chcieć, aby linie przyłączały się w połowie jego lewej i prawej krawędzi. Zapisz to wymaganie, zanim przygotujesz kolejny plik.

Wstaw SVG, gdy wystarczy jego wygląd

Oficjalny poradnik wstawiania SVG opisuje przeciąganie pliku SVG z komputera na obszar roboczy. Możesz też użyć polecenia Arrange → Insert → Image. Gdy pojawi się pytanie, wybierz Actual Size, a następnie w razie potrzeby zmień rozmiar wstawionej grafiki.

W przykładzie z urządzeniem użyj kopii roboczej i sprawdź mały okrągły wskaźnik po zmianie rozmiaru. Kształt, który jest czytelny w pełnym rozmiarze, może stracić istotne szczegóły w niewielkim diagramie.

Przechowuj osobno edytowalny plik źródłowy grafiki. Jeśli musisz przesunąć okrąg wewnątrz urządzenia, wprowadź tę zmianę w edytorze źródłowym i zastąp obraz używany w diagramie. Nie trać czasu na szukanie polecenia Ungroup tylko dlatego, że SVG zawiera kilka widocznych części. Nasz poradnik dotyczący obiektów SVG i rozgrupowywania wyjaśnia, jak struktura pliku wpływa na to, czy takie oczekiwanie jest uzasadnione.

Zwykły rysunek SVG przedstawiający cały diagram również wymaga uwagi. Poradnik wstawiania draw.io wyjaśnia, że zwykły SVG nie zawiera informacji o łącznikach potrzebnych do odtworzenia edytowalnego diagramu. Zachowaj oryginalny plik diagramu, jeśli go masz.

Zmiana kolorów osadzonego SVG ma własne wymagania

Draw.io zapewnia ograniczone powiązanie między osadzoną grafiką SVG a ustawieniami kolorów. Poradnik zmiany kolorów osadzonego SVG wykorzystuje reguły CSS wewnątrz SVG oraz ustawienie editableCssRules w stylu wstawionego obiektu. Ta funkcja dotyczy obrazów osadzonych, a nie obrazów dodanych przez link.

Jeśli SVG ma już strukturę opartą na regułach CSS, zaznacz wstawiony obraz, wybierz Edit Style i dodaj:

editableCssRules=.*;

Opisany w dokumentacji wzorzec wybiera wszystkie reguły, które można edytować. Należy umieścić go w stylu obiektu draw.io, a nie wkleić jako wiersz do kodu rysunku SVG.

Sprawdź dostępne ustawienia, zanim oprzesz na nich bibliotekę. Jeśli nie pojawią się przydatne ustawienia kolorów, porównaj plik źródłowy z przykładem klas CSS w oficjalnym poradniku. Nie zakładaj, że to ustawienie uporządkuje dowolne atrybuty wypełnienia i obrysu SVG, wydzieli wskaźnik urządzenia lub utworzy punkty połączeń.

Jeśli grafika wymaga tylko jednej trwałej zmiany koloru, prostsza może być edycja pliku źródłowego SVG. Zapisz kopię i ponownie sprawdź wygląd po zaimportowaniu.

Użyj natywnego szablonu, aby świadomie zdefiniować kształt

Natywny szablon opisuje kształt we własnej składni XML draw.io. Nie jest to plik SVG ze zmienionym rozszerzeniem na .xml. Samouczek tworzenia własnych kształtów używa polecenia Arrange → Insert → Shape do otwarcia edytora kształtów oraz Preview do sprawdzenia definicji.

Oto niewielki, autorski przykład wyjściowy dla symbolu urządzenia:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

Zewnętrzny prostokąt i środkowy okrąg są celowo proste. Wartości współrzędnych określają przestrzeń rysunkową tej ilustracji; nie są fizycznymi wymiarami urządzenia.

Dokumentacja XML określa względne współrzędne połączeń. Przy perimeter="0" te dwa ograniczenia umieszczają punkty w połowie lewej i prawej krawędzi. Dokumentacja wymaga również, aby operacja malowania geometrii tła znajdowała się na początku sekcji pierwszego planu, dlatego właśnie tam pojawia się fillstroke.

Wyświetl podgląd kształtu, dodaj go do diagramu testowego i sprawdź działanie, którego rzeczywiście potrzebujesz:

1. Zmień kolor jego wypełnienia i obrysu.
2. Przyłącz łącznik w każdym z zamierzonych punktów środkowych.
3. Przesuń urządzenie i sprawdź oba przyłączenia.
4. Zmień jego rozmiar i sprawdź okrąg, obrys oraz położenie łączników.

To niewielka definicja do dostosowania, a nie uniwersalny konwerter SVG na szablony. Jeśli ilustracja Twojego urządzenia zawiera wiele ozdobnych szczegółów, zdecyduj, które z nich powinny znaleźć się w symbolu diagramu. Ponowne narysowanie kilku podstawowych figur może ułatwić utrzymanie szablonu w porównaniu z przenoszeniem do niego każdego konturu.

Zapisz bibliotekę, gdy element przejdzie sprawdzenie

Biblioteka to etap umożliwiający ponowne użycie. Poradnik tworzenia własnych bibliotek opisuje polecenie File → New Library, wybór miejsca przechowywania oraz dodawanie obrazów lub przeciąganie kształtów z obszaru roboczego. Własne biblioteki używają rozszerzenia .xml.

Zapisz urządzenie pod nazwą, która mówi, co zawiera dany element, na przykład „Grafika urządzenia” lub „Urządzenie z dwoma portami”. Zachowaj je jako osobne pozycje, jeśli obie są przydatne.

Następnie otwórz nowy diagram i wstaw zapisany element. Powtórz jedną istotną edycję: zmień kolor grafiki, jeśli ta możliwość została skonfigurowana, albo przyłącz łącznik do natywnego szablonu. Pozwoli Ci to wykryć, czy biblioteka zawiera wcześniejszą wersję symbolu.

Sama nazwa pliku z rozszerzeniem .xml nie mówi, czy element ma natywną geometrię. Zarówno biblioteka, jak i definicja szablonu wykorzystują XML, ale biblioteka może zawierać obrazy, grupy, własne kształty lub całe diagramy. Sprawdź działanie wstawionego elementu.

Odtwarzaj grafikę rastrową tylko wtedy, gdy potrzebujesz wektorowego pliku źródłowego

Jeśli oryginalna ilustracja urządzenia zachowała się tylko jako PNG lub skan, procedura konwersji clipartu do SVG w PerfectVector może pomóc przygotować wstępną wersję grafiki. Przytnij kopię do motywu, wyświetl podgląd wyniku wektoryzacji i sprawdź zewnętrzny kontur, okrągły detal, puste przestrzenie oraz niechciane tło. Pobierz SVG i przetestuj go, korzystając z procedury wstawiania obrazu.

W ten sposób otrzymasz materiał źródłowy do oceny pod kątem wyglądu. Nie definiuje on lewego i prawego portu urządzenia, znaczenia łączników ani XML natywnego szablonu. Utwórz je świadomie, jeśli diagram ich wymaga.

Bardzo prosty symbol złożony z prostokąta i okręgu możesz szybciej narysować bezpośrednio. Obrysowywanie jest bardziej przydatne, gdy zachowana ilustracja zawiera charakterystyczne krzywe, które chcesz zachować. W przypadku motywów rysowanych ręcznie poradnik przygotowania ilustracji mapy omawia oczyszczanie rysunków przed obrysowywaniem.

Jeśli SVG nadal staje się pikselowaty po powiększeniu, sprawdź, czy zawiera osadzoną bitmapę, korzystając z poradnika diagnozowania obrazów rastrowych w SVG. Omówienie wektoryzacji obrazów wyjaśnia szerzej różnicę między zachowaniem pikseli a odtwarzaniem kształtów.

Najczęściej zadawane pytania

Czy zaimportowanie SVG zmienia go w natywny szablon draw.io? Nie. Procedura wstawiania obrazu osadza grafikę. Natywny własny szablon wykorzystuje definicję kształtu XML draw.io do określenia geometrii, stylów i punktów połączeń.

Czy mogę zmieniać kolory osadzonego SVG? Draw.io opisuje edycję kolorów za pomocą odpowiednich reguł CSS w SVG i ustawienia editableCssRules w stylu wstawionego obiektu. Sprawdź strukturę pliku źródłowego i ustawienia dostępne po wstawieniu.

Czy własna biblioteka przekształca ścieżki SVG w natywne kształty? Biblioteka przechowuje elementy do ponownego użycia, w tym obrazy i natywne własne kształty. Samo zapisanie obrazu w bibliotece nie dodaje natywnej geometrii ani semantyki łączników.

Czy wektoryzacja PNG utworzy punkty połączeń dla mojego diagramu? Nie. Wektoryzacja może odtworzyć kontury grafiki. Punkty połączeń i natywne działanie elementu w diagramie zdefiniuj osobno, jeśli są potrzebne.

Źródła

1. draw.io — Insert SVG images into a diagram — Wstawianie obrazów, ustalanie rozmiaru i ograniczenia odtwarzania łączników diagramu na podstawie SVG.
2. draw.io — Create and edit complex custom shapes — Natywna geometria XML, ograniczenia połączeń i operacje rysowania.
3. draw.io — Edit colours in embedded SVG images — Edycja reguł CSS i wymagania dotyczące obrazów osadzonych oraz obrazów dodanych przez link.
4. draw.io — Create custom shapes — Edytor szablonów, procedura podglądu i domyślne style.
5. draw.io — Work with custom shape libraries — Tworzenie, zapisywanie i ponowne używanie elementów biblioteki różnych typów.

Wybierz potrzebny sposób działania, przygotuj jeden symbol urządzenia i przetestuj go w nowym diagramie. Jeśli pozostała tylko grafika rastrowa, przygotuj wstępną wersję SVG, sprawdź jej kontury i zweryfikuj wstawiony obraz, zanim zapiszesz go w bibliotece.