Esiste un concetto di dimensione in un SVG?


11

Mi chiedevo dei file SVG. So che è una raccolta di vettori definiti da tag di percorso in XML, quindi perché ha una larghezza e un'altezza in pixel nel tag svg e se rimuovessimo quelle dimensioni?

Risposte:


15

Larghezza e altezza sono rilevanti solo quando viewBoxè impostato. Senza quell'attributo puoi tranquillamente eliminare larghezza e altezza. Verrà sempre visualizzato nella scala in cui è stato disegnato. Se è <rect>stato impostato un valore 10px larghezza 20px alto, verrà visualizzato a quella scala 10x20 con o senza larghezza o altezza quando non è impostata alcuna viewBox.

Se viewBoxè impostato un attributo, è possibile utilizzare la larghezza e l'altezza per regolare la scala originale verso l'alto o verso il basso.

Senza larghezza e altezza ma viewBox impostato, ciò consentirà allo svg di ridimensionare all'infinito, il che può o meno essere il comportamento desiderato. In una pagina HTML reattiva questo è spesso desiderato. Si ridimensionerà per adattarsi al contenitore di delimitazione.

Questi sono gli stessi

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

Questo raddoppia la scala originale.

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

Ciò consente un ridimensionamento infinito

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.