Tools 4 All
Strona główna
Narzędzia graficzne

Edytor SVG online

Szybki, profesjonalny edytor wektorowy w przeglądarce: rysuj piórem, edytuj węzły, łącz kształty, styluj gradientami, animuj, a następnie eksportuj zoptymalizowany SVG lub PNG. Nic nie jest przesyłane.

Za darmoBez rejestracjiDziała lokalnie — pliki nigdy nie opuszczają urządzenia

Szybki start i skróty

Wybierz narzędzie po lewej (lub naciśnij jego klawisz), przeciągnij na płótnie, aby rysować, i użyj panelu Projekt po prawej, aby stylizować zaznaczenie. Naciśnij ? w dowolnej chwili, aby zobaczyć pełną listę skrótów.

  • Nawigacja: przewijaj, aby przesuwać widok, Ctrl/⌘ + przewijanie lub zsunięcie palców, aby powiększać, przytrzymaj Space i przeciągnij, aby przesuwać. Shift+1 dopasowuje powiększenie.
  • Zaznaczanie: kliknij, kliknij z Shift lub przeciągnij ramkę zaznaczenia. Kliknij dwukrotnie grupę, aby do niej wejść, ścieżkę, aby edytować jej węzły, lub tekst, aby pisać.
  • Przekształcaj: przeciągaj uchwyty, aby skalować (Shift zachowuje proporcje, Alt skaluje od środka), przeciągnij okrągły uchwyt, aby obracać, i przeciągnij uchwyt boku z Ctrl/⌘, aby pochylić.
  • Pióro: klikaj, aby tworzyć narożniki, przeciągaj, aby tworzyć krzywe, kliknij pierwszy węzeł, aby zamknąć ścieżkę, i naciśnij Enter, aby zakończyć.
  • Pliki: upuszczaj pliki SVG lub obrazy w dowolnym miejscu edytora, wklejaj kod SVG lub zrzuty ekranu, a autozapis chroni Twoją pracę.
Untitled
Guide, features and FAQ

Jak korzystać z edytora SVG

  1. Otwórz lub zacznij rysować

    Upuść plik SVG, PNG lub JPEG na płótno, otwórz plik lub zacznij od pustej strony. Nic nie jest przesyłane: edytor działa w całości w przeglądarce.

  2. Rysuj i edytuj

    Używaj pióra, ołówka i narzędzi kształtów, a następnie dopracowuj ścieżki węzeł po węźle, łącz kształty operacjami logicznymi i styluj wypełnienia, obrysy i gradienty.

  3. Porządkuj

    Grupuj, zmieniaj kolejność i blokuj obiekty w panelu Warstwy, wyrównuj je i rozmieszczaj, używaj grafiki ponownie jako symboli i edytuj kod SVG bezpośrednio.

  4. Eksportuj

    Pobierz zoptymalizowany SVG, PNG, JPEG lub WebP w dowolnej skali albo skopiuj wynik jako kod SVG, data URI, komponent React lub SVG gotowy dla Tailwind, który pobiera kolor z CSS.

Profesjonalny edytor SVG działający w całości w przeglądarce

Edytor SVG od Tools 4 All to pełna aplikacja do grafiki wektorowej, która otwiera się od razu, bez pobierania, konta i przesyłania. Rysuj w nim loga, ikony, ilustracje, diagramy i elementy interfejsu albo porządkuj i dopracowuj istniejące pliki SVG. Jest zbudowany wokół samego formatu SVG, więc eksportowany plik to ten sam dokument, który edytowałeś: bez zastrzeżonego formatu i ukrytej konwersji.

