Softonic

SVG randmönster-generator

Steg 1 / 4
Nästa

Platta randmönster är ett av de mest pålitliga sätten att fylla en hero-sektion, avgränsare eller tomt kort utan att luta sig mot ett arkivfoto. Den här generatorn matar ut en ren <pattern>-baserad SVG med två färger, en konfigurerbar randbredd och en rotationsvinkel, så att samma fil skalar skarpt från en 320px mobil-hero till en 4K-skrivbordsbanderoll.

Så genererar du ett SVG randmönster

  1. 1

    Ställ in arbetsytans storlek

    Ange den bredd och höjd du behöver: SVG:n använder en viewBox så den skalar fortfarande på sidan.

  2. 2

    Välj randbredd

    Mindre värden ger en tät smalrandning; större värden ger markisliknande band.

  3. 3

    Välj vinkeln

    Använd 0 för horisontellt, 90 för vertikalt eller 45 för klassiska diagonaler.

  4. 4

    Välj två färger

    Ställ in hex-värdena för förgrund och bakgrund: transparenta ränder fungerar också.

  5. 5

    Kopiera SVG:n

    Klistra in den inline, spara den som en .svg, eller släpp den i en CSS-bakgrund via SVG-till-CSS-omvandlaren.

Så byggs mönstret

SVG:n definierar ett litet <pattern> i storleken av två ränder, fyller sedan en <rect> som täcker hela viewBox med fill="url(#stripes)". Eftersom mönster upprepas automatiskt ändrar inte ändring av arbetsytans storlek randtjockleken, bara hur många ränder som får plats.

patternTransform="rotate(angle)" är vad som ger dig diagonaler utan att behöva räkna om geometrin. Mönstret kaklar fortfarande sömlöst i valfri vinkel.

Fusklapp för randbredd

Randbredd Utseende Vanlig användning
2 - 6 px Fin smalrandning Formulärbakgrunder, subtil textur
10 - 20 px Balanserad diagonal Hero-sektioner, kort, avgränsare
30 - 60 px Djärv markis Landningssidesbanderoller, tomt-läge-konst
80 px+ Affischskala-block Sidhuvuden som behöver synas på avstånd

Tips

  • Håll kontrasten låg (till exempel #f5f5f5 över #ffffff) när mönstret sitter bakom text.
  • Vinklar på 15, 30 och 45 grader känns mer “designade” än ett strikt 0 eller 90.
  • För att animera ränderna, linda <rect> i ett <g> och translatera det i loop; eftersom mönstret kaklar får du oändlig rullning gratis.
  • Utdatan är ren SVG utan externa referenser, så det är säkert att inline:a i HTML- eller e-postmallar som tar bort <script>-taggar.

Vanliga frågor

Ja. Spara utdatan som en .svg-fil och referera till den med background-image: url(...) och background-repeat: repeat, eller mata in den i SVG-till-CSS-omvandlaren för att få en inline data-URL.

Diagonaler antialiasas av webbläsaren. Om du ser fransning, öka randbredden med 1 - 2 pixlar eller rasterisera till en större PNG och skala ner.

Färgväljarna ger enfärgade färger, så gör en rand genomskinlig genom att redigera den utmatade SVG:n: sätt ett fill till none, eller till en 8-siffrig hex med alfa som #00000000. Det som ligger bakom SVG:n syns då igenom.

Utdatan är din, det är bara genererad märkning baserad på dina inmatningar, utan varumärkesskyddade former eller tredjepartstillgångar.

Dina två färger samt bredden och höjden skickas till vår server enbart för att rendera SVG-förhandsvisningen; inget lagras eller loggas, och inga filer laddas upp.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Konverterare för bildformat

Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.

Flaggskapare

Formge en enkel egen 3:2-flagga i webbläsaren med sex layouter, färger, text och en symbol. Hämta SVG eller PNG, eller öppna webbläsarens utskriftsdialog.

Verktyget finns på andra språk