Softonic

Generator wzoru pasków SVG

Krok 1 / 4
Dalej

Płaskie wzory pasków to jeden z najpewniejszych sposobów na wypełnienie sekcji hero, separatora lub pustej karty bez opierania się na zdjęciu ze stocka. Ten generator zwraca czysty SVG oparty na <pattern> z dwoma kolorami, konfigurowalną szerokością paska i kątem obrotu, dzięki czemu ten sam plik skaluje się ostro od mobilnego hero 320px po desktopowy baner 4K.

Jak wygenerować wzór pasków SVG

  1. 1

    Ustaw rozmiar płótna

    Wpisz potrzebną szerokość i wysokość: SVG używa viewBox, więc i tak będzie skalować się na stronie.

  2. 2

    Wybierz szerokość paska

    Mniejsze wartości dają ciasne prążki; większe dają pasy w stylu markizy.

  3. 3

    Wybierz kąt

    Użyj 0 dla poziomych, 90 dla pionowych lub 45 dla klasycznych ukośnych.

  4. 4

    Wybierz dwa kolory

    Ustaw wartości hex dla pierwszego planu i tła: przezroczyste paski też są w porządku.

  5. 5

    Skopiuj SVG

    Wklej go inline, zapisz jako .svg albo wstaw do tła CSS za pomocą konwertera SVG na CSS.

Jak budowany jest wzór

SVG definiuje mały <pattern> o rozmiarze dwóch pasków, a następnie wypełnia <rect> pokrywający cały viewBox za pomocą fill="url(#stripes)". Ponieważ wzory powtarzają się automatycznie, zmiana rozmiaru płótna nie zmienia grubości paska, tylko to, ile pasków się zmieści.

patternTransform="rotate(angle)" to właśnie to, co daje ukosy bez przeliczania geometrii. Wzór nadal kafelkuje bezszwowo pod dowolnym kątem.

Ściąga z szerokości pasków

Szerokość paska Wygląd Typowe zastosowanie
2 - 6 px Drobny prążek Tła formularzy, subtelna tekstura
10 - 20 px Wyważony ukos Sekcje hero, karty, separatory
30 - 60 px Wyrazista markiza Banery landing page, grafika pustego stanu
80 px+ Bloki w skali plakatu Nagłówki, które muszą być czytelne z daleka

Wskazówki

  • Trzymaj niski kontrast (na przykład #f5f5f5 na #ffffff), gdy wzór jest pod tekstem.
  • Kąty 15, 30 i 45 stopni wyglądają bardziej „zaprojektowanie” niż ścisłe 0 czy 90.
  • Aby animować paski, opakuj <rect> w <g> i przesuwaj go w pętli; ponieważ wzór kafelkuje, masz nieskończony scroll za darmo.
  • Wyjście to czysty SVG bez zewnętrznych odwołań, więc bezpiecznie jest wstawić go inline w HTML lub szablonach e-mail, które usuwają znaczniki <script>.

Najczęściej zadawane pytania

Tak. Zapisz wyjście jako plik .svg i odwołaj się do niego za pomocą background-image: url(...) oraz background-repeat: repeat, albo wrzuć go do konwertera SVG na CSS, aby uzyskać inline data URL.

Ukosy są wygładzane przez przeglądarkę. Jeśli widzisz obwódki, zwiększ szerokość paska o 1 - 2 piksele albo zrasteryzuj do większego PNG i pomniejsz.

Selektory kolorów tworzą kolory jednolite, więc aby uzyskać przezroczysty pasek, edytuj wynikowy plik SVG: ustaw jeden fill na none lub na 8-cyfrowy hex z kanałem alfa, np. #00000000. To, co znajduje się za SVG, zacznie prześwitywać.

Wyjście jest twoje, to po prostu wygenerowany kod na podstawie twoich danych, bez zastrzeżonych kształtów czy zasobów osób trzecich.

Twoje dwa kolory oraz szerokość i wysokość są wysyłane na nasz serwer tylko po to, aby wygenerować podgląd SVG; nic nie jest przechowywane ani zapisywane w logach, a żadne pliki nie są przesył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