Co możesz zrobić

  • Rysuj precyzyjnie: pióro z krzywymi Béziera, ołówek do rysowania odręcznego z wygładzaniem, prostokąty z niezależnie zaokrąglanymi, ściętymi lub odwróconymi narożnikami, elipsy, linie, pędzel plamowy, gumka, nóż i nożyczki oraz edytowalne kształty: wielokąty, gwiazdy, trójkąty, krzyże, ramki, pierścienie, wycinki koła, półksiężyce, strzałki, dymki, koła zębate, serca, chmury, kwiaty i spirale, a także tekst.
  • Edytuj ścieżki węzeł po węźle: przesuwaj węzły i uchwyty, zmieniaj typ węzłów (narożny, gładki, symetryczny), dodawaj i usuwaj węzły, łącz i rozdzielaj ścieżki, wyginaj segmenty bezpośrednio i przyciągaj uchwyty do stycznych.
  • Łącz kształty: suma, odejmowanie, część wspólna, wykluczenie i podział, a także obrys na kontur, odsunięcie ścieżki, upraszczanie i odwracanie — wszystko liczone przez nasz własny silnik geometrii zachowujący krzywe, działający w tle.
  • Styluj wszystko: jednolite kolory, gradienty liniowe i radialne z uchwytami na płótnie, wzorki, krycie osobno dla wypełnienia i obrysu, kreskowanie, zakończenia, połączenia, groty strzałek, tryby mieszania, efekty rozmycia i cienia, ścieżki przycinające i maski.
  • Zachowaj porządek: panel warstw ze zmianą kolejności przez przeciąganie, zmianą nazw i zagnieżdżaniem, blokowanie i ukrywanie, grupowanie i rozgrupowywanie, wyrównywanie i rozmieszczanie względem zaznaczenia, obszaru roboczego lub obiektu kluczowego, próbki dokumentu i symbole wielokrotnego użytku.
  • Pracuj jak profesjonalista: inteligentne prowadnice z odległościami i wskazówkami równych odstępów, przyciąganie do siatki, pikseli, prowadnic z linijek, węzłów i ścieżek, pola liczbowe X/Y/W/H/obrót, nieograniczone cofanie i skróty w stylu Figmy i Illustratora.
  • Kod i eksport: dwukierunkowy widok kodu SVG, zoptymalizowany eksport SVG z podglądem rozmiaru, PNG/JPEG/WebP w dowolnej skali oraz kopiowanie jako SVG, data URI, React (JSX lub TSX), SVG dla Tailwind lub tło CSS.
  • Stworzony do produkcji webowej: kolory dokumentu z zamianą jednym kliknięciem i konwersją do currentColor, tekst na kontury, obrys na kontur, spłaszczanie przekształceń i rozgrupowanie, dopasowanie płótna do zawartości oraz upraszczanie zaszumionych ścieżek.
  • Prawdziwa przestrzeń robocza: kilka rysunków w kartach, każdy z własną historią cofania, krótkie menu z podmenu, panel boczny, który można zwinąć (Ctrl/⌘+B), oraz edycja na pełnym ekranie na telefonach i komputerach.

Dlaczego edytor natywny dla SVG ma znaczenie

Wiele narzędzi projektowych traktuje SVG jako format eksportu: rysujesz w ich własnym modelu, a SVG jest generowany na końcu. To sprawdza się przy prostych ikonach. Zawodzi, gdy trzeba edytować istniejący plik, zachować identyfikatory, od których zależy Twój CSS lub JavaScript, albo zrozumieć, dlaczego plik jest dziesięć razy większy, niż powinien. Ten edytor pracuje bezpośrednio na dokumencie SVG. Grupy pozostają grupami, gradienty gradientami, a <symbol> użyty pięć razy pozostaje jednym symbolem. Gdy zmieniasz nazwę warstwy, ustawiasz id elementu.

Szybki przy dużych plikach

Szybkość była celem od pierwszej linijki kodu. Rysunek jest renderowany natywnie przez przeglądarkę w izolowanej warstwie. Uchwyty zaznaczenia, kontury przy najechaniu i prowadnice są rysowane na osobnej nakładce, więc ruch myszy nigdy nie dotyka dokumentu. Indeks przestrzenny (R-drzewo) znajduje to, co jest pod kursorem, w mikrosekundach, nawet przy dziesiątkach tysięcy kształtów. W ciężkich dokumentach przesuwanie i powiększanie przejmuje kompozytor GPU, a wektory są ponownie renderowane ostro, gdy się zatrzymasz. Kosztowne operacje, takie jak operacje logiczne, odsuwanie ścieżek i optymalizacja SVG, działają w Web Workerze, więc interfejs pozostaje responsywny.

Precyzyjne narzędzia do pracy z wektorami

Używaj pióra, aby klikać narożniki i przeciągać gładkie krzywe. Przytrzymaj Shift, aby zachować kąty 45°, i Alt, aby rozdzielić uchwyt. Narzędziem do węzłów możesz przeciągnąć segment, aby go wygiąć, kliknąć dwukrotnie, aby dodać węzeł, lub zaznaczyć kilka węzłów i je wyrównać. Inteligentne prowadnice pokazują, kiedy obiekt jest wyrównany z krawędziami lub środkami sąsiadów i kiedy odstępy między obiektami są równe. Prowadnice możesz też wyciągać z linijek. Aby podać dokładne wartości, wpisz X, Y, szerokość, wysokość i obrót w panelu Projekt. Pola akceptują działania, takie jak 120+16 czy 200/3.

Czyste, małe pliki eksportu

