Softonic

Kreator ścieżek SVG

Krok 1 / 2

Kliknij puste miejsce, aby dodać punkty. Przeciągaj punkty, aby je przesunąć. Usuń ostatni przyciskiem.

Dalej

Atrybut d w elemencie SVG <path> to maleńki język dziedzinowy: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Każda litera to komenda (moveto, lineto, sześcienna krzywa Béziera, close-path), każda liczba to współrzędna lub punkt kontrolny. Ten kreator pozwala klikać po płótnie, aby rozmieszczać punkty kotwiczenia, i przeciągać je, aby zmieniać kształt, obserwując, jak ścieżka rysuje się w czasie rzeczywistym. Włącz wygładzanie, aby zamienić proste segmenty w sześcienne krzywe Béziera, zamknij figurę, a potem skopiuj wygenerowany atrybut d lub cały SVG.

Jak zbudować ścieżkę

  1. 1

    Klikaj, aby dodawać punkty

    Każde kliknięcie umieszcza punkt kotwiczenia na płótnie; ścieżka łączy je po kolei, zaczynając od `M` (moveto).

  2. 2

    Przeciągaj, aby zmieniać kształt

    Przeciągnij dowolny punkt, aby go przesunąć, a przyciskiem usuń ostatni. Minimum to dwa punkty.

  3. 3

    Prosto lub gładko

    Zostaw punkty połączone prostymi segmentami `L` albo włącz Wygładzanie, aby zamienić je w sześcienne krzywe Béziera `C`.

  4. 4

    Zamknij lub zostaw otwartą

    Włącz Zamknij ścieżkę, aby dodać `Z` z powrotem do początku, albo zostaw ją otwartą dla łamanej / obrysu.

  5. 5

    Skopiuj atrybut d

    Wygenerowany ciąg `d` jest czysty i oddzielony spacjami, gotowy do wklejenia do dowolnego SVG; możesz też skopiować lub pobrać cały SVG.

Ściąga z komend ścieżki SVG

Wizualny kreator powyżej generuje komendy M, L, C i Z (moveto, prosta linia, sześcienna krzywa Béziera i close-path). Pozostałe komendy poniżej to materiał referencyjny do czytania i ręcznej edycji dowolnego ciągu d, który wklejasz gdzie indziej. Wielkie litery używają współrzędnych bezwzględnych; małe, przesunięć względnych od bieżącej pozycji pióra.

Kom. Nazwa Składnia
M / m Moveto M x y
L / l Lineto L x y
H / h Linia pozioma H x
V / v Linia pionowa V y
C / c Sześcienna krzywa Béziera C x1 y1 x2 y2 x y
S / s Gładka sześcienna krzywa Béziera S x2 y2 x y
Q / q Kwadratowa krzywa Béziera Q x1 y1 x y
T / t Gładka kwadratowa krzywa Béziera T x y
A / a Łuk A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

Przykład w praktyce: zaokrąglony ptaszek

M 4 12 L 10 18 L 20 6

Trzy komendy: przejdź do (4, 12), poprowadź linię do (10, 18), poprowadź linię do (20, 6). Dodaj do ścieżki stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" i masz czysty znak zaznaczenia.

Komenda łuku jest najtrudniejsza

A rx ry x-axis-rotation large-arc-flag sweep-flag x y przyjmuje siedem liczb:

  • rx, ry, promienie elipsy
  • x-axis-rotation, obrót elipsy w stopniach
  • large-arc-flag, 0 dla krótkiego łuku, 1 dla długiego
  • sweep-flag, 0 przeciwnie do ruchu wskazówek zegara, 1 zgodnie z ruchem
  • x, y, punkt końcowy

Przełączaj flagi pojedynczo, aby zobaczyć, jak te same dwa punkty końcowe można połączyć na cztery różne sposoby.

Wskazówki

  • Trzymaj liczby małe i okrągłe. Przyciągaj współrzędne do siatki pikseli lub półpikseli; unikaj 17 miejsc po przecinku.
  • Preferuj komendy z wielkich liter, gdy ścieżka jest samodzielna. Małe litery (względne) przydają się, gdy zamierzasz później przesuwać ścieżkę.
  • Zamykaj tylko przy wypełnieniu. Jeśli ścieżka jest wyłącznie obrysowana, Z nie wnosi zmiany wizualnej, a oszczędza bajt.
  • Przepuść przez SVGO. Końcowe zera, podwójne spacje i powtórzone komendy ładnie się zwijają.

Najczęściej zadawane pytania

Współrzędne w d są w tych samych jednostkach co viewBox. Ścieżka zaprojektowana dla viewBox="0 0 24 24" umieszczona na viewBox="0 0 100 100" pojawi się w lewej górnej ćwiartce. Albo przeskaluj współrzędne, albo zmień rozmiar viewBox.

Gdy planujesz przesuwać lub powtarzać ścieżkę. Komendy względne sprawiają, że kształt jest przenośny, możesz wstawić nowe M w dowolnym miejscu, a wszystko poniżej przesunie się razem z nim.

Tak. <polyline points="0,0 10,10 20,0"> staje się <path d="M 0 0 L 10 10 L 20 0" />. Wielokąt dodaje końcowe Z. Większość optymalizatorów robi to automatycznie, bo ścieżki lepiej się kompresują.

Dla efektów rysowania użyj CSS stroke-dasharray + stroke-dashoffset. Aby przesuwać element wzdłuż ścieżki, użyj SMIL <animateMotion> z href wskazującym na id ścieżki.

Nie. Komendy ścieżki są obliczane w przeglądarce i nigdy nigdzie nie wysyłane.

Powiązane narzędzia

Próbnik kolorów Material Design

Przeglądaj paletę kolorów Material Design. Kopiuj dowolny odcień (od 50 do A700) w formacie HEX, RGB lub HSL jednym dotknięciem.

Generator papieru w kratkę

Twórz papier w kratkę do druku online: wybierz siatkę lub kropki, ustaw odstęp w mm, wybierz A4 lub Letter oraz własny kolor linii, a następnie wydrukuj lub pobierz czytelny plik SVG.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Kreator flag

Zaprojektuj w przeglądarce prostą własną flagę 3:2 z sześcioma układami, kolorami, tekstem i symbolem. Pobierz SVG lub PNG albo otwórz okno drukowania przeglądarki.

Generator papieru w linie

Twórz papier w linie do druku za darmo. Wybierz linie szerokie, standardowe lub wąskie, ustaw odstęp między liniami w mm, format strony i linię marginesu, a następnie wydrukuj lub pobierz plik SVG.

Kreator wzorów haftu krzyżykowego

Zamień plik JPEG, PNG lub WebP w schemat haftu krzyżykowego: 10–150 krzyżyków, 2–40 własnych kolorów, symbole, dokładne liczby ściegów i wymiary kanwy.

Narzędzie jest dostępne w innych językach