Softonic

Generatore di forme SVG

Passaggio 1 / 2

La maggior parte dei sistemi di design ha bisogno solo di un piccolo vocabolario di forme: un cerchio per un avatar, un quadrato per un chip di stato, un triangolo per un’icona di riproduzione, una stella per una valutazione, un esagono per un badge. Questo generatore rende tutte e sette le forme standard (cerchio, quadrato, triangolo, stella, esagono, pentagono, cuore) con geometria perfettamente calibrata, punti della stella al corretto raggio interno, esagoni e pentagoni orientati con la punta in alto, cuore centrato sulla tela, e restituisce il <svg> pronto per essere incollato.

Come generare una forma

  1. 1

    Scegli una forma

    Cerchio, quadrato, triangolo, stella, pentagono, esagono o cuore.

  2. 2

    Imposta dimensione e contorno

    Dimensione della tela in pixel. La larghezza del contorno controlla il peso del contorno; 0 rimuove il contorno.

  3. 3

    Scegli colore di riempimento e contorno

    Qualsiasi colore esadecimale. Imposta il riempimento su `none` per forme vuote.

  4. 4

    Per le stelle, imposta i punti

    Il primitivo stella accetta da 3 a 12 punti. Cinque è classico; sette dà un aspetto da distintivo dello sceriffo.

  5. 5

    Copia l'SVG

    Il markup utilizza il primitivo SVG corrispondente (`<circle>`, `<rect>`, `<polygon>`, `<path>`) per un numero minimo di byte.

Geometria delle forme a colpo d’occhio

Forma Primitivo SVG Parametri che contano
Cerchio <circle> raggio, riempimento, contorno
Quadrato <rect> larghezza, altezza, contorno (niente rx qui)
Triangolo <polygon> (3 punti) equilatero, puntato in alto
Stella <polygon> (N × 2) punti (3-12), rapporto raggio interno/esterno
Pentagono <polygon> (5 punti) orientato con la punta in alto
Esagono <polygon> (6 punti) orientato con la punta in alto (ruota di 30° per piatto)
Cuore <path> con Bézier centrato sulla tela, simmetrico

Esempio di output: una stella a cinque punte

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

Il raggio interno è fissato al 40% del raggio esterno, che corrisponde alle proporzioni classiche utilizzate nelle stelle di bandiera e trofeo.

Casi d’uso

  • Avatar e maschere, cerchio come clip-path per foto profilo.
  • Chip di stato, quadrato (arrotondato tramite CSS border-radius o un successivo rx) come semplice indicatore di bandiera.
  • Interfacce di valutazione, stelle riempite, mezze riempite e contornate per scale da 0 a 5.
  • Badge e stemmi, esagono con testo o icona interna.
  • Pulsanti di affetto, cuore per mi piace, liste dei desideri e salvataggi.

Perché i primitivi SVG invece di un percorso generico

Utilizzare <circle> o <polygon> invece dell’equivalente <path>:

  • È più piccolo in byte per forme semplici (10-30 byte).
  • È più facile da animare, attributi come r, cx, cy, points sono direttamente animabili con CSS o GSAP.
  • Si legge più chiaramente negli ispettori e nei diff.

Per forme complesse (blob, icone, loghi), i percorsi vincono perché possono descrivere curve e segmenti misti in un singolo elemento.

Accessibilità

Tutti gli SVG generati sono decorativi per impostazione predefinita. Se la forma ha un significato (un cerchio rosso = errore, un segno di spunta verde = successo), avvolgila in un genitore con role="img" e un aria-label, oppure aggiungi un figlio <title> all’interno dell’SVG.

Domande frequenti

Il raggio interno determina la “grassezza” di ciascun braccio. Questo generatore utilizza un raggio interno = 40% di quello esterno per un aspetto bilanciato. Per ottenere una stella più affilata, abbassa il rapporto nell’SVG di output (ad esempio 25%); per una stella più smussata, simile a un mattoncino Lego, aumentalo al 60%.

Questo generatore restituisce un semplice <rect>. Aggiungi rx="8" ry="8" al rettangolo per arrotondare gli angoli, oppure utilizza la proprietà CSS border-radius se avvolgi l’SVG.

Sì, avvolgi l’SVG in un genitore con transform: rotate(30deg), oppure modifica il percorso: sposta l’angolo iniziale di 30°. Il generatore predefinisce la punta in alto perché corrisponde alla maggior parte dei design dei badge.

Sì. L’SVG utilizza un corretto viewBox, coordinate a pixel interi e markup di lunghezza minima. Puoi inserirlo in React, Vue, Astro, email o HTML semplice senza modifiche.

No. I parametri della forma vengono utilizzati per generare l’SVG per la richiesta corrente e vengono scartati.

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