Jak edytować SVG: edytor graficzny czy kod pliku

Aby edytować plik SVG, otwórz jego kopię w edytorze graficznym, jeśli zmieniasz kształty, kolory i krzywe, albo w edytorze tekstu, jeśli potrzebujesz drobnych zmian w znacznikach. Zapisz plik jako SVG i otwórz go ponownie, aby sprawdzić wynik. Właściwa metoda zależy od zadania i obiektów wewnątrz pliku.

Zanim wybierzesz polecenie mocniej zmieniające strukturę, ustal, co zaznaczono. Grupa, jedna ścieżka z kilkoma częściami i osadzony PNG mogą wyglądać na obszarze roboczym jak jeden obiekt. Każdy wymaga innej poprawki.

Przygotuj kopię i rozpoznaj obiekty SVG

Potrzebujesz pliku SVG, kopii roboczej, edytora i przeglądarki obsługującej SVG. Zachowaj oryginał, dopóki wyeksportowana kopia nie przejdzie sprawdzenia.

SVG oznacza Scalable Vector Graphics. Znaczniki XML mogą opisywać kształty i ścieżki wektorowe, ale również zawierać osadzone obrazy. Ścieżka opisuje linię lub kształt; węzeł jest edytowalnym punktem na tej ścieżce w edytorze wektorowym. Samo rozszerzenie SVG nie mówi, czy widoczna grafika udostępnia takie punkty.

Otwórz kopię i sprawdź zaznaczony obiekt w panelu warstw lub obiektów. W razie potrzeby obejrzyj znaczniki w edytorze tekstu. Ustal typ obiektu, zanim zmienisz jego strukturę:

Element <image> może odwoływać się do zawartości PNG lub JPEG. Piksele nie stają się ścieżkami tylko dlatego, że zewnętrzny plik kończy się na .svg. Kanciaste piksele po powiększeniu są wskazówką; panel obiektów i odwołanie do źródła pozwalają postawić dokładniejszą diagnozę. Niektóre edytory wstawiają też prawidłowy wektorowy SVG jako jeden obiekt graficzny, więc pojedyncze zaznaczenie niewiele dowodzi.

Ścieżka złożona może zachowywać otwory, na przykład środek litery „O”. Rozdzielenie może je zmienić. Zobacz diagnozę typów obiektów SVG, jeśli Ungroup jest niedostępne lub nie działa.

Wybierz edytor graficzny lub kod

Inkscape jest bezpłatny i ma otwarty kod, działa na macOS, Windows i Linux, a SVG jest jego głównym formatem. Illustrator to kolejna opcja, jeśli już z niego korzystasz. Figma przenosi zasoby pomiędzy narzędziami projektowymi jako SVG, chociaż jej wskazówki importu wykluczają elementy SVG marker i pattern. Sprawdź złożony import przed wyborem edytora.

Opisany przez Canva proces edycji SVG obejmuje podstawowe zmiany koloru i układu. Edytory przeglądarkowe nadają się do mniejszych zadań. Sprawdź obsługę wypełnień, obrysów, tekstu i efektów używanych w pliku oraz aktualne warunki eksportu. Do węższego zadania rozdzielenia obsługiwanych jednolitych wypełnień według dokładnego koloru na pliki o wspólnym położeniu użyj SVG Color Separator; do zmiany kształtu ścieżek wybierz edytor wektorowy.

Edytuj kształty graficznie i sprawdź eksport

Nazwy poleceń zależą od edytora, ale kolejność jest następująca:

1. Otwórz kopię roboczą. Porównaj import z oryginałem. Zatrzymaj się, jeśli litery, wzory lub efekty już się zmieniły.
2. Zaznacz właściwy obiekt. Wejdź do grupy lub rozgrupuj ją tylko wtedy, gdy panel identyfikuje grupę. Dla ścieżki włącz narzędzie węzłów lub zaznaczania bezpośredniego.
3. Wprowadź jedną zmianę. Zmień wypełnienie, przesuń część lub popraw kilka węzłów. Podczas skalowania zachowuj proporcje, chyba że celowo rozciągasz grafikę.
4. Sprawdź zmieniony obszar. Obejrzyj krzywe i małe szczeliny z bliska, a potem cały projekt w docelowym rozmiarze.
5. Zapisz lub wyeksportuj nowy SVG. Otwórz go ponownie w przeglądarce i w aplikacji docelowej. Sprawdź zmienioną część, wymiary całkowite i potrzebne zaznaczalne obiekty.

