Pomoc – VectorCraft
Edytor SVG do rysowania ikon i prostych grafik wektorowych. Tutaj znajdziesz opis każdego narzędzia, ustawienia i skrótu.
1. Szybki start
- Ustaw rozmiar płótna w panelu Płótno po lewej (np. preset
24albo64). - Wybierz narzędzie z paska po lewej (np. Prostokąt, klawisz R) i przeciągnij po płótnie.
- Przełącz się na Zaznaczanie (V), kliknij obiekt i zmień jego kolor, grubość lub położenie w panelach po lewej.
- Kod SVG widzisz na bieżąco w panelu po prawej. Skopiuj go przyciskiem Kopiuj kod.
- Kliknij Eksport… w prawym górnym rogu, aby pobrać plik SVG, PNG, WebP lub JPG w dowolnym rozmiarze.
2. Układ interfejsu
| Obszar | Co zawiera |
|---|---|
| Górny pasek | Cofnij/ponów, zoom, projekty (otwórz/zapisz), wyczyść, przełącznik panelu kodu, eksport, pomoc. |
| Pasek narzędzi (lewa krawędź) | Pionowa kolumna ikon z narzędziami do rysowania i edycji. |
| Panel lewy | Cztery rozwijane sekcje: Płótno, Wygląd, Obiekt, Warstwy. Kliknij nagłówek sekcji, aby ją zwinąć lub rozwinąć. |
| Płótno (środek) | Obszar roboczy. Szachownica oznacza przezroczystość, ramka to granice ikony. Wszystko, co wychodzi poza ramkę, jest obcinane w eksporcie. |
| Pasek stanu (dół) | Rozmiar płótna, współrzędne kursora, liczba obiektów oraz krótka podpowiedź do aktualnego narzędzia. |
| Panel kodu (prawa strona) | Podgląd ikony w kilku rozmiarach, kod SVG / Base64 / CSS i opcje generowania kodu. |
3. Górny pasek
| Przycisk | Działanie |
|---|---|
| ↶ Cofnij / ↷ Ponów | Cofa lub ponawia ostatnią zmianę (Ctrl+Z, Ctrl+Y lub Ctrl+Shift+Z). Przyciski są nieaktywne, gdy nie ma czego cofać. |
| − / + | Oddala i przybliża widok (o 25%). Zoom nie zmienia rozmiaru ikony, tylko to, jak ją widzisz. |
| Wartość % | Pokazuje aktualne powiększenie. Kliknięcie dopasowuje płótno do okna (0). |
| 1:1 | Ustawia powiększenie 100%, czyli jeden piksel ikony = jeden piksel ekranu (1). |
| Otwórz | Wczytuje zapisany wcześniej projekt (plik .json). Zastępuje bieżący rysunek, ale operację można cofnąć. |
| Zapisz projekt | Pobiera cały projekt (wszystkie obiekty i warstwy) jako plik .vectorcraft.json (Ctrl+S). |
| Wyczyść | Usuwa wszystkie obiekty ze wszystkich warstw. Warstwy zostają, a akcję da się cofnąć. |
| Pomoc | Otwiera tę stronę w nowej karcie (F1). |
| Kod | Pokazuje lub ukrywa prawy panel z kodem, aby zyskać więcej miejsca na płótno. |
| Eksport… | Otwiera okno pobierania pliku w wybranym formacie i rozmiarze. Zobacz Eksport plików. |
4. Narzędzia
Narzędzia wybierasz klikając ikonę na pasku po lewej albo klawiszem w nawiasie. Po najechaniu na ikonę zobaczysz jej nazwę. Podpowiedź do aktywnego narzędzia jest też w pasku stanu na dole.
Zaznaczanie V
- Klik zaznacza obiekt (na wierzchu, jeśli kilka się nakłada). Shift+klik dodaje obiekt do zaznaczenia lub go z niego odejmuje.
- Przeciągnięcie na pustym miejscu rysuje ramkę zaznaczenia – zaznaczy wszystkie obiekty, których obwiednia jej dotyka. Z Shift dodajesz do istniejącego zaznaczenia.
- Przeciągnięcie obiektu przesuwa go. Shift blokuje ruch do jednej osi. Przy włączonym przyciąganiu lewy górny róg zaznaczenia trafia na linie siatki.
- Klik w obiekt, który jest częścią wielokrotnego zaznaczenia, bez przeciągania zawęża zaznaczenie do niego.
- Kwadratowe uchwyty (8 sztuk wokół zaznaczenia) skalują obiekt. Shift na rogu zachowuje proporcje. Przeciągnięcie za przeciwną krawędź odbija obiekt.
- Pojedyncza linia lub ścieżka zamiast uchwytów skalowania pokazuje okrągłe punkty. Przeciągnij punkt, aby go przesunąć (Shift = kąty co 45° względem sąsiedniego punktu). Dwuklik na odcinku dodaje punkt, Alt+klik na punkcie go usuwa.
- Strzałki przesuwają zaznaczenie o 1 jednostkę, a z Shift o rozmiar siatki.
Pędzel B
Rysowanie odręczne. Po puszczeniu myszy linia jest automatycznie upraszczana (mniej punktów) i wygładzana krzywymi. Jeśli skończysz blisko miejsca startu, kształt zostanie zamknięty. Samo kliknięcie bez przeciągania stawia kropkę (koło o średnicy równej grubości linii, w kolorze obrysu). Pędzel nie przyciąga do siatki.
Linia L
Przeciągnij od punktu początkowego do końcowego. Shift ogranicza kąt do wielokrotności 45°. Punkty przyciągają się do siatki.
Prostokąt R
Przeciągnij po przekątnej. Shift daje kwadrat. Zaokrąglenie rogów ustawiasz w panelu Wygląd → Zaokr. rogów (przed rysowaniem albo po zaznaczeniu prostokąta).
Elipsa / koło E
Przeciągasz po przekątnej prostokąta, w który elipsa ma być wpisana. Shift daje idealne koło. W kodzie koło zapisuje się jako <circle>, a elipsa jako <ellipse>.
Wielokąt P i Łamana O
Klikaj kolejne punkty. Wielokąt jest zamykany (można go wypełnić), Łamana zostaje otwarta.
- Zakończenie: Enter, dwuklik albo (dla wielokąta) klik w pierwszy punkt – wtedy w jego okolicy pojawia się zielone kółko.
- Backspace usuwa ostatni punkt, Esc anuluje całość.
- Shift ogranicza kolejny odcinek do kątów co 45°.
- Zmiana narzędzia w trakcie rysowania kończy kształt.
Wiadro G
Nadaje kolor wypełnienia kształtowi, w który klikniesz (liczy się wnętrze, także niewypełnionego dotąd obiektu).
- Klik w obiekt – wypełnia go aktualnym kolorem wypełnienia. Gdy wypełnienie jest wyłączone (∅), używany jest ostatnio wybrany kolor.
- Shift+klik – zmienia kolor obrysu zamiast wypełnienia.
- Klik w puste miejsce – wypełnia tło płótna (to samo co ustawienie Tło w panelu Płótno).
- Alt+klik – usuwa wypełnienie obiektu albo, na pustym miejscu, tło (wraca przezroczyste).
Pipeta I
Klik w obiekt kopiuje jego pełny styl (obrys, wypełnienie, grubość, krycie, końce, łączenia, kreskowanie) do bieżących ustawień. Klik w puste miejsce pobiera kolor tła (o ile jest ustawione) jako kolor wypełnienia.
Gumka X
Kliknij obiekt, aby go usunąć, albo przeciągaj po wielu obiektach. Całe przeciągnięcie to jeden krok w historii, więc Ctrl+Z cofa je jednym ruchem.
Ręka H
Przeciąganie przesuwa widok. To samo zrobisz tymczasowo, trzymając Spację lub środkowy przycisk myszy z dowolnego narzędzia.
5. Widok, zoom i siatka
| Akcja | Jak |
|---|---|
| Zoom | Kółko myszy (zoom w stronę kursora), przyciski +/−, klawisze + −. Zakres 10%–16000%. |
| Dopasuj do okna | Klik w wartość procentową albo 0. |
| Rozmiar 1:1 | Przycisk 1:1 albo 1. |
| Przesuwanie widoku | Narzędzie Ręka, Spacja+przeciąganie lub środkowy przycisk myszy. |
Siatka i przyciąganie
- Siatka to linie pomocnicze co ustawioną liczbę pikseli. Nie jest częścią rysunku i nie trafia do kodu. Przy dużym oddaleniu (gdy oczko ma mniej niż 4 piksele na ekranie) znika automatycznie.
- Przyciąganie do siatki sprawia, że punkty rysowanych kształtów i przesuwane obiekty „zaskakują” na linie siatki. Dzięki temu ikony wychodzą równe i ostre.
- Trzymaj Alt, aby chwilowo wyłączyć przyciąganie i ustawić coś dokładnie „na oko”.
6. Panel: Płótno
| Ustawienie | Co robi |
|---|---|
| Rozmiar (szer. × wys.) | Wymiary ikony w pikselach (1–4096). Zmiana zatwierdza się Enterem lub wyjściem z pola. To rozmiar roboczy (viewBox), a końcowy rozmiar pliku wybierasz przy eksporcie. |
| Preset | Gotowe kwadraty: 16, 24, 32, 48, 64, 96, 128, 256, 512, 1024. Po wybraniu lista wraca do „Wybierz…”. |
| Skaluj zawartość przy zmianie rozmiaru | Wyłączone: rysunek zostaje w miejscu, zmienia się tylko obszar (przydatne do dodania marginesu). Włączone: rysunek razem z grubościami linii i zaokrągleniami rogów jest przeskalowywany proporcjonalnie do nowego rozmiaru. |
| Tło | Przezroczyste (szachownica) albo Kolor (pole koloru obok). Tło wchodzi do kodu jako prostokąt na całą ikonę i do plików PNG/WebP/JPG. Ustawisz je też wiaderkiem. |
| Siatka (pole wyboru + wartość) | Włącza widoczność siatki i ustawia jej oczko w pikselach (min. 0,1; przydatne np. 1 lub 2 przy ikonach 24×24). |
| Przyciągaj do siatki | Włącza przyciąganie punktów i przesuwanych obiektów do linii siatki (Alt chwilowo wyłącza). |
7. Panel: Wygląd
Ustawienia z tego panelu dotyczą nowo rysowanych obiektów oraz aktualnie zaznaczonych obiektów (zmieniasz je na żywo). Po zaznaczeniu obiektu panel automatycznie pokazuje jego styl.
| Ustawienie | Co robi |
|---|---|
| Obrys / Wypełnienie (przyciski) | Wybierają, którego koloru dotyczą kliknięcia w paletę poniżej. Aktywny jest podświetlony na niebiesko. |
| Pola koloru | Dokładny wybór koloru obrysu i wypełnienia. Wybranie koloru włącza dany element, jeśli był wyłączony. |
| ∅ (obok koloru) | Wyłącza obrys lub wypełnienie (brak). Ponowne kliknięcie przywraca ostatni kolor. |
| ⇄ Zamień | Zamienia miejscami kolor obrysu i wypełnienia. |
| Paleta | Gotowe kolory. Kratka z ukośnym wzorem to „brak”. Kolor trafia do elementu wybranego przyciskami Obrys/Wypełnienie. |
| Grubość | Grubość obrysu (0,25–32 suwakiem, do 200 w polu liczbowym). Obiekt z obrysem „brak” jej nie używa. |
| Krycie | Przezroczystość całego obiektu (5–100%). W kodzie jako atrybut opacity. |
| Końce | Kształt zakończeń linii otwartych: płaskie (butt), okrągłe (round) lub kwadratowe (square, wystaje o pół grubości). |
| Łączenia | Jak wyglądają zagięcia: ostre (miter), okrągłe lub ścięte (bevel). |
| Linia | Ciągła, Kreskowana (kreski 2,5× grubości, przerwy 2×) lub Kropkowana (okrągłe kropki; końce są wtedy automatycznie okrągłe). |
| Zaokr. rogów | Promień zaokrąglenia rogów prostokątów. Działa na zaznaczone prostokąty i na te rysowane w przyszłości. Zbyt duża wartość jest automatycznie ograniczana do połowy krótszego boku. |
8. Panel: Obiekt
Aktywny tylko wtedy, gdy coś jest zaznaczone. Nagłówek pokazuje liczbę zaznaczonych obiektów.
| Ustawienie | Co robi |
|---|---|
| X, Y, W, H | Położenie lewego górnego rogu oraz szerokość i wysokość zaznaczenia (mierzone po geometrii, bez grubości obrysu). Wpisz wartość i zatwierdź, aby dokładnie ustawić obiekt lub go przeskalować. |
| Zachowaj proporcje | Zmiana W automatycznie zmienia H (i odwrotnie), zachowując kształt. |
| Odbij poziomo / pionowo | Lustrzane odbicie zaznaczenia względem jego środka. |
| Wyrównanie | Przesuwa całe zaznaczenie względem płótna: do lewej, środek poziomo, do prawej, do góry, środek pionowo, na dół. „Środek” obu osi daje idealne wycentrowanie ikony. |
| Na wierzch / Wyżej / Niżej / Na spód | Zmienia kolejność nakładania w obrębie warstwy. „Na wierzch” i „Na spód” to skrajne pozycje, „Wyżej”/„Niżej” przesuwają o jeden obiekt. |
| Wygładź krzywą (tylko ścieżki) | Przełącza między łamaną (ostre kąty) a gładką krzywą przechodzącą przez punkty. Domyślnie włączone dla pędzla, wyłączone dla wielokątów i łamanych. |
| Zamknij ścieżkę (tylko ścieżki) | Łączy ostatni punkt z pierwszym (potrzebne są co najmniej 3 punkty). Tylko zamknięty kształt da się sensownie wypełnić. |
| Duplikuj | Tworzy kopię z lekkim przesunięciem i zaznacza ją (Ctrl+D). |
| Usuń | Usuwa zaznaczone obiekty (Delete lub Backspace). |
9. Panel: Warstwy
Warstwy pozwalają porządkować rysunek (np. „tło”, „kontur”, „detale”). Lista pokazuje najwyższą warstwę u góry. Cyfra po prawej to liczba obiektów w warstwie.
| Element | Działanie |
|---|---|
| Klik w wiersz | Ustawia aktywną warstwę (niebieska ramka). Nowo rysowane obiekty trafiają właśnie do niej. Zaznaczenie obiektu przełącza aktywną warstwę na tę, do której należy. |
| 👁 (oko) | Pokazuje lub ukrywa warstwę. Ukryte warstwy nie trafiają do kodu ani do eksportu. |
| 🔒 (kłódka) | Blokuje warstwę – nie da się na niej rysować ani zaznaczać jej obiektów. Zabezpiecza przed przypadkowym przesunięciem. |
| Dwuklik na nazwie | Zmienia nazwę (Enter zatwierdza, Esc anuluje). Nazwa może posłużyć jako id grupy w kodzie. |
| + Nowa | Dodaje pustą warstwę nad aktywną. |
| Duplikuj | Kopiuje aktywną warstwę razem z jej obiektami. |
| Usuń | Usuwa aktywną warstwę wraz z obiektami (do cofnięcia). Musi zostać przynajmniej jedna warstwa. |
| ▲ Wyżej / ▼ Niżej | Zmienia kolejność warstw (kto jest nad kim). |
| → Tu zazn. | Przenosi zaznaczone obiekty na aktywną warstwę. Kliknij docelową warstwę, a potem ten przycisk. |
10. Panel kodu
Zawsze aktualny, odświeża się przy każdej zmianie rysunku. Pokazuje tylko widoczne warstwy.
Podgląd
Dwa paski z ikoną w rozmiarach 16, 24, 32, 48 i 64 px – na ciemnym i jasnym tle. To najlepszy sposób, by ocenić, czy ikona jest czytelna w małych rozmiarach.
Zakładki
| Zakładka | Zawartość |
|---|---|
| SVG | Zwykły kod, który wklejasz do pliku HTML albo zapisujesz jako .svg. |
| Base64 | Adres data:image/svg+xml;base64,…, np. do atrybutu src obrazka. |
| CSS | Gotowa reguła background-image: url("data:image/svg+xml,…");. |
Opcje generowania kodu
| Opcja | Co robi |
|---|---|
| currentColor | Zamienia wszystkie kolory na currentColor, dzięki czemu ikona przejmuje kolor tekstu (color w CSS). Tło płótna jest wtedy pomijane. Idealne dla ikon jednokolorowych. |
| Warstwy jako <g> | Elementy każdej warstwy trafiają do osobnej grupy <g id="nazwa-warstwy">. Bez tej opcji kod jest płaski. |
| Wspólne style w <svg> | Atrybuty identyczne we wszystkich elementach (np. fill="none" stroke="…" stroke-width="2") są zapisane raz na elemencie <svg>, a nie przy każdym kształcie. Zmniejsza kod i ułatwia ręczną edycję. Krycie (opacity) zawsze zostaje przy obiekcie. |
| Upraszczanie ścieżek | Brak / Lekkie / Mocne. Usuwa nadmiarowe punkty z linii narysowanych pędzlem tylko w kodzie wynikowym (na płótnie nic się nie zmienia). „Mocne” daje najkrótszy kod, ale może delikatnie zmienić kształt. |
| Precyzja | Liczba miejsc po przecinku w współrzędnych (0–4). Mniej = krótszy kod. Dla ikon 24–64 px zwykle wystarcza 1–2. |
Przyciski na dole
- Kopiuj kod – kopiuje zawartość aktualnej zakładki do schowka.
- Pobierz .svg – zapisuje plik
ikona.svgw rozmiarze płótna. Inny rozmiar lub format wybierzesz w oknie Eksport…. - Z prawej widzisz rozmiar kodu SVG w bajtach.
11. Eksport plików
Przycisk Eksport… otwiera okno, w którym ustawiasz format i rozmiar. Zamkniesz je przyciskiem Anuluj, klawiszem Esc albo klikając w ciemne tło.
| Ustawienie | Opis |
|---|---|
| Format | SVG – wektor, skaluje się bez utraty jakości. PNG – obraz z przezroczystością. WebP – mały obraz z przezroczystością. JPG – bez przezroczystości (jeśli płótno nie ma tła, tło będzie białe). |
| Rozmiar (szer. × wys.) | Docelowy wymiar w pikselach (1–8192). Przy SVG zmieniają się tylko atrybuty width i height, a viewBox zostaje. |
| Proporcje | Powiązuje szerokość i wysokość tak, aby zachować kształt płótna. |
| Szybkie rozmiary | Przyciski 16–1024 ustawiają dłuższy bok (drugi liczy się automatycznie). „Oryginał” przywraca rozmiar płótna. |
| Nazwa | Nazwa pliku bez rozszerzenia. |
| Podgląd | Miniatura tego, co zostanie pobrane (na szachownicy, więc widać przezroczystość). |
12. Projekty i autozapis
- Zapisz projekt tworzy plik
.vectorcraft.jsonz całą zawartością (obiekty, warstwy, rozmiar, tło). Używaj go, gdy chcesz wrócić do edycji – plik SVG nie zachowuje wszystkich informacji edytora. - Otwórz wczytuje taki plik. Plik z błędnym formatem zostanie odrzucony z komunikatem.
- Autozapis: edytor sam zapisuje stan w przeglądarce po każdej zmianie i przywraca go przy ponownym otwarciu strony. Dotyczy to tej samej przeglądarki i tego samego pliku/adresu. Czyszczenie danych witryn go usuwa, więc ważne projekty zapisuj do pliku.
- Edytor nie importuje gotowych plików SVG – działa wyłącznie na własnych projektach.
13. Skróty klawiszowe
Narzędzia
| V | Zaznaczanie |
| B | Pędzel |
| L | Linia |
| R | Prostokąt |
| E | Elipsa / koło |
| P | Wielokąt |
| O | Łamana |
| G | Wiadro |
| I | Pipeta |
| X | Gumka |
| H | Ręka |
Edycja
| Ctrl+Z | Cofnij |
| Ctrl+Y / Ctrl+Shift+Z | Ponów |
| Ctrl+C / V | Kopiuj / wklej obiekty |
| Ctrl+D | Duplikuj |
| Ctrl+A | Zaznacz wszystko |
| Ctrl+S | Zapisz projekt |
| Delete / Backspace | Usuń zaznaczenie |
| ←↑→↓ | Przesuń o 1 jednostkę |
| Shift+←↑→↓ | Przesuń o oczko siatki |
| Esc | Anuluj / odznacz |
Widok
| + / − | Przybliż / oddal |
| 0 | Dopasuj do okna |
| 1 | Rozmiar 1:1 |
| Spacja + przeciąganie | Przesuwanie widoku |
| Kółko myszy | Zoom |
| F1 | Pomoc |
Modyfikatory podczas rysowania
| Shift | Kwadrat/koło, kąty co 45°, proporcje przy skalowaniu, ruch w jednej osi |
| Alt | Wyłącza przyciąganie; na punkcie ścieżki – usuwa go; z wiadrem – usuwa wypełnienie |
| Enter | Kończy wielokąt / łamaną |
| Backspace | Usuwa ostatni punkt wielokąta |
14. Poradnik: rysowanie ikon
- Wybierz rozmiar roboczy. Dla ikon interfejsu zwykle 24×24 (albo 16, 32, 48). Wybierz preset w panelu Płótno.
- Ustaw siatkę. Oczko 1 lub 2 px, przyciąganie włączone – linie trafią na całe piksele i ikona będzie ostra.
- Ustaw styl. Ikona liniowa: wypełnienie ∅, grubość 2, końce i łączenia okrągłe. Ikona pełna: obrys ∅ i kolor wypełnienia.
- Narysuj kształty narzędziami geometrycznymi (prostokąt, elipsa, linia, wielokąt). Pędzla używaj oszczędnie – daje dłuższy kod.
- Popraw szczegóły: zaznacz obiekt, przeciągaj jego punkty lub użyj pól X/Y/W/H. Wycentruj całość przyciskami wyrównania.
- Sprawdź podgląd w panelu kodu w rozmiarach 16–64 px na ciemnym i jasnym tle.
- Wygeneruj kod: dla ikon jednokolorowych włącz
currentColor, ustaw precyzję 1–2 i opcję „Wspólne style w <svg>”. Skopiuj kod lub pobierz plik. - Zapisz projekt (Ctrl+S), aby móc go potem edytować.
color – ikona przejmie ten kolor. Dotyczy to SVG wstawionego inline, a nie obrazka z <img src>.15. Problemy i pytania
Nie mogę zaznaczyć obiektu / nic się nie rysuje
- Sprawdź, czy aktywna warstwa nie jest ukryta lub zablokowana (ikony oka i kłódki).
- Obiekt bez wypełnienia łapiesz za krawędź, nie za środek.
- Obiekty poza obszarem płótna są obcinane. Zaznacz wszystko (Ctrl+A) i użyj wyrównania, żeby wrócić z nimi do środka.
Wiadro nie wypełnia całego obszaru
Wiadro koloruje jeden obiekt jako całość. Żeby wypełnić tło, kliknij nim w puste miejsce płótna. Żeby wypełnić figurę z kilku linii, narysuj ją jako wielokąt.
Zmieniam kolor, ale obiekt się nie zmienia
Zmiany stosują się do zaznaczonych obiektów. Jeśli nic nie jest zaznaczone, zmieniasz tylko ustawienia dla kolejnych obiektów. Wybierz V i zaznacz obiekt.
Kod różni się nieco od tego, co widzę
Włączone „Upraszczanie ścieżek” lub niska „Precyzja” upraszczają kod. Ustaw upraszczanie na „Brak” i zwiększ precyzję, aby uzyskać 1:1.
Zniknął mój rysunek po ponownym otwarciu
Autozapis działa w obrębie tej samej przeglądarki i adresu pliku. Otwarcie edytora z innego miejsca albo wyczyszczenie danych witryn go resetuje. Zapisuj ważne projekty jako plik (Zapisz projekt).
Czy mogę wczytać istniejący plik SVG?
Nie. Edytor edytuje tylko własne projekty (.vectorcraft.json), a gotowy SVG możesz tu jedynie odtworzyć, rysując go od nowa.
Jak zmienić rozmiar gotowej ikony?
Do pliku wynikowego użyj Eksport… i wpisz rozmiar. Aby zmienić rozmiar samego rysunku, zmień wymiary płótna z włączonym „Skaluj zawartość”.