Softonic

Generator siatki SVG

Krok 1 / 3
Dalej

Tło siatki to podstawa narzędzi projektowych (Figma, Framer), stron docelowych skierowanych do deweloperów (Linear, Vercel) i każdego interfejsu dążącego do klimatu planu albo papieru milimetrowego. To także jedno z najlżejszych teł, jakie możesz wysłać, powtarzalny <pattern> z dwiema kreskami, zwykle poniżej 300 bajtów. Ten generator buduje siatkę o dowolnym rozmiarze komórki, grubości kreski i kolorze, abyś mógł dostroić ją do subtelnej siatki w stylu Figmy albo śmiałego wyglądu planu.

Jak zbudować siatkę

  1. 1

    Ustaw wymiary płótna

    Ustaw szerokość i wysokość od 50 do 3000 px. Wielokrotność rozmiaru komórki pozwala uniknąć częściowych komórek na krawędziach.

  2. 2

    Wybierz rozmiar komórki

    Wybierz wartość od 5 do 500 px. Spróbuj 20-40 px dla subtelnego tła, 8-12 px dla papieru milimetrowego albo 60-80 px dla wyrazistego wireframe'u.

  3. 3

    Wybierz grubość i kolor kreski

    Kreski 0,5-1 px czytają się jako czyste linie; 2+ px zaczyna wyglądać jak narysowane.

  4. 4

    Ustaw tło

    Wybierz jednolity kolor tła, który zapisze SVG. Aby uzyskać nakładkę, skopiuj SVG i zmień lub usuń tło `<rect>` we własnym kodzie.

  5. 5

    Skopiuj SVG

    Wklej do kodu albo wbuduj w data URL CSS dla kafelkowalnego background-image.

Element wzoru

Każda komórka to pojedyncza <path>, która rysuje prawą krawędź i dolną krawędź; powtarzanie tego kafelka buduje całą siatkę za pomocą tylko dwóch odcinków na komórkę, nie czterech:

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Magia tkwi w ścieżce M 40 0 L 0 0 0 40: zaczynając w (40, 0), linia do (0, 0), linia do (0, 40). To rysuje górną linię tylko do lewego górnego rogu, a potem w dół po lewej stronie, gdy się kafelkuje, tworzy kompletną siatkę bez powielonych kresek.

Przewodnik wymiarowania wzoru

Przypadek użycia Rozmiar komórki Kreska Charakter koloru
Płótno jak w Figmie 20-30 px 1 px #e5e7eb na #fafafa
Papier milimetrowy 10-12 px 0,5 px #cbd5e1 na #ffffff
Plan 40-60 px 1 px #bfdbfe na #1e3a8a
Szkielet 80 px 1,5 px #9ca3af na #ffffff
Terminal retro 16 px 1 px #22c55e na #000000

Siatka główna + pomocnicza

Jeśli chcesz wygląd planu z drobną siatką i mocniejszą siatką główną co N komórek, ułóż w stos dwa tła SVG:

.grid {
  background:
    url("data:image/svg+xml,<svg>... siatka główna ...</svg>"),
    url("data:image/svg+xml,<svg>... siatka pomocnicza ...</svg>");
}

Przeglądarka komponuje oba w jednym malowaniu, bez utraty wydajności.

Dostępność

Siatka jest czysto dekoracyjna. Zastosuj ją na pseudoelemencie (::before z position: absolute; inset: 0; z-index: -1;), aby czytniki ekranu i parsery treści widziały tylko rzeczywistą treść, nie tło.

Najczęściej zadawane pytania

Kreski SVG renderowane w subpikselowych szerokościach mogą się antyaliasować. Przyciągnij grubość kreski do całych pikseli (1, 2) i przesuń ścieżkę o 0,5 px (dla kresek 1 px), aby wyrównać do siatki pikseli.

Nie tym generatorem. Siatki heksagonalne potrzebują kafelka o szerokości sqrt(3) razy większej niż wysokość i ścieżki rysującej połowę sześciokąta. Użyj dedykowanego narzędzia do siatki heksagonalnej albo narysuj ją w Figmie.

Ten edytor tworzy jednolite tło. Aby uzyskać nakładkę, skopiuj SVG, a następnie w swoim kodzie zmień pierwszy <rect> tła na fill="transparent" albo go usuń.

Tak. Siatki SVG mają 200-500 bajtów, skalują się ostro na każdy DPR i pozwalają zmieniać kolor zmiennymi CSS. Siatka PNG ma zwykle 5-20 KB i pikselizuje się na ekranach retina.

Edytor wysyła bieżące wymiary i kolory do serwera, aby wyrenderować SVG. W trzyetapowym przepływie ustawienia trafiają też do adresu URL strony. Nie wpisuj poufnych wartości: nie ma tu przesyłania pliku źródłowego ani zapisanego projektu.

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