Softonic

SVG-rutnätsgenerator

Steg 1 / 3
Nästa

Rutnätsbakgrunden är ett återkommande inslag i designverktyg (Figma, Framer), utvecklarinriktade landningssidor (Linear, Vercel) och alla gränssnitt som strävar efter en rit- eller rutpapperskänsla. Det är också en av de lättaste bakgrunderna du kan skicka, ett upprepande <pattern> med två streck, oftast under 300 byte. Den här generatorn bygger rutnätet i valfri cellstorlek, linjetyngd och färg, så att du kan finjustera det för ett subtilt rutnät i Figma-stil eller ett djärvt ritningsutseende.

Så bygger du rutnätet

  1. 1

    Ställ in arbetsytans dimensioner

    Ställ in bredd och höjd från 50 till 3 000 px. En multipel av cellstorleken undviker delvisa celler vid kanterna.

  2. 2

    Välj en cellstorlek

    Välj från 5 till 500 px. Prova 20-40 px för subtila bakgrunder, 8-12 px för rutpapper och 60-80 px för tydliga wireframes.

  3. 3

    Välj linjebredd och färg

    0.5-1 px-streck läses som rena linjer; 2+ px börjar se påritat ut.

  4. 4

    Ställ in bakgrunden

    Välj den solida bakgrundsfärg som SVG:n ska skapa. För en överlagring kopierar du SVG:n och ändrar eller tar bort bakgrundens `<rect>` i din egen kod.

  5. 5

    Kopiera SVG:n

    Klistra in i märkning eller inline:a i en CSS-data-URL för en kakelbar background-image.

Pattern-elementet

Varje cell är en enda <path> som ritar den högra kanten och den nedre kanten; att upprepa denna kakel bygger hela rutnätet med bara två linjesegment per cell, inte fyra:

<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)"/>

Magin ligger i pathen M 40 0 L 0 0 0 40: börja vid (40, 0), linje till (0, 0), linje till (0, 40). Det ritar den övre linjen endast till det övre vänstra hörnet och sedan ner längs vänster sida, när det kaklas skapar det ett komplett rutnät utan duplicerade streck.

Guide för mönsterdimensionering

Användningsfall Cellstorlek Streck Färgkänsla
Figma-liknande arbetsyta 20-30 px 1 px #e5e7eb på #fafafa
Rutpapper 10-12 px 0.5 px #cbd5e1 på #ffffff
Ritning 40-60 px 1 px #bfdbfe på #1e3a8a
Wireframe 80 px 1.5 px #9ca3af på #ffffff
Retroterminal 16 px 1 px #22c55e på #000000

Större + mindre rutnät

Om du vill ha ett ritningsutseende med ett fint rutnät och ett starkare huvudrutnät var N:e cell, stapla två SVG-bakgrunder:

.grid {
  background:
    url("data:image/svg+xml,<svg>... större rutnät ...</svg>"),
    url("data:image/svg+xml,<svg>... mindre rutnät ...</svg>");
}

Webbläsaren komponerar båda i en målning, ingen prestandaförlust.

Tillgänglighet

Rutnätet är rent dekorativt. Applicera det på ett pseudoelement (::before med position: absolute; inset: 0; z-index: -1;) så att skärmläsare och innehållstolkar bara ser det faktiska innehållet, inte bakgrunden.

Vanliga frågor

SVG-streck renderade i subpixelbredder kan antialiasa. Snäpp linjebredden till hela pixlar (1, 2) och förskjut pathen med 0.5 px (för 1 px-streck) för att passa pixelrutnätet.

Inte med den här generatorn. Hex-rutnät behöver en kakel som är sqrt(3) gånger bredare än den är hög och en path som ritar halva en hexagon. Använd ett dedikerat hex-rutnätsverktyg eller rita det i Figma.

Den här editorn skapar en solid bakgrund. För en överlagring kopierar du SVG:n och ändrar den första bakgrunds-<rect> till fill="transparent" eller tar bort den i din egen kod.

Ja. SVG-rutnät är 200-500 byte, skalar skarpt till varje DPR och låter dig ändra färgen med CSS-variabler. Ett PNG-rutnät är oftast 5-20 KB och pixelerar på retina-displayer.

Editorn skickar aktuella mått och färger till servern för att rendera SVG:n. I trestegsflödet finns inställningarna också i sidans URL. Ange inte konfidentiella värden; ingen källfil laddas upp och inget projekt sparas.

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