PerfectVector
Autor: Irene Kim9 min czytania

LibreOffice Draw: edytuj kształty SVG i bezpiecznie je eksportuj

Edytuj grafikę SVG w LibreOffice Draw: wybierz Break lub Ungroup, zmieniaj kształty i kolory, zachowaj plik roboczy ODG i sprawdź osobno wyeksportowany plik SVG przed udostępnieniem.

Na tej stronie

Aby edytować kształty wewnątrz pliku SVG wstawionego do LibreOffice Draw, zaznacz grafikę i użyj Shape → Break. Następnie kliknij poza nią i zaznacz część, którą chcesz zmienić. Implementacja polecenia Break w Draw obsługuje osadzoną grafikę wektorową przez przekształcenie jej w obiekty rysunkowe. Dlatego wstawiony SVG może wymagać użycia Break nawet wtedy, gdy Ungroup jest niedostępne.

Zachowaj oryginalny SVG, przetestuj drobną zmianę i zapisz rysunek roboczy jako ODG. Wyeksportuj osobny SVG do kolejnej aplikacji. Jeśli przygotowujesz układ strony w Scribus, skorzystaj z procedury importowania SVG do edycji i przetestuj jeden zaimportowany obszar, zanim zaczniesz budować stronę. Ta procedura sprawdzi się przy odznace, wykresie lub diagramie, których kształty chcesz dostosować. Sprawdź tekst i wygląd, zanim poświęcisz czas na duży rysunek.

Break, Ungroup czy To Polygon?

Pojedynczy prostokąt zaznaczenia pokazuje, co Draw zaznaczył. Nie mówi jednak, czy zawartość jest grupą, zaimportowaną grafiką wektorową czy pikselami.

Co masz zaznaczoneOdpowiednia następna czynnośćCo sprawdzić później
Wstawiona grafika SVG zawierająca grafikę wektorowąShape → BreakCzy możesz zaznaczyć zamierzoną część i zmienić jej kolor?
Grupa obiektów DrawEnter Group, aby edytować obiekt w grupie, lub Ungroup, aby rozdzielić obiektyCzy grupa zawiera potrzebny obiekt?
PNG, JPG lub inny obraz rastrowyWykonaj wektoryzację tylko wtedy, gdy potrzebujesz kształtów wektorowychCzy wektoryzacja zachowała sylwetkę i przydatne szczegóły?
Litery utworzone z konturówEdytuj kontury lub zastąp etykietę polem tekstowymCzy potrzebujesz edytowalnych słów, czy tylko takiego samego wyglądu?

Dokumentacja grup w LibreOffice opisuje Enter Group i Ungroup jako operacje na istniejących grupach obiektów. Enter Group zachowuje grupę podczas edytowania należącego do niej obiektu. W Draw te polecenia są dostępne w menu kontekstowym grupy.

Wektoryzacja obrazu rastrowego jest osobną operacją: udokumentowana ścieżka to Shape → Convert → To Polygon. Użycie Break na grafice SVG nie odzyskuje oryginalnych ścieżek z osadzonego w niej obrazu rastrowego. Jeśli nadal nie masz pewności, czym jest zaznaczony obiekt, skorzystaj z szerszej diagnostyki zaznaczania SVG.

Schemat poglądowy pokazujący grafikę SVG rozbitą na obiekty Draw, a następnie zapisaną jako główny plik roboczy ODG i wyeksportowaną jako SVG.
Schemat pracy: Break udostępnia obiekty rysunkowe do edycji; zachowaj główny plik roboczy Draw i wyeksportowany SVG jako osobne pliki.

Zacznij od drobnej, odwracalnej zmiany

Użyj kopii grafiki, którą chcesz zmienić. Aby przygotować prosty plik do ćwiczeń, zapisz poniższy autorski przykład jako badge-source.svg w edytorze zwykłego tekstu. Zawiera koło, trójkąt i krótki pasek, więc łatwo rozpoznasz części, które możesz zaznaczyć.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <circle cx="78" cy="72" r="40" fill="#167d8d" />
  <path d="M150 32 L194 112 L106 112 Z" fill="#e76f51" />
  <rect x="48" y="128" width="144" height="12" fill="#20354b" />
