Key Takeaways

SVG supporta gradienti lineari, gradienti radiali e pattern a mosaico ripetitivo — tutti definiti in XML
I gradienti multi-stop con trasparenza permettono effetti fluidi di dissolvenza, spotlight e luminescenza
I pattern usano patternUnits e patternTransform per il controllo completo su affiancamento e rotazione
I gradienti possono essere annidati nei pattern e animati con SMIL o CSS per visual dinamici
Ottimizza limitando gli stop dei gradienti ed evitando pattern complessi in contesti animati

Oltre i colori piatti

I gradienti e pattern SVG aggiungono profondità e interesse visivo alla grafica vettoriale. Questa guida esplora tecniche avanzate per creare effetti professionali.

Tecniche di pattern vettoriali e gradienti nella grafica SVG — Gradienti e pattern trasformano forme SVG piatte in visual ricchi e texturizzati

Gradienti lineari

Struttura di base

xml

<defs>
  <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="100%" stop-color="#0000ff"/>
  </linearGradient>
</defs>

<rect fill="url(#gradient1)" width="200" height="100"/>

Controllo della direzione

xml

<!-- Orizzontale -->
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%">

<!-- Verticale -->
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%">

<!-- Diagonale -->
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%">

<!-- Angolo personalizzato (45 gradi) -->
<linearGradient gradientTransform="rotate(45)">

Gradienti multi-stop

xml

<linearGradient id="rainbow">
  <stop offset="0%" stop-color="#ff0000"/>
  <stop offset="17%" stop-color="#ff8000"/>
  <stop offset="33%" stop-color="#ffff00"/>
  <stop offset="50%" stop-color="#00ff00"/>
  <stop offset="67%" stop-color="#0000ff"/>
  <stop offset="83%" stop-color="#4b0082"/>
  <stop offset="100%" stop-color="#8f00ff"/>
</linearGradient>

Pro Tip: Usa gradientTransform="rotate(45)" invece di calcolare manualmente x1/y1/x2/y2 per i gradienti angolari. È più leggibile e più facile da modificare in seguito.

Gradienti radiali

Radiale di base

xml

<radialGradient id="radial1" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#ffffff"/>
  <stop offset="100%" stop-color="#000000"/>
</radialGradient>

Centro sfalsato (effetto spotlight)

xml

<radialGradient id="spotlight"
                cx="30%" cy="30%"
                fx="25%" fy="25%"
                r="50%">
  <stop offset="0%" stop-color="#ffffff"/>
  <stop offset="100%" stop-color="#333333"/>
</radialGradient>

Gradienti ellittici

xml

<radialGradient id="ellipse"
                cx="50%" cy="50%"
                rx="50%" ry="25%">
  <stop offset="0%" stop-color="#ff0000"/>
  <stop offset="100%" stop-color="#000000"/>
</radialGradient>

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Trasparenza dei gradienti

Effetti di dissolvenza

xml

<linearGradient id="fade-out">
  <stop offset="0%" stop-color="#000000" stop-opacity="1"/>
  <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</linearGradient>

Centro trasparente

xml

<radialGradient id="glow">
  <stop offset="0%" stop-color="#00ff00" stop-opacity="0.8"/>
  <stop offset="50%" stop-color="#00ff00" stop-opacity="0.3"/>
  <stop offset="100%" stop-color="#00ff00" stop-opacity="0"/>
</radialGradient>

"

Gradienti e pattern sono il ponte tra il flat design e il fotorealismo nella grafica vettoriale — la sottigliezza di uno stop-opacity ben posizionato può fare o rompere una composizione.

— Lea Verou, autrice CSS/SVG

Fondamenti dei pattern

Pattern semplice

xml

<defs>
  <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="3" fill="#333"/>
  </pattern>
</defs>

<rect fill="url(#dots)" width="200" height="200"/>

Pattern a righe

xml

<pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse">
  <rect width="5" height="10" fill="#ff0000"/>
  <rect x="5" width="5" height="10" fill="#ffffff"/>
</pattern>

Pattern complesso

xml

<pattern id="plaid" width="40" height="40" patternUnits="userSpaceOnUse">
  <!-- Base -->
  <rect width="40" height="40" fill="#e0e0e0"/>

  <!-- Righe orizzontali -->
  <rect width="40" height="10" fill="#c0c0c0"/>
  <rect y="20" width="40" height="10" fill="#c0c0c0"/>

  <!-- Righe verticali -->
  <rect width="10" height="40" fill="#a0a0a0" opacity="0.5"/>
  <rect x="20" width="10" height="40" fill="#a0a0a0" opacity="0.5"/>
</pattern>

Trasformazioni dei pattern

Pattern ruotato

xml

<pattern id="diagonal"
         width="10" height="10"
         patternTransform="rotate(45)"
         patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" stroke="#000" stroke-width="2"/>
</pattern>

Pattern scalato

xml

<pattern id="scaled"
         width="20" height="20"
         patternTransform="scale(0.5)"
         patternUnits="userSpaceOnUse">
  <!-- contenuto del pattern a 2x, visualizzato a 1x -->
