> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Jak edytować SVG: edytor graficzny czy kod pliku > Edytuj kształty SVG graficznie lub zmieniaj kod. Rozpoznaj grupy, ścieżki i osadzone obrazy, a potem sprawdź kolory, obszar roboczy i zapisany plik. Source: https://perfectvector.com/pl/blog/how-to-edit-an-svg Language: pl Author: Irene Kim Published: 2026-05-30T08:00:00+09:00 Updated: 2026-10-08T08:00:00+09:00 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. > **Wybierz sposób edycji** > > * **Kolory, rozmiar, położenie i krzywe:** użyj Inkscape, Illustrator lub zgodnego przeglądarkowego edytora wektorowego. > * **Identyfikatory, klasy, kolor hex lub obszar roboczy:** edytuj kopię kodu SVG i sprawdź renderowanie. > * **Wszystko zaznacza się razem:** sprawdź typ obiektu; używaj Ungroup wyłącznie dla rzeczywistej grupy. > * **Masz tylko grafikę rastrową:** zwektoryzuj źródło, porównaj podgląd, a potem odblokuj wynik PerfectVector przed edycją i eksportem. ## 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](https://www.w3.org/TR/SVG2/). 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ę: | Zaznaczona zawartość | Co sprawdzić | Pierwsze działanie | | -------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------- | | Grupa | Kontener grupy, często `` w kodzie | Wejdź do grupy lub rozgrupuj raz; powtarzaj tylko przy zagnieżdżonych grupach | | Ścieżka z rozłącznymi częściami lub otworami | Jedna ścieżka z kilkoma podścieżkami | Edytuj węzły; rozdziel duplikat tylko wtedy, gdy potrzebujesz osobnych części | | Jedna ciągła ścieżka | Edytowalne węzły wzdłuż konturu | Użyj narzędzia węzłów lub zaznaczania bezpośredniego | | Grafika przycięta lub maskowana | Przycięcie lub maska wraz z zawartością | Sprawdź zawartość przed usunięciem ograniczenia | | Osadzony PNG lub JPEG | Obiekt obrazu; `` odwołujący się do danych rastrowych | Edytuj źródło rastrowe lub zwektoryzuj je, jeśli potrzebujesz ścieżek | [Element `` może odwoływać się do zawartości PNG lub JPEG](https://www.w3.org/TR/SVG2/embedded.html). 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](https://perfectvector.com/pl/blog/svg-wont-ungroup), jeśli Ungroup jest niedostępne lub nie działa. ## Wybierz edytor graficzny lub kod | Twoja zmiana | Przydatna metoda | Co sprawdzić później | | ----------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------- | | Zmiana koloru lub przesunięcie kształtu | Edytor graficzny | Zmieniły się wyłącznie zamierzone obiekty | | Zmiana kształtu konturu | Narzędzie węzłów lub zaznaczania bezpośredniego | Krzywe, narożniki i otwory nadal pasują do projektu | | Zmiana jednej znanej wartości wypełnienia | Edytor tekstu | Widoczny kolor się zmienił i inny styl go nie nadpisał | | Zachowanie powiązań CSS lub animacji | Edytor tekstu | W zapisanych znacznikach zostały wymagane ID i klasy | | Usunięcie pustych marginesów | Dopasowanie strony/obszaru kompozycji lub zmiana `viewBox` | Grafika, obrys i efekty nie zostały przycięte | | Przygotowanie osobnych warstw cięcia | Proces dostosowany do aplikacji docelowej | Geometria i zaimportowane warstwy działają w aplikacji tnącej | [Inkscape jest bezpłatny i ma otwarty kod](https://inkscape.org/about/), 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](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools). Sprawdź złożony import przed wyborem edytora. Opisany przez Canva [proces edycji SVG](https://www.canva.com/features/svg-editor/) 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](https://perfectvector.com/pl/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](https://perfectvector.com/pl/blog/how-to-change-svg-color) 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](https://helpx.adobe.com/illustrator/using/saving-artwork.html) 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 ``` 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ść](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute). 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`](https://perfectvector.com/pl/blog/svg-imports-wrong-size). 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** ![Ilustracja rozdrobnionych kształtów wektorowych z gęstymi punktami kontrolnymi](https://perfectvector.com/blog/how-to-edit-an-svg/messy-svg-editing.webp) *Ilustracja: wiele małych części i gęste węzły utrudniają zaznaczanie bezpośrednie oraz zmianę kształtu.* **Prostsza struktura** ![Ilustracja większych kształtów wektorowych z mniejszą liczbą punktów kontrolnych](https://perfectvector.com/blog/how-to-edit-an-svg/clean-svg-editing.webp) *Ilustracja: większe kształty i oszczędniejszy układ węzłów łatwiej sprawdzać i edytować.* 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](https://perfectvector.com/pricing.md) 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](https://www.w3.org/TR/SVG2/) — model dokumentu, kształtów, ścieżek i stylów SVG. 2. [W3C — zawartość osadzona SVG](https://www.w3.org/TR/SVG2/embedded.html) — obrazy rastrowe mogą pozostać osadzone w dokumencie SVG. 3. [W3C — układy współrzędnych, transformacje i jednostki SVG](https://www.w3.org/TR/SVG2/coords.html) — mapowanie viewBox i różnica między geometrią a wymiarami widocznego obszaru. 4. [Inkscape — o programie](https://inkscape.org/about/) — oficjalne informacje o platformach, formacie SVG i otwartym kodzie edytora. 5. [Adobe — zapisywanie grafiki w Illustrator](https://helpx.adobe.com/illustrator/using/saving-artwork.html) — ustawienia eksportu SVG i zachowane dane edycji Illustrator. 6. [Figma — kopiowanie zasobów między narzędziami projektowymi](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools) — transfer SVG i ograniczenia importu marker/pattern. 7. [Canva — edytor SVG](https://www.canva.com/features/svg-editor/) — opisane podstawowe zmiany koloru, rozmiaru i układu. 8. [PerfectVector — polityka cenowa](https://perfectvector.com/pricing.md) — 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](https://perfectvector.com/pl/image-to-vector), porównaj podgląd ze źródłem, odblokuj przed edycją i sprawdź wyeksportowane kształty oraz wymiary w następnej aplikacji. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/how-to-edit-an-svg) - [Prostokąty ograniczające SVG: mierz we właściwych współrzędnych](https://perfectvector.com/pl/blog/svg-bounding-box.md) - [Jednostki wzoru SVG: zachowaj właściwy rozmiar powtarzanych motywów](https://perfectvector.com/pl/blog/svg-pattern-units.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)