</svg>

Użyj tego projektu ćwiczeniowego, aby sprawdzić procedurę w swojej instalacji Draw, a następnie powtórz te same kontrole na docelowej grafice.

Wstaw SVG do nowego rysunku

Otwórz pusty dokument Draw i wybierz Insert → Image, a następnie wskaż SVG. Pozostaw opcję Insert as Link niezaznaczoną, aby osadzić kopię roboczą. Instrukcje wstawiania w Draw Guide rozróżniają osadzanie i tworzenie powiązania: osadzona grafika jest częścią rysunku, a grafika powiązana zależy od swojego pliku źródłowego.

Otwórz oryginał w przeglądarce lub innym oknie, aby mieć punkt odniesienia. Przed rozpoczęciem edycji sprawdź, czy nie brakuje kształtów, czy odstępy się nie zmieniły i czy nie pojawiło się nieoczekiwane tło. Jeśli grafika już wygląda inaczej, odnotuj to jako problem z importem; późniejsza edycja nie może wyjaśniać różnicy, która była widoczna już przy wstawianiu.

Podane tutaj ścieżki menu dotyczą standardowego paska menu. Interfejs LibreOffice z kartami i starsze wersje mogą używać innych nazw lub umieszczać polecenia w innych miejscach.

Użyj Break i przetestuj jedno wypełnienie

  1. Zaznacz wstawioną grafikę i wybierz Shape → Break.
  2. Kliknij puste miejsce na stronie, aby usunąć zaznaczenie.
  3. Zaznacz trójkąt w ćwiczeniowej odznace lub jeden rozpoznawalny obszar we własnej grafice.
  4. Zmień jego wypełnienie za pomocą ustawień Properties → Area w panelu bocznym.
  5. Potwierdź, że zmienił się tylko zamierzony obszar. Cofnij próbną zmianę koloru, jeśli nie chcesz jej zachować.

Przewodnik Getting Started with Draw omawia zaznaczanie obiektów i formatowanie obszaru. Przesunięcie całej odznaki potwierdza, że możesz zmienić jej położenie; zmiana koloru samego trójkąta potwierdza, że możesz edytować tę część.

Jeśli kilka części nadal zaznacza się razem, a Enter Group jest dostępne, wejdź do grupy i zaznacz należący do niej obiekt. Użyj Ungroup, gdy chcesz usunąć to grupowanie. Gdy uzyskasz dostęp do potrzebnej części, nie rozdzielaj dalej obiektów.

Przetestuj jeden kontur, a następnie sprawdź napisy

Zaznacz trójkąt i włącz Edit → Toggle Point Edit Mode. Aktualna pomoc LibreOffice podaje również skrót F8; starsze instrukcje mogą nazywać to polecenie Points. Przesuń nieznacznie jeden narożnik, obejrzyj wynik, a następnie cofnij próbę. Jeśli skrót klawiaturowy przechwytuje Twój komputer, użyj polecenia z menu.

We własnej grafice wybierz kontur, który rzeczywiście będzie wymagał zmiany. Możliwość zmiany rozmiaru prostokąta zaznaczenia nie dowodzi, że kontur jest edytowalny.

Ćwiczeniowa odznaka nie zawiera napisów. Jeśli Twój SVG je zawiera, przetestuj etykietę osobno: czy możesz umieścić w niej kursor tekstowy i zastąpić słowo? Litera narysowana jako ścieżka nie zawiera edytowalnego słowa. SVG obsługuje zarówno tekst, jak i grafikę geometryczną, więc taka sama widoczna etykieta może zachowywać się różnie podczas edycji. Specyfikacja tekstu SVG definiuje tekst jako osobny typ zawartości.

Jeśli etykieta wymaga regularnych aktualizacji, rozważ zastąpienie jej natywnym polem tekstowym Draw w głównym pliku roboczym ODG. Porównaj jego czcionkę, wyrównanie i podział na wiersze z oryginałem, zanim usuniesz zaimportowaną etykietę.