Edytory często zostawiają w zapisywanych plikach metadane, nieużywane definicje, zbędne grupy i nadmiernie precyzyjne liczby. Okno eksportu uruchamia w tle optymalizator w stylu SVGO. Zaokrągla liczby do wybranej precyzji, zapisuje dane ścieżek w najkrótszej postaci, usuwa metadane edytorów i nieużywane definicje, skraca identyfikatory i kolory oraz scala zbędne grupy. Każdą optymalizację można wyłączyć, a okno pokazuje rozmiar pliku przed i po. W przypadku grafiki rastrowej wybierz PNG, JPEG lub WebP w skali 1×, 2×, 4× lub w dokładnym rozmiarze w pikselach, z przezroczystym tłem lub bez.

Stworzony do produkcji webowej

Pliki SVG trafiające na strony i do aplikacji potrzebują czegoś innego niż grafika do druku. Lista Kolory dokumentu pokazuje każdy kolor użyty w pliku: zmień jeden, a wszystko, co go używa, zmieni się razem z nim, lub przekonwertuj go na currentColor, aby ikona w React lub Tailwind pobierała kolor z CSS. Importowane pliki często zawierają zagnieżdżone grupy i przekształcenia, które utrudniają edycję ścieżek: Spłaszcz przekształcenia i rozgrupuj wpisuje je w współrzędne w jednym kroku, a Dopasuj do zawartości przycina viewBox do grafiki wraz z obrysami. Tekst na kontury i Obrys na kontur zamieniają tekst i grubości linii w zwykłe ścieżki, które wszędzie wyglądają tak samo, a Uprość usuwa setki punktów z obrysowanego lub odręcznego kształtu.

Twoje pliki pozostają na Twoim urządzeniu

Za edytorem nie stoi żaden serwer. Otwarcie pliku wczytuje go z dysku do strony, a eksport generuje plik na Twoim urządzeniu. Autozapis trafia do prywatnej pamięci IndexedDB przeglądarki, która przechowuje też listę ostatnich plików. Jeśli przypadkiem zamkniesz kartę, ostatni dokument zostanie przywrócony przy następnej wizycie.

Poznaj więcej narzędzi graficznych

Najczęściej zadawane pytania

