Verktøyet setter sammen mønsteret som ren SVG-markup, så resultatet er knivskarpt uansett zoom eller skjermtetthet, og fyller som regel bare noen hundre bytes, langt mindre enn en PNG-flis. Kopier CSS-en for å legge et gjentagende background-image rett inn i et stilark, eller last ned selve SVG-filen for å bruke den som en ressurs. Ingenting du lager sendes noe sted: mønsteret tegnes utelukkende på enheten din, så det fortsetter å virke offline når siden først er lastet inn.
Gratis SVG mønstergenerator
Kjører helt i nettleseren - ingen opplasting, ingen registrering.
Mønster
Stil
Forgrunn
Bakgrunn
Hva er en SVG mønstergenerator?
En SVG mønstergenerator bygger en sømløs, gjentagende bakgrunn av geometriske former som prikker, linjer, rutenett og sikksakk. Du velger form, farger, flisstørrelse og linjetykkelse, og verktøyet leverer en liten, oppløsningsuavhengig SVG pluss ferdig CSS til å lime inn. Alt genereres i nettleseren din, så ingenting lastes opp.
Slik bruker du verktøyet
- 1Velg et mønster. Velg en form - prikker, ringer, rutenett, diagonal, kryssraster, pluss, sikksakk og flere - blant swatchene.
- 2Still inn farger og form. Velg en forgrunns- og bakgrunnsfarge (eller gjør bakgrunnen transparent), og juster deretter glidebryterne for størrelse, tykkelse og opasitet mens forhåndsvisningen oppdateres i sanntid.
- 3Kopier eller last ned. Bytt mellom CSS- og SVG-fanene, kopier koden, eller last ned selve .svg-filen til bruk hvor som helst.
Hvem passer det for
- Webutviklere som vil legge en diskret, lettvekts bakgrunnstekstur til en hero, et kort eller en seksjon uten å sende med en bildefil.
- UI- og merkevaredesignere som prototyper sømløse teksturer i egne farger og eksporterer dem som skarpe SVG-ressurser.
- De som lager e-poster og presentasjoner og trenger et lite, flisbart mønster som gjengis skarpt på alle skjermer.
- Studenter og hobbyfolk som lærer hvordan SVG-ens
<pattern>og CSS-bakgrunnsflising fungerer ved å justere verdier og lese output. - Innholdsskapere som raskt genererer dekorative bakgrunner til miniatyrbilder, bannere og mockups.
Vanlige spørsmål
Er SVG mønstergeneratoren gratis?
Ja, den er helt gratis uten registrering og uten begrensninger. Hvert mønster genereres i nettleseren din, så du kan lage og kopiere så mange du vil, også offline når siden er lastet inn en gang.
Er mønstrene virkelig sømløse?
Ja. Hver form tegnes slik at kantene passer nøyaktig sammen med naboflisen, og mønsteret gjentar seg på et fast rutenett. Både CSS-ens background-image og SVG-ens <pattern>-element flislegger den samme cellen kant i kant uten synlige sømmer.
Bør jeg bruke CSS- eller SVG-output?
Bruk CSS-en for å lime en gjentagende bakgrunn rett inn i et stilark - det er raskest for nettsteder. Bruk SVG-nedlastingen når du trenger en frittstående fil, for eksempel som en bilderessurs, i et designverktøy, eller lagt direkte inn i HTML.
Hvorfor bruke et SVG-mønster fremfor en PNG?
SVG er vektorbasert, så det holder seg knivskarpt uansett zoom eller skjermtetthet og pikselerer aldri. En geometrisk SVG-flis fyller som regel bare noen hundre bytes, langt mindre enn en tilsvarende PNG, og du kan endre fargene når som helst uten å eksportere på nytt.
Kan jeg gjøre bakgrunnen transparent?
Ja. Kryss av for Transparent, så fjernes bakgrunnsfyllet, og mønsteret viser bare forgrunnsformene. Slik kan du legge mønsteret oppå en eksisterende farge, et bilde eller en gradient.
Blir designet mitt lastet opp noe sted?
Nei. Hele mønsteret bygges lokalt i nettleseren din med ren SVG-markup, og ingenting sendes til en server, så fargene og innstillingene dine forblir private på enheten din.