Softonic

Generator kształtów SVG

Krok 1 / 2

Większość systemów projektowych potrzebuje tylko małego słownika kształtów: koło na awatar, kwadrat na znacznik statusu, trójkąt na ikonę odtwarzania, gwiazdę na ocenę, sześciokąt na odznakę. Ten generator renderuje wszystkie siedem standardowych kształtów (koło, kwadrat, trójkąt, gwiazda, sześciokąt, pięciokąt, serce) z idealnie skalibrowaną geometrią, ramiona gwiazdy przy właściwym promieniu wewnętrznym, sześciokąty i pięciokąty zorientowane wierzchołkiem do góry, serce wyśrodkowane na płótnie, i zwraca <svg> gotowy do wklejenia.

Jak wygenerować kształt

  1. 1

    Wybierz kształt

    Koło, kwadrat, trójkąt, gwiazda, pięciokąt, sześciokąt lub serce.

  2. 2

    Ustaw rozmiar i obrys

    Rozmiar płótna w pikselach. Szerokość obrysu kontroluje grubość konturu; 0 usuwa kontur.

  3. 3

    Wybierz kolor wypełnienia i obrysu

    Dowolny kolor hex. Ustaw wypełnienie na `none` dla pustych kształtów.

  4. 4

    Dla gwiazd ustaw liczbę ramion

    Prymityw gwiazdy przyjmuje 3-12 ramion. Pięć to klasyk; siedem daje wygląd szeryfowskiej odznaki.

  5. 5

    Skopiuj SVG

    Kod używa pasującego prymitywu SVG (`<circle>`, `<rect>`, `<polygon>`, `<path>`) dla minimalnej liczby bajtów.

Geometria kształtów w skrócie

Kształt Prymityw SVG Parametry, które mają znaczenie
Koło <circle> promień, wypełnienie, obrys
Kwadrat <rect> szerokość, wysokość, obrys (bez rx tutaj)
Trójkąt <polygon> (3 punkty) równoboczny, skierowany w górę
Gwiazda <polygon> (N × 2) ramiona (3-12), stosunek promieni wewn./zewn.
Pięciokąt <polygon> (5 punktów) zorientowany wierzchołkiem do góry
Sześciokąt <polygon> (6 punktów) zorientowany wierzchołkiem do góry (obróć o 30° dla płaskiej strony)
Serce <path> z krzywymi Béziera wyśrodkowane na płótnie, symetryczne

Przykładowe wyjście: pięcioramienna gwiazda

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

Promień wewnętrzny jest ustalony na 40% promienia zewnętrznego, co odpowiada klasycznym proporcjom gwiazd z flag i trofeów.

Przypadki użycia

  • Awatary i maski, koło jako clip-path dla zdjęć profilowych.
  • Znaczniki statusu, kwadrat (zaokrąglony przez CSS border-radius lub późniejsze rx) jako prosty wskaźnik.
  • Interfejsy ocen, gwiazdy wypełnione, w połowie wypełnione i obrysowane dla skal 0-5.
  • Odznaki i herby, sześciokąt z tekstem lub ikoną w środku.
  • Przyciski sympatii, serce na polubienia, listy życzeń i zapisy.

Dlaczego prymitywy SVG zamiast ogólnej ścieżki

Użycie <circle> lub <polygon> zamiast równoważnej <path>:

  • Jest mniejsze w bajtach dla prostych kształtów (10-30 bajtów).
  • Jest łatwiejsze do animacji, atrybuty takie jak r, cx, cy, points są bezpośrednio animowalne za pomocą CSS lub GSAP.
  • Czyta się jaśniej w inspektorach i różnicach.

Dla złożonych kształtów (bloby, ikony, logo) ścieżki wygrywają, bo potrafią opisać krzywe i mieszane segmenty w jednym elemencie.

Dostępność

Wszystkie generowane SVG są domyślnie dekoracyjne. Jeśli kształt niesie znaczenie (czerwone koło = błąd, zielony ptaszek = sukces), opakuj go w rodzica z role="img" i aria-label, albo dodaj dziecko <title> wewnątrz SVG.

Najczęściej zadawane pytania

Promień wewnętrzny decyduje o „grubości” każdego ramienia. Ten generator używa wewnętrznego = 40% zewnętrznego dla wyważonego wyglądu. Aby uzyskać ostrzejszą gwiazdę, obniż stosunek w wyjściowym SVG (np. 25%); dla tępszej gwiazdy w stylu klocka Lego podnieś go do 60%.

Ten generator zwraca zwykły <rect>. Dodaj rx="8" ry="8" do rect, aby zaokrąglić rogi, albo użyj właściwości CSS border-radius, jeśli opakowujesz SVG.

Tak, opakuj SVG w rodzica z transform: rotate(30deg), albo edytuj ścieżkę: przesuń kąt początkowy o 30°. Generator domyślnie ustawia wierzchołek do góry, bo pasuje to do większości projektów odznak.

Tak. SVG używa poprawnego viewBox, współrzędnych całopikselowych i kodu o minimalnej długości. Możesz wstawić go do React, Vue, Astro, e-maila lub czystego HTML bez modyfikacji.

Nie. Parametry kształtu są używane do renderowania SVG dla bieżącego żądania i odrzucane.

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