Przy zmianie koloru odróżniaj wypełnienie, czyli kolor wnętrza kształtu, od obrysu, koloru jego krawędzi. Jeden widoczny kolor może obejmować wiele obiektów. Zaznaczanie według tego samego wypełnienia pomaga, ale sprawdź zaznaczenie przed zmianą: inna część może używać tego samego koloru. Poradnik zmiany koloru SVG opisuje dziedziczone style i kolory, które nie chcą się zmienić.

Zachowaj edytowalny plik roboczy, gdy edytor używa własnego formatu lub dodatkowych metadanych. Opcje zapisu SVG Adobe obejmują ustawienia czcionek, właściwości CSS, obrazów rastrowych i danych edycji Illustrator. Nawet poprawnie wyglądający eksport może mieć inne znaczniki lub zrasteryzowaną zawartość. Porównuj także wymagane obiekty i powiązania, nie tylko obraz.

Edytuj kod SVG przy małej, kontrolowanej zmianie

Otwórz kopię SVG w VS Code lub innym edytorze zwykłego tekstu. Zachowaj przestrzeń nazw, nazwy elementów i cudzysłowy. Wprowadź jedną zmianę i wyrenderuj plik przed następną.

Zmień wypełnienie bez zmiany ścieżki

Zapisz przykład jako triangle.svg i otwórz go w przeglądarce obsługującej SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Zastąp #3b82f6 przez #f97316 w atrybucie fill ścieżki.
2. Zapisz i otwórz ponownie lub odśwież plik.
3. Sprawdź, czy trójkąt jest pomarańczowy i jego kontur się nie zmienił. Dane ścieżki d, id i class powinny nadal odpowiadać oryginałowi.

Jeśli kolor się nie zmienia, sprawdź atrybut style, regułę klasy, dziedziczony kolor lub obrys, które mogą sterować wyglądem. Zmień odpowiednią regułę zamiast zastępować wszystkie wystąpienia koloru w całym pliku.

Informacja o metodzie: wyrenderowaliśmy przykład przed i po zmianie wypełnienia za pomocą renderera SVG i sprawdziliśmy piksele wyniku. Trójkąt zmienił kolor, a dane ścieżki, ID i klasa pozostały takie same. Ten mały przykład nie sprawdza importu ani eksportu złożonego SVG w aplikacji projektowej.

Usuń puste marginesy za pomocą viewBox

Główny viewBox zawiera cztery liczby: minimalne x, minimalne y, szerokość i wysokość. Określają prostokąt w przestrzeni współrzędnych SVG mapowany na widoczny obszar.

W przykładzie trójkąt zajmuje x od 8 do 40 i y od 8 do 40. Zmień viewBox="0 0 48 48" na viewBox="8 8 32 32", pozostawiając dane ścieżki bez zmian. Zapisz i wyrenderuj ponownie. Trójkąt wypełnia teraz większą część tego samego obszaru 48 na 48, ponieważ usunięto marginesy.

Ta zmiana dotyczy mapowania obszaru roboczego, a nie geometrii ścieżki ani głównych width i height. W rzeczywistej grafice zostaw miejsce na obrysy i efekty: ciasna ramka geometrii może je przyciąć. Często bezpieczniej dopasować stronę lub obszar kompozycji do rysunku i sprawdzić eksportowaną kopię. Jeśli import ma zły rozmiar fizyczny, skorzystaj z poradnika wymiarów SVG i viewBox.

Jeśli grafika znika, jest przycięta lub rozciągnięta, przywróć pierwotny viewBox i sprawdź cztery wartości oraz proporcje. Nie „naprawiaj” problemu obszaru roboczego, przesuwając wszystkie węzły.

Kiedy wektoryzowany SVG wymaga poprawy

Obraz rastrowy przechowuje piksele w siatce. Wektoryzacja odtwarza z nich geometrię, więc wynik może organizować kolory i kontury inaczej niż pierwotny projekt.

Jedna widoczna część może być rozbita na małe ścieżki. Jeden kolor może też obejmować kilka rozłącznych regionów. Gęste węzły, drobne plamki, kształty tła i nakładające się kontury spowalniają prostą edycję. Sprawdzaj te właściwości zamiast oceniać plik wyłącznie po ostrości przy jednym powiększeniu.

Rozdrobniona struktura

Prostsza struktura

Te ilustracje wyjaśniają nakład pracy przy edycji; nie są próbkami konwersji ani zmierzonym porównaniem produktów. Jeśli wynik warto zachować, popraw problematyczne obszary i upraszczaj tylko tam, gdzie kontur pozostaje dokładny. Jeśli pochodzi z rastra i poprawki wymagałyby zbyt wiele pracy, spróbuj ponownie zwektoryzować oryginał. Zachowuj użyteczną natywną geometrię wektorową zamiast wektoryzować jej zrzut ekranu.

