viewBox SVG e ridimensionamento responsive

width e height di SVG impostano le dimensioni visualizzate nel DOM. L'attributo viewBox definisce lo spazio delle coordinate interno. Sono indipendenti: un viewBox di «0 0 100 100» con width="200" height="200" ridimensiona lo spazio delle coordinate di 2x.

viewBox="min-x min-y width height". Il caso più comune è: viewBox="0 0 100 100" definisce uno spazio delle coordinate di 100x100 che parte dall'origine. I valori delle coordinate nell'SVG fanno riferimento a questo spazio, non ai pixel.

Per ottenere un SVG responsive, omettete gli attributi width e height oppure impostateli su 100% e lasciate che viewBox definisca le proporzioni. Aggiungete il CSS: svg { width: 100%; height: auto; }. L'SVG si ridimensiona per adattarsi al contenitore mantenendo le proporzioni.

preserveAspectRatio controlla il modo in cui viewBox si adatta al viewport SVG quando le proporzioni differiscono. Valori: «xMidYMid meet» (predefinito: effetto letterbox), «xMidYMid slice» (ritaglio per riempire), «none» (adattamento senza mantenere le proporzioni).

La modifica di min-x e min-y sposta la porzione visibile dello spazio delle coordinate SVG. viewBox="50 50 100 100" mostra la regione da (50,50) a (150,150). Ciò consente il panning interattivo aggiornando i valori di viewBox con JavaScript.

Riducete le dimensioni di viewBox per ingrandire: viewBox="25 25 50 50" mostra una regione più piccola, ingrandita fino a riempire l'elemento SVG. Aumentate le dimensioni per ridurre lo zoom. Aggiornate viewBox negli eventi wheel per ottenere uno zoom interattivo senza ridimensionare l'elemento SVG.

SVG in un tag img: si ridimensiona in modo responsive con object-fit, ma non può essere stilizzato con CSS né controllato tramite script. SVG inline: è completamente accessibile a CSS e JavaScript, ma aumenta le dimensioni dell'HTML. Scegliete in base alle esigenze di interattività.

Gli SVG per icone utilizzano un viewBox fisso, ad esempio «0 0 24 24», e nessun width/height, consentendo al CSS di dimensionarli: .icon { width: 1.5rem; height: 1.5rem; }. viewBox garantisce che le icone si ridimensionino correttamente a qualsiasi dimensione mantenendo una resa vettoriale nitida.

Definite le icone in elementi <symbol viewBox="0 0 24 24"> all'interno di un SVG nascosto. Fatevi riferimento con <use href="#icon-name">. Ogni elemento use può avere width, height, fill e color propri: un solo file sprite per tutte le icone.

SVG fill="currentColor" eredita la proprietà CSS color dall'elemento o dal suo genitore. Impostate color: red sull'SVG o su un genitore e l'icona verrà riempita automaticamente di rosso. In questo modo le icone a un solo colore seguono il colore del testo senza uno stile specifico per SVG.

Se il contenuto SVG appare ritagliato o posizionato in modo imprevisto, registrate o esaminate il valore di viewBox. Un errore comune consiste nell'impostare viewBox sulle dimensioni in pixel dell'illustrazione originale senza adattarlo alle dimensioni visualizzate, causando problemi di ridimensionamento. Verificate che viewBox corrisponda ai limiti effettivi del contenuto dell'illustrazione SVG.

viewBox di SVG definisce uno spazio delle coordinate interno indipendente dalle dimensioni visualizzate in pixel, consentendo un ridimensionamento responsive. Impostando width:100%; height:auto insieme a un viewBox, gli SVG si adattano a qualsiasi contenitore. Lo schema di sprite symbol+use, la tematizzazione con currentColor e preserveAspectRatio completano un insieme di strumenti per utilizzare SVG flessibili e tematizzabili.