SVG preserveAspectRatio: adatta senza deformare

Usa preserveAspectRatio="xMidYMid meet" quando l'intero viewBox SVG deve rientrare nell'area di visualizzazione senza deformarsi. Usa slice quando quell'area deve essere coperta e parte del contenuto può estendersi oltre i bordi. Usa none soltanto quando una scala orizzontale e verticale diversa è intenzionale.

La distinzione importante è tra il rettangolo di coordinate della grafica, definito da viewBox, e l'area di visualizzazione in cui appare. L'adattamento cambia la corrispondenza fra i due. Non ridisegna un logo, non rimuove tela sorgente vuota e non elimina permanentemente i tracciati ritagliati.

Scegli prima il comportamento di adattamento

Il riferimento MDN su preserveAspectRatio documenta questi valori e quello predefinito, xMidYMid meet. Per un elemento svg, questa corrispondenza richiede un viewBox. L'attributo distingue maiuscole e minuscole: conserva A e R maiuscole.

Per un logo, inizia con meet. Perdere una lettera o trasformare un cerchio in un ovale è solitamente peggio che lasciare un po' di spazio. Per uno sfondo ornamentale, un ritaglio deliberato può essere accettabile. Decidilo prima di scegliere l'allineamento.

Prova un emblema in due forme di area di visualizzazione

Questo esempio originale usa un cerchio, un rettangolo e un triangolo decentrato. Il cerchio rende visibile la deformazione; le parti disuguali rendono più facili da notare i cambiamenti di allineamento rispetto a un distintivo simmetrico.

Incolla questo codice in un file HTML e aprilo in un browser:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

Il viewBox è largo 200 unità e alto 100. Il suo rapporto è 2:1. La prima area di visualizzazione misura 300 per 100 pixel CSS, con rapporto 3:1. Cambia soltanto l'attributo per confrontare xMidYMid slice e none. Cambia poi l'area di visualizzazione in width="100" height="300" e ripeti.

Abbiamo renderizzato questa geometria in Chrome con una piccola pagina di prova dotata di selettore. La lettura usava la matrice di trasformazione corrente del gruppo grafico. Scale e traslazioni risultanti corrispondevano a questi valori; lo scostamento slice di circa −25 pixel è arrotondato qui.

Nell'area alta, meet mostrava tutte e tre le forme piccole. slice centrato mostrava soltanto parte della composizione ingrandita, dominata dal rettangolo dorato. none rendeva il cerchio stretto e alto. È un controllo di questo esempio in Chrome, non una garanzia sul comportamento di importazione di ogni editor grafico.

La regola di scala è semplice per questo esempio con origine zero. Dividi la larghezza dell'area di visualizzazione per quella del viewBox, poi la sua altezza per quella del viewBox. meet usa il rapporto minore per entrambi gli assi; slice usa il maggiore. none mantiene separati i due rapporti. La specifica del sistema di coordinate SVG definisce la corrispondenza, inclusi allineamento e origini del viewBox diverse da zero.

Usa l'allineamento per scegliere dove va lo spazio libero

La prima parola chiave controlla l'allineamento. xMin, xMid e xMax allineano il bordo sinistro, il centro orizzontale o il bordo destro del viewBox. YMin, YMid e YMax fanno lo stesso in verticale. Si riferiscono al rettangolo del viewBox, che può contenere spazio vuoto intorno ai tracciati effettivi.

Per l'area alta della prova:

• xMinYMin meet colloca il viewBox adattato in alto invece di centrarlo verticalmente.
• xMinYMin slice mantiene il lato sinistro del viewBox allineato a quello sinistro dell'area di visualizzazione. Il lato destro ingrandito si estende oltre l'area.
• xMidYMid slice distribuisce la fuoriuscita orizzontale su entrambi i lati.

Abbiamo cambiato la pagina di prova da centrata a xMinYMin. Sia la traslazione meet sia quella slice sono diventate zero, mentre i fattori di scala sono rimasti rispettivamente 0.5 e 3. L'allineamento ha spostato la composizione; non ha cambiato la scala di adattamento.

Un cambiamento di allineamento è visibile soltanto su un asse con spazio libero o fuoriuscita. Nel caso meet largo, il viewBox riempie già l'altezza, quindi cambiare YMid in YMin non lascia spazio verticale per spostarlo.

Rendi il ritaglio una scelta esplicita

slice seleziona una scala. Il ritaglio determina se puoi vedere le parti che si estendono fuori dall'area di visualizzazione. L'esempio imposta esplicitamente overflow:hidden affinché il ritaglio sia prevedibile.

Nella pagina di prova alta, impostare overflow come visibile ha rivelato il cerchio e il triangolo ingranditi oltre l'area slice. La geometria non era scomparsa. Il riferimento MDN su overflow SVG spiega il rapporto fra overflow e ritaglio dell'area di visualizzazione, incluse le differenze di stile predefinito fra i contesti SVG.