Zapisz główny plik roboczy ODG i osobno wyeksportuj SVG

Użyj File → Save As, aby zachować plik roboczy, na przykład badge-master.odg. Draw domyślnie zapisuje rysunki w formacie ODG. Aby utworzyć plik do przekazania, zaznacz gotową grafikę, wybierz File → Export i wskaż SVG na liście formatów. Włącz Selection, jeśli chcesz wyeksportować tylko zaznaczoną grafikę. Draw Guide wyjaśnia eksport całego dokumentu i zaznaczonych obiektów; wygląd okna dialogowego zależy od systemu operacyjnego i konfiguracji.

Nadaj wynikowi odrębną nazwę, na przykład badge-edited.svg. Kolejne zmiany wprowadzaj w głównym pliku roboczym ODG i ponownie eksportuj, aby zawsze wiedzieć, który plik zawiera rysunek roboczy.

Przed udostępnieniem otwórz ponownie SVG w przeglądarce i w aplikacji docelowej. Sprawdź, czy:

  • Wszystkie zamierzone części są obecne, w tym krótki pasek w ćwiczeniowej odznace.
  • Zmienione wypełnienie i kontur zostały zachowane po eksporcie.
  • Napisy, cienkie obrysy i nakładające się kształty wyglądają poprawnie w docelowym rozmiarze.
  • Plik ma zamierzony obszar płótna i nie zawiera przypadkowo wyeksportowanej kopii referencyjnej.
  • Aplikacja docelowa umożliwia dalszą edycję w zakresie potrzebnym odbiorcy.

Podgląd w przeglądarce pozwala sprawdzić wygląd. Otwarcie tego samego pliku w aplikacji docelowej pozwala sprawdzić, czy przekazany plik faktycznie spełnia swoje zadanie. Jeśli rozbieżność pojawia się dopiero po eksporcie, wróć do głównego pliku roboczego ODG i porównaj ustawienia eksportu oraz zaznaczone obiekty, zanim zaczniesz odtwarzać grafikę.

Gdy części nadal nie dają się edytować

Break jest niedostępne. Wyjdź z edycji tekstu, klikając poza nim, zaznacz samą grafikę i sprawdź dostępne polecenia. Możliwe, że masz już obiekty rysunkowe, jesteś wewnątrz grupy albo masz obraz rastrowy. Nie uznawaj pliku za rastrowy wyłącznie na podstawie nieaktywnego polecenia.

Jeden kolor występuje w wielu rozproszonych częściach. Zaimportowana grafika może zawierać kilka osobnych obszarów, które po prostu mają ten sam kolor. Zmieniaj kolor potrzebnych obszarów świadomie. Jeśli drobna zmiana wymaga zarządzania dużą liczbą fragmentów, wypróbuj oryginalny SVG w edytorze SVG, zanim będziesz dalej pracować nad rysunkiem. Nasz przewodnik po edycji SVG pomoże Ci wybrać między edytorem wizualnym a edycją kodu.

Obraz rastrowy pozostaje obrazem rastrowym. SVG może zawierać obrazy rastrowe za pośrednictwem elementu image. Po użyciu Break te piksele nie stają się kształtami z oryginalnego projektu ilustratora. Sprawdź, czy SVG zawiera osadzony obraz rastrowy, a następnie zdecyduj, czy ta część w ogóle wymaga wektoryzacji.

Gdy oryginalna struktura SVG musi zostać zachowana

Jeśli zadanie zależy od konkretnych identyfikatorów, grup, edytowalnego tekstu lub animacji, zachowaj oryginalny plik i pracuj w edytorze SVG albo w kodzie. Przekształcenie w obiekty Draw tworzy inną reprezentację roboczą; zgodny wygląd nie jest wystarczającym dowodem, że te szczegóły źródła zostały zachowane.

Jeśli jedynym źródłem jest PNG lub JPG

