Softonic

Generatore di Griglie SVG

Passaggio 1 / 3
Avanti

Lo sfondo a griglia è un elemento fondamentale degli strumenti di design (Figma, Framer), delle pagine di atterraggio orientate agli sviluppatori (Linear, Vercel) e di qualsiasi interfaccia che mira a un aspetto da progetto o carta millimetrata. È anche uno degli sfondi più leggeri che puoi utilizzare, un <pattern> ripetuto con due tratti, di solito sotto i 300 byte. Questo generatore costruisce la griglia con qualsiasi dimensione della cella, peso del tratto e colore, così puoi adattarlo per una griglia sottile in stile Figma o un aspetto audace da progetto.

Come costruire la griglia

  1. 1

    Imposta le dimensioni della tela

    Imposta larghezza e altezza fra 50 e 3.000 px. Un multiplo della dimensione della cella evita celle parziali ai bordi.

  2. 2

    Scegli una dimensione della cella

    Scegli da 5 a 500 px. Prova 20-40 px per sfondi sottili, 8-12 px per carta millimetrata e 60-80 px per wireframe marcati.

  3. 3

    Scegli larghezza e colore del tratto

    Tratti di 0.5-1 px si leggono come linee pulite; 2+ px iniziano a sembrare disegnati.

  4. 4

    Imposta lo sfondo

    Scegli il colore di sfondo pieno emesso dall'SVG. Per una sovrapposizione, copia l'SVG e modifica o rimuovi il `<rect>` di sfondo nel tuo codice.

  5. 5

    Copia l'SVG

    Incolla nel markup o inline in un URL di dati CSS per un'immagine di sfondo ripetibile.

L’elemento pattern

Ogni cella è un singolo <path> che disegna il bordo destro e il bordo inferiore; ripetere questo tassello costruisce l’intera griglia con solo due segmenti di linea per cella, non quattro:

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

La magia è nel path M 40 0 L 0 0 0 40: partendo da (40, 0), linea a (0, 0), linea a (0, 40). Questo disegna solo la linea superiore fino all’angolo in alto a sinistra e poi giù lungo il lato sinistro, quando viene ripetuto, crea una griglia completa senza tratti duplicati.

Guida alle dimensioni del pattern

Caso d’uso Dimensione cella Tratto Sensazione colore
Tela in stile Figma 20-30 px 1 px #e5e7eb su #fafafa
Carta millimetrata 10-12 px 0.5 px #cbd5e1 su #ffffff
Progetto 40-60 px 1 px #bfdbfe su #1e3a8a
Wireframe 80 px 1.5 px #9ca3af su #ffffff
Terminal retro 16 px 1 px #22c55e su #000000

Griglie maggiori + minori

Se vuoi un aspetto da progetto con una griglia fine e una griglia principale più forte ogni N celle, sovrapponi due sfondi SVG:

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

Il browser compone entrambi in una sola pittura, nessun impatto sulle prestazioni.

Accessibilità

La griglia è puramente decorativa. Applicala a un pseudo-elemento (::before con position: absolute; inset: 0; z-index: -1;) in modo che i lettori di schermo e i parser di contenuti vedano solo il contenuto reale, non lo sfondo.

Domande frequenti

I tratti SVG renderizzati a larghezze sub-pixel possono avere anti-aliasing. Imposta la larghezza del tratto su pixel interi (1, 2) e sposta il path di 0.5 px (per tratti di 1 px) per allinearlo con la griglia dei pixel.

Non con questo generatore. Le griglie esagonali necessitano di un tassello che è sqrt(3) volte più largo di quanto è alto e di un path che disegna metà di un esagono. Usa uno strumento dedicato per griglie esagonali o disegnalo in Figma.

Questo editor emette uno sfondo pieno. Per creare una sovrapposizione, copia l’SVG e imposta il primo <rect> di sfondo su fill="transparent" oppure rimuovilo nel tuo codice.

Sì. Le griglie SVG sono 200-500 byte, si scalano a ogni DPR in modo nitido e ti permettono di cambiare il colore con le variabili CSS. Una griglia PNG è tipicamente 5-20 KB e si pixelizza sugli schermi retina.

L’editor invia dimensioni e colori correnti al server per generare l’SVG. Nel flusso in tre passaggi queste impostazioni compaiono anche nell’URL. Non inserire valori riservati: non vengono caricati file sorgente e non viene salvato alcun progetto.

Strumenti correlati

Selettore Colori Material Design

Sfoglia la palette di colori Material Design. Copia qualsiasi tonalità (da 50 a A700) in HEX, RGB o HSL con un solo tocco.

Convertitore Pantone in HEX

Converti i colori Pantone PMS nei valori HEX, RGB e CMYK più vicini per la corrispondenza su schermo e stampa, con anteprima del campione.

Convertitore da foto a disegno

Trasforma foto JPEG, PNG o WebP in disegni a grafite, matita morbida o carboncino nel browser, quindi esporta in PNG o JPEG.

Creatore di giornali

Crea una prima pagina di giornale con titoli e articoli tuoi, poi copia o scarica il testo semplice oppure usa la finestra di stampa del browser.

Creatore di provini a contatto

Disponi le foto su provini a contatto A4 o Letter con didascalie, ritaglio e anteprima, quindi scarica le pagine JPEG o un PDF.

Convertitore di formato immagine

Converti immagini in JPG, PNG o WebP direttamente nel browser, con controllo della qualità per i formati con perdita e trasparenza conservata in PNG e WebP.

Strumento disponibile in altre lingue