Værktøjet sætter mønsteret sammen som ren SVG-markup, så resultatet er knivskarpt ved enhver zoom eller skærmtæthed og som regel kun fylder nogle hundrede bytes, langt mindre end en PNG-flise. Kopier CSS'en for at lægge et gentagende background-image direkte ind i et stylesheet, eller hent selve SVG-filen for at bruge den som et aktiv. Intet du laver sendes nogen steder hen: mønsteret tegnes udelukkende på din enhed, så det bliver ved med at virke offline, når siden først er indlæst.
Gratis SVG mønster generator
Kører helt i din browser - ingen upload, ingen tilmelding.
Mønster
Stil
Forgrund
Baggrund
Hvad er en SVG mønster generator?
En SVG mønster generator bygger en sømløs, gentagende baggrund ud fra geometriske former som prikker, linjer, gitre og zigzag. Du vælger form, farver, flisestørrelse og linjetykkelse, og værktøjet leverer en lille, opløsningsuafhængig SVG plus færdig CSS til at indsætte. Alt genereres i browseren, så intet uploades.
Sådan gør du
- 1Vælg et mønster. Vælg en form - prikker, ringe, gitter, diagonal, krydsskravering, plus, zigzag og flere - blandt swatches.
- 2Sæt farver og form. Vælg en forgrunds- og baggrundsfarve (eller gør baggrunden transparent), og justér så størrelse, tykkelse og opacitet mens forhåndsvisningen opdateres i realtid.
- 3Kopier eller download. Skift mellem CSS- og SVG-fanerne, kopier koden, eller download selve .svg-filen til brug hvor som helst.
Hvem er det til
- Webudviklere der vil tilføje en diskret, letvægts baggrundstekstur til en hero, et kort eller en sektion uden at sende en billedfil med.
- UI- og brand-designere der eksperimenterer med sømløse teksturer i brandets farver og eksporterer dem som skarpe SVG-aktiver.
- Bygherrer af e-mails og slides der har brug for et lille, flisebart mønster som gengives skarpt på enhver skærm.
- Studerende og hobbyfolk der lærer, hvordan SVG's
<pattern>og CSS-baggrundsflisning fungerer ved at justere værdier og læse output. - Indholdsskabere der hurtigt genererer dekorative baggrunde til thumbnails, bannere og mockups.
Ofte stillede spørgsmål
Er SVG mønster generatoren gratis?
Ja, den er helt gratis uden tilmelding og uden grænser. Hvert mønster genereres i din browser, så du kan lave og kopiere lige så mange du vil, også offline når siden er indlæst en gang.
Er mønstrene virkelig sømløse?
Ja. Hver form er tegnet så dens kanter passer nøjagtigt sammen med naboflisen, og mønsteret gentager sig på et fast gitter. Både CSS'ens background-image og SVG'ens <pattern>-element flisebelægger den samme celle kant mod kant uden synlige sømme.
Skal jeg bruge CSS- eller SVG-output?
Brug CSS'en til at indsætte en gentagende baggrund direkte i et stylesheet - det er hurtigst til websites. Brug SVG-downloaden når du har brug for en selvstændig fil, for eksempel som et billedaktiv, i et designværktøj, eller indlejret direkte i HTML.
Hvorfor bruge et SVG-mønster frem for en PNG?
SVG er vektorbaseret, så det forbliver knivskarpt ved enhver zoom eller skærmtæthed og pixelerer aldrig. En geometrisk SVG-flise fylder som regel kun nogle hundrede bytes, langt mindre end en tilsvarende PNG, og du kan skifte dens farver når som helst uden at eksportere på ny.
Kan jeg gøre baggrunden transparent?
Ja. Sæt flueben ved Transparent, så droppes baggrundsfyldet, og mønsteret viser kun forgrundsformerne. Det lader dig lægge mønsteret oven på en eksisterende farve, et billede eller en gradient.
Bliver mit design uploadet nogen steder?
Nej. Hele mønsteret bygges lokalt i din browser med ren SVG-markup, og intet sendes til en server, så dine farver og indstillinger forbliver private på din enhed.