Wektoryzacja sprawdza się, gdy potrzebujesz zmienić kształt lub kolor grafiki, która istnieje tylko jako piksele. Tworzy nowe ścieżki na podstawie obrazu; nie odtwarza oryginalnego dokumentu autora. Przewodnik po wektoryzacji obrazów wyjaśnia tę różnicę.

Możesz wypróbować konwersję To Polygon w Draw na obrazie rastrowym, a następnie sprawdzić powstałe kształty. PerfectVector oferuje inną metodę, gdy aplikacją docelową jest Draw: przekształć PNG lub JPG w grafikę SVG, sprawdź sylwetkę i obszary kolorów, a następnie wstaw SVG do Draw. Przeprowadź ten sam test wypełnienia i konturu, zanim zbudujesz wokół tej grafiki resztę dokumentu.

Jeśli fotografię trzeba tylko umieścić lub przyciąć, zachowaj obraz rastrowy. W przypadku istniejącej grafiki wektorowej, której jedynym problemem jest zaznaczanie, zacznij od opisanych wyżej kontroli obiektów.

FAQ

Dlaczego Ungroup jest wyszarzone dla mojego SVG w LibreOffice Draw? Zaznaczenie może obejmować zaimportowaną grafikę SVG, a nie grupę obiektów Draw. Wypróbuj Shape → Break na kopii, następnie usuń zaznaczenie i zaznacz pojedynczą część. Samo nieaktywne polecenie Ungroup nie dowodzi, że zawartość jest rastrowa.

Czy Break zamienia PNG w edytowalne kształty wektorowe? Nie. Wektoryzacja obrazu rastrowego jest osobną operacją. Dokumentacja Draw wskazuje Shape → Convert → To Polygon jako sposób przekształcenia obrazu rastrowego w grafikę wektorową; sprawdź wynik, zanim go użyjesz.

Dlaczego nie mogę edytować słów w zaimportowanym SVG? Napisy mogą być konturami lub zawartością rastrową zamiast edytowalnego tekstu. Przetestuj etykietę osobno. Jeśli potrzebujesz zmienić jej treść, użyj oryginalnego edytowalnego źródła albo zastąp ją polem tekstowym Draw i sprawdź wygląd.

Czy edytowany rysunek zapisać jako ODG czy SVG? Zachowaj główny plik roboczy ODG do dalszej edycji w Draw i wyeksportuj osobny SVG do udostępnienia lub użycia w innej aplikacji. Otwórz ponownie SVG, aby sprawdzić jego wygląd, granice obszaru i możliwość edycji w zakresie potrzebnym odbiorcy.

Źródła

  1. LibreOffice — Break command implementation — Kod źródłowy wydanej wersji obsługujący osadzoną grafikę wektorową za pomocą Break.
  2. LibreOffice — Draw Guide 26.2: Editing Images — Osadzanie, tworzenie powiązań, pliki ODG i eksport zaznaczonych obiektów.
  3. LibreOffice — Working with Groups — Działanie Enter Group, Exit Group i Ungroup.
  4. LibreOffice — Converting Bitmap Images into Vector Graphics — Osobna procedura wektoryzacji To Polygon w Draw.
  5. LibreOffice — Getting Started with Draw — Zaznaczanie obiektów rysunkowych, wypełnienia i narzędzia edycji.
  6. LibreOffice — Toggle Edit Points Mode — Aktualne polecenie edycji węzłów i skrót F8.
  7. W3C — SVG text — Tekst jako zawartość odrębna od konturów geometrycznych.
  8. W3C — SVG embedded content — Obrazy rastrowe wewnątrz dokumentu SVG.

Jeśli masz tylko PNG lub JPG i potrzebujesz edytowalnych konturów, przygotuj SVG za pomocą PerfectVector. Sprawdź jego kształty, wstaw go do Draw i potwierdź, że możesz zmienić jedno wypełnienie i jeden kontur, zanim wyeksportujesz gotową grafikę.

Więcej z bloga

Zacznij od czystszego SVG,
który łatwiej edytować