Czy ten edytor SVG jest naprawdę darmowy i prywatny?
Tak. Jest darmowy, nie wymaga konta i działa w 100% w przeglądarce. Twoje rysunki nigdy nie są przesyłane: pliki są odczytywane lokalnie, autozapis trafia do własnej pamięci przeglądarki (IndexedDB), a eksporty są generowane na Twoim urządzeniu.
Czy edytor otwiera pliki SVG z Illustratora, Inkscape'a, Figmy lub bibliotek ikon?
Tak. Edytor pracuje bezpośrednio na dokumencie SVG, więc prawdziwe pliki zachowują strukturę, identyfikatory, style, gradienty, symbole, ścieżki przycinające i maski. Nieuporządkowane lub nieprawidłowe pliki są naprawiane przy otwieraniu, skrypty są wyłączone podczas edycji, a pliki .svgz są rozpakowywane automatycznie.
Czy ma pióro i operacje logiczne jak Illustrator?
Tak. Pióro rysuje ścieżki Béziera z węzłami narożnymi, gładkimi i symetrycznymi, a narzędzie do węzłów pozwala dodawać, usuwać, konwertować, łączyć, rozdzielać i wyrównywać węzły. Suma, odejmowanie, część wspólna, wykluczenie i podział działają na krzywych i zachowują je jako krzywe; możesz też zamieniać obrysy na kontury, odsuwać i upraszczać ścieżki.
Czy mogę animować SVG?
Tak. Otwórz obszar roboczy Animacja, przesuń głowicę odtwarzania i zmień położenie, obrót, skalę, krycie lub kolory obiektu: każda zmiana staje się klatką kluczową z krzywą wygładzania, a właściwości, które są już animowane, automatycznie otrzymują nową klatkę kluczową. Animacje są zapisywane jako standardowy SVG (SMIL), więc odtwarzają się w każdej przeglądarce bez skryptów.
Czy mogę edytować kod SVG bezpośrednio?
Tak. Panel Kod pokazuje bieżące źródło SVG z podświetlaniem składni. Edycja kodu aktualizuje rysunek, a edycja rysunku aktualizuje kod. Każdą zmianę, z obu stron, można cofnąć.
Jakie formaty eksportu są obsługiwane?
Zoptymalizowany SVG, tworzony przez wbudowany optymalizator w stylu SVGO z porównaniem rozmiaru przed i po, oraz PNG, JPEG i WebP w skali 1×, 2×, 4× lub własnym rozmiarze, z opcjonalną przezroczystością. Zaznaczenie możesz też skopiować jako kod SVG, data URI lub JSX dla Reacta.
Czy stracę pracę, jeśli przeglądarka się zamknie?
Nie. Dokument jest automatycznie zapisywany w pamięci lokalnej przeglądarki chwilę po każdej zmianie. Przy następnym otwarciu edytor przywraca ostatnią sesję, a starsze dokumenty są dostępne w menu Plik → Ostatnie pliki.
Czy mogę sprawić, by ikona używała currentColor w React lub Tailwind?
Tak. Sekcja Kolory dokumentu wyświetla każdy kolor w rysunku (każdy zapis koloru liczy się raz). Kliknij próbkę, aby zaznaczyć wszystko, co jej używa, i zmienić ją wszędzie naraz, lub wybierz Konwertuj na currentColor: ikona będzie wtedy pobierać kolor z CSS, np. z klasy Tailwind text-…, zachowując wygląd w edytorze. Skopiuj ją jako komponent React lub SVG dla Tailwind z menu Edycja lub menu kontekstowego.
Jak zamienić tekst na ścieżki lub obrys na wypełniony kształt?
Zaznacz tekst i wybierz Tekst na kontury (Ctrl/⌘+Shift+O): każdy glif staje się ścieżką dokładnie tam, gdzie narysowała go przeglądarka, także w przypadku tekstu na ścieżce i stylizowanych fragmentów. W przypadku obrysów Obrys na kontur zamienia obrys w wypełniony kształt o tej samej szerokości, zakończeniach, połączeniach i kreskowaniu, dzięki czemu logo zachowuje grubość w każdym rozmiarze.
Czy edytor potrafi uporządkować importowane pliki SVG z przekształceniami i zagnieżdżonymi grupami?
Tak. Spłaszcz przekształcenia i rozgrupuj wpisuje każde przekształcenie we współrzędne ścieżek i rozwiązuje grupy w jednym kroku cofania, zachowując tylko to, co w przeciwnym razie zmieniłoby wygląd (grupy przycięte, zamaskowane lub te, do których są odwołania). Dopasuj do zawartości przycina płótno (viewBox, szerokość i wysokość) do grafiki wraz z obrysami, z opcjonalnym marginesem, a Uprość zmniejsza liczbę punktów na zaszumionych ścieżkach.
Czy mogę pracować nad kilkoma rysunkami naraz?
Tak. Każdy rysunek otwiera się w osobnej karcie nad płótnem, z własną historią cofania, zaznaczeniem i powiększeniem. Przełączaj się między nimi swobodnie; zamknięcie karty zachowuje plik w menu Plik → Ostatnie pliki, a otwarte karty wracają przy następnej wizycie.
Gdzie są wszystkie polecenia? Menu są krótkie.
Powiązane polecenia znajdują się w podmenu (Ułóż, Przekształć, Ścieżka, Przycinanie i maska, Kopiuj jako, Wyrównaj i rozmieść…). Najedź na nie lub dotknij, albo użyj klawiszy strzałek. Każde polecenie ma też skrót: naciśnij ?, aby zobaczyć pełną listę. Na komputerze możesz zwinąć panel boczny skrótem Ctrl/⌘+B, aby zyskać więcej miejsca na płótno.
Czy działa na telefonach i tabletach?
Tak. Na małych ekranach narzędzia przenoszą się na dolny pasek, a panele otwierają się jako arkusze. Zsuń palce, aby powiększyć, przeciągnij dwoma palcami, aby przesunąć widok, i przytrzymaj, aby otworzyć menu kontekstowe.
Jak duże mogą być moje rysunki?
Edytor jest stworzony do ciężkich plików. Używa indeksu przestrzennego do wykrywania trafień i zaznaczania, osobnej warstwy nakładki dla uchwytów i prowadnic, przesuwania i powiększania wyłącznie przez kompozytor w dużych dokumentach oraz Web Workerów do geometrii i optymalizacji. Dokumenty z dziesiątkami tysięcy elementów pozostają responsywne.
Wszystkie narzędzia graficzne →
Kompresor obrazów Zmniejsz rozmiar pliku obrazu, zachowując jakość wizualną. Konwerter obrazów Konwertuj obrazy między formatami PNG, JPEG, WebP, GIF, BMP, ICO, TIFF i innymi. Zmiana rozmiaru obrazów Zmieniaj rozmiar obrazów do dokładnych wymiarów — idealne do zdjęć paszportowych. Obraz do PDF Połącz jeden lub więcej obrazów w jeden dokument PDF.