Generatore di pattern SVG

Cos'è Generatore di pattern SVG?

Il Generatore di pattern SVG è uno strumento gratuito nel browser per web designer e sviluppatori front-end che hanno bisogno di uno sfondo leggero e ripetibile senza aprire un editor grafico. Scegli un pattern da un menu a discesa (punti, griglia, righe, diagonale, scacchiera), imposti un colore di primo piano per le forme e un colore di sfondo per la piastrella, e usi i campi numerici di scala e spessore per controllare la dimensione della piastrella e lo spessore del tratto. Il risultato è una singola piastrella disegnata come SVG nitido, progettata per ripetersi senza giunzioni, così i file restano minuscoli e il pattern si ridimensiona senza diventare sfocato. Usa l'interruttore di Formato per alternare l'output copiabile tra il markup SVG puro e una regola CSS background-image, poi copialo o scarica il file .svg per siti, schede, sezioni hero e mockup di interfaccia.

Come usare Generatore di pattern SVG

1. Scegli un pattern dal menu a discesa: Punti, Griglia, Righe, Diagonale o Scacchiera.
2. Digita o scegli un colore di primo piano per le forme e un colore di sfondo per la piastrella.
3. Imposta i campi numerici Scala (dimensione della piastrella in pixel) e Spessore (raggio del punto o spessore della linea).
4. Apri le Impostazioni e usa l'interruttore di Formato per alternare l'output tra SVG e CSS.
5. Osserva l'anteprima dal vivo ripetere il pattern, poi copia l'SVG o il CSS, oppure fai clic su Scarica per salvare il file .svg.

Esempi

Domande frequenti

Quali pattern posso generare?

Cinque pattern ripetibili: punti, griglia, righe, linee diagonali e una scacchiera. Ciascuno è disegnato come una piccola piastrella SVG che si ripete senza giunzioni, quindi resta nitido a qualsiasi dimensione e mantiene il file minuscolo.

Cosa controllano Scala e Spessore?

La scala è la dimensione di una piastrella in pixel, che stabilisce quanto distano le forme ripetute. Lo spessore è il raggio del punto o lo spessore della linea all'interno della piastrella. Lo spessore viene limitato automaticamente in rapporto alla scala, così il pattern non riempie mai eccessivamente la piastrella.

Qual è la differenza tra l'output SVG e quello CSS?

L'SVG ti fornisce il markup puro per un file .svg autonomo o per l'uso inline. Il CSS ti fornisce una regola background-image che usa un data URI più background-repeat: repeat, pronta da incollare in un foglio di stile. Usa l'interruttore di Formato nelle Impostazioni per passare dall'uno all'altro.

Posso scegliere i colori visivamente invece di digitare l'HEX?

Sì. Fai clic sul campione di colore accanto al campo di primo piano o di sfondo per aprire il selettore di colore nativo del tuo browser, oppure digita direttamente un valore HEX come #4f86f7. L'anteprima e l'output si aggiornano man mano che lo modifichi.

I miei colori o file vengono caricati da qualche parte?

No. Il pattern viene costruito interamente nel tuo browser come stringa SVG e il download viene creato localmente come Blob. Nessun colore, codice o file viene mai inviato a un server, quindi funziona offline e mantiene privato il tuo lavoro.