</pattern>

Effetti filtro SVG e composizioni avanzate di gradienti — Combinare filtri con gradienti e pattern per effetti visivi stratificati

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Tecniche avanzate

Gradiente in un pattern

xml

<defs>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="100%" stop-color="#00ff00"/>
  </linearGradient>

  <pattern id="gradient-dots" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="8" fill="url(#grad)"/>
  </pattern>
</defs>

Pattern con sfondo a gradiente

xml

<defs>
  <radialGradient id="bg-grad">
    <stop offset="0%" stop-color="#ffffff"/>
    <stop offset="100%" stop-color="#cccccc"/>
  </radialGradient>

  <pattern id="textured" width="4" height="4" patternUnits="userSpaceOnUse">
    <rect width="4" height="4" fill="url(#bg-grad)"/>
    <circle cx="2" cy="2" r="1" fill="#000" opacity="0.1"/>
  </pattern>
</defs>

Effetto rumore/grana

xml

<filter id="noise">
  <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"/>
  <feColorMatrix type="saturate" values="0"/>
</filter>

<rect filter="url(#noise)" opacity="0.1" width="100%" height="100%"/>

Animazione CSS con gradienti

Gradiente animato

html

<svg>
  <defs>
    <linearGradient id="animated-grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000">
        <animate attributeName="stop-color"
                 values="#ff0000;#00ff00;#0000ff;#ff0000"
                 dur="4s" repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" stop-color="#0000ff">
        <animate attributeName="stop-color"
                 values="#0000ff;#ff0000;#00ff00;#0000ff"
                 dur="4s" repeatCount="indefinite"/>
      </stop>
    </linearGradient>
  </defs>
</svg>

I gradienti animati tramite SMIL (<animate>) funzionano nativamente in tutti i browser moderni senza JavaScript. Per animazioni di gradienti più complesse — come spostare le posizioni degli stop nel tempo — combina SMIL con le transizioni CSS sull'elemento genitore.

Considerazioni sulle prestazioni

Suggerimenti per l'ottimizzazione

Limita gli stop del gradiente
Evita pattern complessi nelle animazioni
Usa will-change con parsimonia
Considera colori di fallback
Testa su dispositivi mobili

Quando rasterizzare

Considera la rasterizzazione quando:

Pattern estremamente complessi
Effetti filtro pesanti
Applicazioni critiche per le prestazioni
Grafica statica

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

VectoSolve e gradienti

Gestione dei gradienti

VectoSolve gestisce la conversione dei gradienti:

Estrazione dei colori del gradiente
Preservazione degli stop di colore
Output SVG pulito

Lavoro post-conversione sui gradienti

Dopo la vettorializzazione:

Verifica i gradienti estratti
Regola gli stop se necessario
Ottimizza per il tuo caso d'uso
Aggiungi i pattern manualmente

Conclusione

I gradienti e pattern SVG sbloccano effetti visivi sofisticati senza le limitazioni del raster. Padroneggia queste tecniche per creare profondità, texture e interesse visivo nella tua grafica vettoriale. Inizia con vettori puliti da VectoSolve, poi arricchisci con gradienti e pattern secondo necessità.

Crea effetti vettoriali complessi

Tipo di gradiente/pattern	Elemento SVG	Caso d'uso comune
Gradiente lineare	<linearGradient>	Sfondi, pulsanti, effetti cielo
Gradiente radiale	<radialGradient>	Spotlight, luminescenze, dissolvenze circolari
Pattern ripetitivo	<pattern>	Texture, tessuti, sfondi a mosaico
Gradiente mesh	<meshGradient> (SVG2)	Miscelazione colori fotorealistica

Fonti e letture aggiuntive

MDN Web Docs: SVG Gradients — Riferimento completo per gli elementi linearGradient, radialGradient e pattern
W3C SVG 2: Paint Servers — Specifica ufficiale per gradienti, pattern e mesh gradient SVG
CSS-Tricks: SVG Gradients — Tutorial visivi sulla creazione e animazione di gradienti e pattern SVG
Smashing Magazine: Advanced SVG — Articoli tecnici approfonditi su trasformazioni di pattern e composizione di gradienti

Key Takeaways

Struttura di base

Controllo della direzione

Gradienti multi-stop

Radiale di base

Centro sfalsato (effetto spotlight)

Gradienti ellittici

Effetti di dissolvenza

Centro trasparente

Pattern semplice

Pattern a righe

Pattern complesso

Pattern ruotato

Pattern scalato

Gradiente in un pattern

Pattern con sfondo a gradiente

Effetto rumore/grana

Gradiente animato

Suggerimenti per l'ottimizzazione

Quando rasterizzare

Gestione dei gradienti

Lavoro post-conversione sui gradienti

Try VectoSolve Now

Related articles

Come abbiamo ridotto il tempo di caricamento del 70% con l'ottimizzazione SVG: caso studio reale

Guida per sviluppatori web: Best practice per l'integrazione SVG

Creare vettori pronti per la stampa: dallo schermo alla stampa professionale

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?