Softonic

SVG-Gittergenerator

Schritt 1 / 3
Weiter

Der Gitterhintergrund ist ein Grundelement von Design-Tools (Figma, Framer), entwicklerorientierten Landing-Pages (Linear, Vercel) und jeder Benutzeroberfläche, die ein Blaupause- oder Millimeterpapier-Gefühl anstrebt. Es ist auch einer der leichtesten Hintergründe, die Sie versenden können, ein sich wiederholendes <pattern> mit zwei Strichen, normalerweise unter 300 Bytes. Dieser Generator erstellt das Gitter in jeder Zellgröße, Strichstärke und Farbe, sodass Sie es für ein subtileres Figma-ähnliches Gitter oder einen kräftigen Blaupausen-Look anpassen können.

So erstellen Sie das Gitter

  1. 1

    Leinwandmaße festlegen

    Legen Sie Breite und Höhe zwischen 50 und 3.000 px fest. Ein Vielfaches der Zellgröße vermeidet Teilzellen an den Rändern.

  2. 2

    Wählen Sie eine Zellgröße

    Wählen Sie 5 bis 500 px. 20-40 px passen zu subtilen Hintergründen, 8-12 px zu Millimeterpapier und 60-80 px zu kräftigen Wireframes.

  3. 3

    Wählen Sie Strichstärke und Farbe

    0,5-1 px Striche erscheinen als klare Linien; 2+ px sieht aus, als wäre es gezeichnet.

  4. 4

    Hintergrund festlegen

    Wählen Sie die einfarbige Hintergrundfarbe, die das SVG ausgibt. Für eine Überlagerung ändern oder entfernen Sie nach dem Kopieren das Hintergrund-`<rect>` im eigenen Code.

  5. 5

    SVG kopieren

    In Markup einfügen oder inline in eine CSS-Daten-URL für ein kachelbares Hintergrundbild einfügen.

Das Pattern-Element

Jede Zelle ist ein einzelner <path>, der die rechte und die untere Kante zeichnet; das Wiederholen dieses Tiles erstellt das gesamte Gitter mit nur zwei Liniensegmenten pro Zelle, nicht vier:

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

Die Magie liegt im Pfad M 40 0 L 0 0 0 40: Beginnend bei (40, 0), Linie zu (0, 0), Linie zu (0, 40). Das zeichnet die obere Linie nur zur oberen linken Ecke und dann die linke Seite hinunter, beim Kacheln entsteht ein vollständiges Gitter ohne doppelte Striche.

Größenleitfaden für Muster

Anwendungsfall Zellgröße Strich Farbgefühl
Figma-ähnliche Leinwand 20-30 px 1 px #e5e7eb auf #fafafa
Millimeterpapier 10-12 px 0.5 px #cbd5e1 auf #ffffff
Blaupause 40-60 px 1 px #bfdbfe auf #1e3a8a
Wireframe 80 px 1.5 px #9ca3af auf #ffffff
Retro-Terminal 16 px 1 px #22c55e auf #000000

Haupt- und Nebenraster

Wenn Sie einen Blaupausen-Look mit einem feinen Gitter und einem stärkeren Hauptgitter alle N Zellen wünschen, stapeln Sie zwei SVG-Hintergründe:

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

Der Browser kombiniert beide in einem einzigen Paint, kein Leistungsabfall.

Barrierefreiheit

Das Gitter ist rein dekorativ. Wenden Sie es auf ein Pseudo-Element (::before mit position: absolute; inset: 0; z-index: -1;) an, damit Screenreader und Inhaltsparser nur den tatsächlichen Inhalt sehen, nicht den Hintergrund.

Häufig gestellte Fragen

SVG-Striche, die in Sub-Pixel-Breiten gerendert werden, können Anti-Aliasing aufweisen. Runden Sie die Strichstärke auf ganze Pixel (1, 2) und verschieben Sie den Pfad um 0,5 px (für 1 px Striche), um sich mit dem Pixelraster auszurichten.

Nicht mit diesem Generator. Hex-Gitter benötigen ein Tile, das sqrt(3) mal breiter ist als hoch, und einen Pfad, der die Hälfte eines Hexagons zeichnet. Verwenden Sie ein spezielles Hex-Gitter-Tool oder zeichnen Sie es in Figma.

Dieser Editor gibt einen einfarbigen Hintergrund aus. Für eine Überlagerung kopieren Sie das SVG und ändern Sie das erste Hintergrund-<rect> in Ihrem eigenen Code zu fill="transparent" oder entfernen Sie es.

Ja. SVG-Gitter sind 200-500 Bytes, skalieren bei jedem DPR klar und lassen sich mit CSS-Variablen in der Farbe ändern. Ein PNG-Gitter ist typischerweise 5-20 KB groß und pixeliert auf Retina-Displays.

Der Editor sendet die aktuellen Maße und Farben an unsere Server, um das SVG zu rendern. Im dreistufigen Ablauf stehen diese Einstellungen zudem in der Seiten-URL. Geben Sie keine vertraulichen Werte ein; es gibt weder einen Quelldatei-Upload noch ein gespeichertes Projekt.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

SVG-Kreistext-Generator

Text um einen kreisförmigen Pfad in SVG biegen mit Kontrolle über Radius, Rotation und Schriftart. Exportiere einsatzbereites Markup für Abzeichen, Logos und Stempel.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Vision Board erstellen

Verwandeln Sie Ihre Ziele in ein visuelles Board: Bilder hochladen, persönlichen Titel und Bildunterschriften ergänzen, Farben und Layout wählen und ein druckbares PNG herunterladen. Alles bleibt in Ihrem Browser.

Text in Handschrift

Text eingeben, eine von fünf Handschriften wählen, unliniertes, liniertes oder kariertes Papier und eine Tintenfarbe einstellen und das Blatt als PNG herunterladen. Alles im Browser gezeichnet.

Graffiti-Generator

Erstelle Graffiti-Schrift mit Tag-, Bubble-, Block-, Stencil-, Neon- und Wild-Effekten. Passe Farben an und exportiere PNG oder SVG direkt im Browser.

Tool in anderen Sprachen verfügbar