Jak wygląda to w PerfectVector

PerfectVector pasuje do sytuacji, gdy potrzebujesz ścieżek z rastra: oryginalnego PNG lub JPEG albo zawartości rastrowej wewnątrz SVG. Dla istniejącej grafiki wektorowej, którą chcesz zachować, użyj opisanych wyżej metod edycji.

Przy własnej konwersji postępuj w tej kolejności:

1. Prześlij raster i porównaj podgląd wektorowy. Szukaj brakujących szczegółów, zbędnych regionów i konturów innych niż w źródle.
2. Odblokuj wynik przed edycją lub eksportem. Konwersja i podgląd są bezpłatne i bez limitu; aktualna publiczna polityka cenowa mówi o jednym kredycie za każdy unikalny wynik i bezpłatnym ponownym pobieraniu odblokowanego wyniku.
3. Sprawdź i edytuj odblokowaną geometrię. Obejrzyj potrzebne kształty i węzły, w razie potrzeby dostosuj paletę i porównaj wynik w docelowym rozmiarze.
4. Wyeksportuj i sprawdź w następnej aplikacji. Otwórz ponownie SVG, zaznacz potrzebne części i sprawdź wymiary oraz małe szczegóły. Sam podgląd nie dowodzi gotowości pliku dla każdego edytora, drukarki lub plotera.

Litery rastrowe są odtwarzane jako geometria, więc nie oczekuj edytowalnego tekstu. Przygotuj się na ręczną korektę lub przerysowanie, gdy ważna litera, krzywa lub mała szczelina nie przetrwa wektoryzacji.

Częste pytania

Jak bezpłatnie edytować SVG? Użyj Inkscape do edycji graficznej albo edytora tekstu do zmian znaczników. Narzędzia przeglądarkowe również mogą mieć darmowe funkcje; sprawdź aktualne warunki eksportu i obsługę właściwości używanych przez twój SVG.

Czy mogę edytować SVG w VS Code? Tak. Edytuj znaczniki XML przy małej zmianie wypełnienia, wymiarów, viewBox lub wymaganych ID i klas. Zapisz kopię i wyrenderuj ją później. Do zmiany kształtu krzywych użyj edytora graficznego.

Dlaczego nie mogę zaznaczać pojedynczych kształtów w SVG? Sprawdź typ obiektu. Może to być grupa, jedna ścieżka z kilkoma podścieżkami, grafika przycięta lub osadzony obraz. Wejdź do rzeczywistej grupy lub rozgrupuj ją; edytuj geometrię węzłami; wektoryzuj raster tylko wtedy, gdy potrzebujesz ścieżek.

Czy mogę edytować SVG w Canva? Opisany proces Canva obejmuje podstawową zmianę kolorów i układu. Sprawdź importowany plik i aktualne warunki pobierania SVG. Do precyzyjnych zmian konturów lub kontroli ID i klas użyj edytora wektorowego albo znaczników.

Czy mogę edytować wynik PerfectVector przed odblokowaniem? Przy własnej konwersji najpierw porównaj podgląd, a potem odblokuj wynik przed użyciem edycji i eksportu. Sprawdź wyeksportowany SVG w aplikacji docelowej.

Źródła

1. W3C — Scalable Vector Graphics (SVG) 2 — model dokumentu, kształtów, ścieżek i stylów SVG.
2. W3C — zawartość osadzona SVG — obrazy rastrowe mogą pozostać osadzone w dokumencie SVG.
3. W3C — układy współrzędnych, transformacje i jednostki SVG — mapowanie viewBox i różnica między geometrią a wymiarami widocznego obszaru.
4. Inkscape — o programie — oficjalne informacje o platformach, formacie SVG i otwartym kodzie edytora.
5. Adobe — zapisywanie grafiki w Illustrator — ustawienia eksportu SVG i zachowane dane edycji Illustrator.
6. Figma — kopiowanie zasobów między narzędziami projektowymi — transfer SVG i ograniczenia importu marker/pattern.
7. Canva — edytor SVG — opisane podstawowe zmiany koloru, rozmiaru i układu.
8. PerfectVector — polityka cenowa — aktualne zasady podglądu, odblokowania i ponownego pobierania.

Zachowaj użyteczny SVG i edytuj jego istniejącą geometrię. Jeśli źródło jest rastrowe lub trzeba zastąpić wynik wektoryzacji, wypróbuj oryginalny obraz w PerfectVector, porównaj podgląd ze źródłem, odblokuj przed edycją i sprawdź wyeksportowane kształty oraz wymiary w następnej aplikacji.