Icona SVG

Le icone SVG sono immagini SVG utilizzate come icone o pulsanti di immagine all'interno di applicazioni web o mobili. Le icone SVG possono anche essere utilizzate come loghi. Questo tutorial SVG spiega come creare le proprie icone SVG e dove scaricare icone SVG preconfigurate di alta qualità.

Vantaggi degli SVG delle icone

I vantaggi dell'uso degli SVG per le icone sono che è possibile ampliare e ridurre le icone in modo semplice e proporzionale, a seconda della posizione in cui devono essere visualizzate nell'applicazione e delle dimensioni dello schermo dell'applicazione. Gli SVG sono vantaggiosi rispetto alle immagini bitmap, poiché anche quando vengono ampliate o ridotte proporzionalmente, mantengono un aspetto gradevole. Le immagini bitmap tendono a pixelizzarsi quando vengono ampliate e perdono qualità (pixel) quando vengono ridotte.

Utilizzare icone SVG nelle Web Apps

Come descritto nel mostrare SVG nel browser web, ci sono diversi metodi perNel browser webIn un'HTML pagina, mostrare SVG come parte di un'HTML è facile. L'elemento HTML img può facilmente ingrandire e ridurre la dimensione dell'icona SVG.

Questo è un esempio di elemento visivo che mostra l'icona SVG:

<img src="svg-icon.svg">

Per ingrandire o ridurre la dimensione dell'icona SVG, è sufficiente utilizzare gli attributi di stile CSS width o height. Ecco un esempio di elemento img con l'attributo Height CSS aggiunto:

<img src="svg-icon.svg" style="height:32px">

Per mantenere le proporzioni dell'icona SVG quando si ingrandisce o riduce, dovresti impostare solo uno dei valori width o height, non entrambi i valori. Quando imposti solo uno dei valori della larghezza, il browser ridimensiona l'icona SVG lungo l'altra asse in modo che l'icona mantenga le sue proporzioni.

Creare own SVG icon

A volte potresti dover creare i tuoi own SVG icon. Un'icona SVG è semplicemente un'immagine SVG contenuta in un proprio file SVG. Ecco un'icona circolare molto semplice composta da un elemento SVG circle:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

Ecco l'aspetto dell'icona SVG visualizzata insieme all'elemento img:

Ma quando utilizzi l'elemento img per visualizzare questo'icona SVG e ingrandisci o riduci la dimensione dell'elemento img, l'icona SVG non viene ingrandita o ridotta. Al contrario, verrà visualizzato più o meno il riquadro SVG. Ecco un esempio in cui l'attributo Height CSS dell'elemento img è impostato a 32:

Nota come viene visualizzata solo una parte del cerchio, invece di ridurre proporzionalmente tutto il cerchio.

La causa di questo problema è che il file immagine SVG mancante di alcune informazioni. Devi impostare un valore per l'attributo viewBox SVG. L'attributo viewBox SVG specifica quanta parte del riquadro SVG deve essere visualizzata (in direzione X e Y).

Nel nostro esempio, desideriamo solo visualizzare la parte del riquadro SVG che contiene l'icona circolare. Questa area si estende dal punto 0,0 al punto 128,128 (il raggio del cerchio è 64, con il centro a 64,64). Utilizzando l'attributo Viewbox SVG, possiamo specificare di rendere solo questa area del riquadro SVG. Ecco l'aspetto dell'icona circolare SVG con il valore Viewbox impostato:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
　　　　<circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

Questo è l'icona SVG visualizzata, con altezze di 32, 48 e 64 pixel: