Generator wzorów SVG

Czym jest Generator wzorów SVG?

Generator wzorów SVG to darmowe narzędzie działające w przeglądarce, przeznaczone dla projektantów stron i programistów front-end, którzy potrzebują lekkiego, powtarzalnego tła bez otwierania edytora graficznego. Wybierasz wzór z listy rozwijanej (kropki, siatka, paski, ukośne, szachownica), ustawiasz kolor pierwszego planu dla kształtów i kolor tła dla kafelka oraz używasz pól liczbowych skali i grubości, aby kontrolować rozmiar kafelka i grubość obrysu. Wynikiem jest pojedynczy kafelek narysowany jako ostry SVG, zaprojektowany tak, by powtarzał się bezszwowo, dzięki czemu rozmiary plików pozostają znikome, a wzór skaluje się bez rozmycia. Użyj przełącznika Format, aby przełączać kopiowalny wynik między czystym kodem SVG a regułą CSS background-image, a następnie skopiuj go lub pobierz plik .svg do witryn, kart, sekcji hero i makiet interfejsu.

Jak używać Generator wzorów SVG

1. Wybierz wzór z listy rozwijanej: Kropki, Siatka, Paski, Ukośne lub Szachownica.
2. Wpisz lub wybierz kolor pierwszego planu dla kształtów i kolor tła dla kafelka.
3. Ustaw pola liczbowe Skala (rozmiar kafelka w pikselach) i Grubość (promień kropki lub grubość linii).
4. Otwórz Ustawienia i użyj przełącznika Format, aby przełączać wynik między SVG a CSS.
5. Obserwuj, jak podgląd na żywo kafelkuje wzór, a następnie skopiuj SVG lub CSS albo kliknij Pobierz, aby zapisać plik .svg.

Przykłady

Najczęściej zadawane pytania

Jakie wzory mogę wygenerować?

Pięć kafelkowalnych wzorów: kropki, siatka, paski, linie ukośne i szachownica. Każdy jest rysowany jako jeden mały kafelek SVG, który powtarza się bezszwowo, dzięki czemu pozostaje ostry w dowolnym rozmiarze, a plik znikomy.

Co kontrolują Skala i Grubość?

Skala to rozmiar jednego kafelka w pikselach, który określa, jak daleko od siebie znajdują się powtarzające się kształty. Grubość to promień kropki lub grubość linii wewnątrz kafelka. Grubość jest automatycznie ograniczana względem skali, aby wzór nigdy nie przepełnił kafelka.

Jaka jest różnica między wynikiem SVG a CSS?

SVG daje czysty kod dla samodzielnego pliku .svg lub użycia inline. CSS daje regułę background-image używającą data URI plus background-repeat: repeat, gotową do wklejenia do arkusza stylów. Użyj przełącznika Format w Ustawieniach, aby przełączać między nimi.

Czy mogę wybierać kolory wizualnie zamiast wpisywać HEX?

Tak. Kliknij próbkę koloru obok pola pierwszego planu lub tła, aby otworzyć natywny próbnik kolorów przeglądarki, albo wpisz bezpośrednio wartość HEX, taką jak #4f86f7. Podgląd i wynik aktualizują się w miarę wprowadzania zmian.

Czy moje kolory lub pliki są gdziekolwiek przesyłane?

Nie. Wzór jest budowany w całości w Twojej przeglądarce jako ciąg SVG, a pobieranie jest tworzone lokalnie jako Blob. Żadne kolory, kod ani pliki nigdy nie są wysyłane na serwer, więc działa offline i zachowuje Twoją pracę w prywatności.