Softonic

Generator przerywników SVG

Krok 1 / 3
Dalej

Strony docelowe rzadko już mają twarde poziome szwy między kolorowymi sekcjami, przenikają się one przez zakrzywioną falę, ukośny skos, rząd trójkątów. Wszystko to proste kształty SVG: viewBox dopasowany do szerokości strony, wielokąt lub ścieżka wypełniona kolorem tła następnej sekcji, zakotwiczona u dołu sekcji wychodzącej. Ten generator buduje ten kształt w pięciu stylach (fala, krzywa, skos, trójkąty, schody) o dowolnej szerokości, wysokości, kolorze i odbiciu w pionie, jakich potrzebujesz.

Jak zbudować przerywnik sekcji

  1. 1

    Wybierz styl

    Fala (krzywa S), krzywa (pojedynczy łuk), skos (przekątna), trójkąty (zygzak), schody (stopniowane).

  2. 2

    Ustaw szerokość i wysokość

    Szerokość = szerokość strony (1200-1920). Wysokość = jak wysoki jest przerywnik (zwykle 50-200 px).

  3. 3

    Wybierz wypełnienie

    Wybierz kolor tła następnej sekcji, aby przerywnik wtapiał się w nią bezszwowo.

  4. 4

    Odbij w pionie

    Przełącz flipY, aby odwrócić kształt, jeśli potrzebujesz go skierowanego w górę zamiast w dół.

  5. 5

    Skopiuj SVG

    Wklej u dołu sekcji wychodzącej albo u góry przychodzącej. Użyj `preserveAspectRatio="none"` (już dołączone), aby kształt rozciągał się z viewportem.

Pięć stylów i kiedy ich używać

Styl Klimat Dobry między
Fala Miękki, przyjazny Hero → opinie, pastelowe palety
Krzywa Czysty, elegancki Siatka funkcji → CTA, minimalistyczny design
Skos Nowoczesny, śmiały Ciemne hero → jasna treść, motywy o wysokim kontraście
Trójkąty Ostry, techniczny Narzędzia dla deweloperów, pulpity SaaS
Schody Uporządkowany, retro Tabele cenowe, układy redakcyjne

Wstawianie przerywnika do kodu

Typowe umieszczenie u dołu sekcji:

<section class="hero">
  <!-- treść hero -->
  <div class="divider" aria-hidden="true">
    <!-- wklej SVG tutaj -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Dlaczego preserveAspectRatio="none"

Domyślnie SVG skaluje się jednolicie. Dla przerywnika obejmującego viewport chcesz, aby kształt rozciągał się poziomo, jedna fala od krawędzi do krawędzi, a nie maleńka fala wyśrodkowana na stronie. preserveAspectRatio="none" mówi silnikowi renderującemu, aby swobodnie zniekształcał proporcje, co jest dokładnie tym, czego potrzebują przerywniki.

Dostępność i SEO

  • Oznacz wrapper aria-hidden="true", aby czytniki ekranu pomijały dekoracyjny kształt.
  • Trzymaj SVG poniżej kilku kilobajtów, duże wbudowane SVG opóźniają parsowanie DOM. Wyniki tutaj są znacznie poniżej 1 KB.
  • Unikaj obrazów rastrowych do przerywników; pikselizują się na ultraszerokich monitorach i ekranach retina.

Najczęściej zadawane pytania

Niekoniecznie. Atrybut width SVG ustawia rozmiar wewnętrzny, ale z preserveAspectRatio="none" i CSS width: 100% kształt wypełnia dowolny kontener. Ustawienie szerokości na okrągłą liczbę jak 1200 utrzymuje liczby w ścieżce czytelne.

To zwykle domyślna linia bazowa elementu SVG w wierszu. Dodaj display: block (lub vertical-align: bottom) do SVG, aby usunąć szczelinę.

Tak. Wygeneruj dwa lub trzy przerywniki o różnych kolorach i przezroczystościach i ułóż je w stos. Przesuń każdy o kilka pikseli za pomocą margin-top lub CSS transform dla efektu paralaksy.

Wygenerowany SVG jest statyczny. Dla animowanych fal zastosuj klatkę kluczową CSS transform: translateX() do wrappera albo użyj dwóch kopii obok siebie i przesuwaj je.

Nie. Nic nie jest przechowywane, SVG jest renderowany od nowa za każdym razem z bieżących wartości formularza.

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