Evita di trattare slice come un'operazione di rifilatura dei tracciati. Se un file da consegnare deve contenere soltanto la geometria mantenuta, esegui e verifica una vera operazione di modifica. Per una finestra di visualizzazione personalizzata non rettangolare, un clipPath potrebbe essere invece lo strumento appropriato.

Analogamente, meet garantisce che il viewBox rientri; non può garantire che tutto il contenuto disegnato rientri. Un tratto, un filtro o un tracciato fuori da quel rettangolo sorgente può ancora estendersi oltre di esso. Ispeziona i bordi visibili invece di fidarti soltanto dell'attributo.

Correggi lo spazio vuoto del sorgente prima di forzare l'allineamento

Supponi che un piccolo simbolo occupi soltanto il centro di un viewBox molto grande. meet adatta l'intero rettangolo di coordinate, inclusi i margini vuoti. Il risultato può sembrare troppo piccolo anche quando la scala è corretta.

Controlla la tela o la tavola da disegno esportata nell'editor. Se cambi il viewBox per rendere la composizione più compatta, includi tratti ed effetti previsti e ricontrolla ogni posizionamento. Non rimuovere automaticamente tutti i margini: il sorgente può contenere spazio libero intenzionale intorno al simbolo di un marchio.

I problemi di dimensioni fisiche sono separati. Un SVG importato con dimensioni errate in millimetri richiede la procedura di dimensionamento SVG; cambiare l'allineamento dell'adattamento difficilmente correggerà le ipotesi sulle unità.

Distingui SVG incorporato e adattamento delle immagini

Per un SVG incorporato, cambia l'attributo sull'elemento svg pertinente. Il CSS può dimensionare il riquadro di quell'elemento, mentre preserveAspectRatio associa il viewBox al riquadro.

Per un SVG esterno usato in un elemento immagine HTML, il CSS controlla l'adattamento dell'immagine nell'elemento sostituito:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

La documentazione MDN su object-fit descrive come il contenuto sostituito rientra nel suo riquadro CSS. È un livello diverso dalla modifica della corrispondenza interna del documento SVG. Nemmeno object-fit: contain può rimuovere tela vuota già presente nel sorgente. Consulta SVG incorporato rispetto a elemento immagine quando scegli il modello di incorporamento.

Esiste inoltre un elemento SVG image, scritto con la parola completa invece dell'HTML img. Il suo preserveAspectRatio controlla come l'immagine referenziata si adatta al rettangolo definito per quell'elemento. È l'eccezione al requisito generale di fornire un viewBox sullo stesso elemento, come spiega il riferimento MDN dell'attributo. Tenere separati questi tre casi evita di cercare di correggere un'immagine HTML aggiungendole un attributo riservato agli SVG.

Conserva le proporzioni sorgente prima del posizionamento

Se possiedi soltanto un PNG o JPG del simbolo personalizzato e ti serve geometria vettoriale modificabile, PerfectVector può recuperare un sorgente SVG prima di costruire la disposizione. Ispeziona prima contorni, piccole aperture e limiti della tela. L'adattamento del risultato ne conserva la geometria corrente; non può riparare un sorgente deformato né ricreare dettagli mai recuperati.

Un SVG pulito esistente può passare direttamente ai controlli di adattamento. Per il semplice emblema sopra, basta la geometria scritta a mano. La panoramica sulla vettorializzazione delle immagini spiega quando è utile recuperare tracciati da un'immagine raster.

Per un simbolo solo raster, prova il sorgente in PerfectVector, ispeziona l'SVG, poi confronta un posizionamento largo e uno alto con meet prima di considerare un ritaglio. Conserva l'originale vettoriale affinché le scelte di disposizione rimangano reversibili.

FAQ

Perché il mio SVG ha ancora spazio vuoto con meet? L'area di visualizzazione e il viewBox possono avere rapporti diversi, lasciando spazio libero dopo il ridimensionamento uniforme. Il viewBox sorgente può anche contenere margini intorno ai tracciati. L'allineamento sposta quel rettangolo; non rimuove il suo spazio vuoto interno.

slice ritaglia permanentemente la grafica? No. Cambia la scala usata per coprire l'area di visualizzazione. Overflow e ritaglio controllano quali parti sono visibili. La geometria originale dei tracciati rimane nel documento a meno che tu non la modifichi separatamente.

Perché none trasforma il mio cerchio in un ovale? Consente fattori di scala orizzontali e verticali diversi. Quando i rapporti dell'area di visualizzazione e del viewBox differiscono, un cerchio può diventare un'ellisse. Usa meet o slice con una parola chiave di allineamento per mantenere una scala uniforme.

Fonti

1. MDN preserveAspectRatio — Definisce valori di adattamento, allineamento, impostazioni predefinite ed eccezione dell'elemento image SVG.
2. Specifica del sistema di coordinate SVG — Definisce il calcolo di scala e traslazione per un'area di visualizzazione.
3. MDN overflow SVG — Spiega come overflow controlla il ritaglio dell'area di visualizzazione.
4. MDN object-fit — Documenta l'adattamento del contenuto immagine sostituito dentro un riquadro CSS.