SVG Höhe und Breite Skalierung nicht proportional

Question

Ich mache ein SVG und möchte es nicht proportional skalieren (oder mindestens 4: 3 und 16: 9-Varianten in einer Datei). Ich versuchte mir vorzustellen, wie ich es aussehen lassen wollte - beachte, dass sich die Grenze ändert, aber die Formen in der Mitte sind gleich. Ich arbeite im Inkscape unter Linux OS.

Was ich meine, dargestellt (konnte nicht Bilder einbetten aufgrund unzureichender Ruf):

Original SVG

Border's width is changing, but rest of SVG stays intact

ich durch die Optionen und Internet haben gesucht, aber nicht finden konnten etwas Ähnliches. Ich bin mir nicht ganz sicher, wonach ich suchen soll. Danke für jede Hilfe im Voraus!

Answer 1

Geben Sie dem SVG eine viewBox, die dem schmaleren Seitenverhältnis entspricht. Es wird automatisch zentriert, wie Sie möchten, wenn Sie die Ansicht breiter machen.

Im folgenden Beispiel sind die beiden SVGs identisch, sie wurden soeben unterschiedlich width und height zugewiesen.

/* 4x3 aspect ratio */ 
 
svg:nth-child(1) { 
 
    width: 300px; 
 
    height: 225px; 
 
    border: solid 1px black; 
 
} 
 

 
/* 16x9 aspect ratio */ 
 
svg:nth-child(2) { 
 
    width: 400px; 
 
    height: 225px; 
 
    border: solid 1px black; 
 
}

<svg viewBox="0 0 120 90"> 
 
    <rect width="120" height="90" fill="lightgrey"/> 
 
    <circle cx="60" cy="300" r="240" fill="limegreen"/> 
 
    <text x="60" y="50" text-anchor="middle">4 x 3</text> 
 
</svg> 
 

 
<svg viewBox="0 0 120 90"> 
 
    <rect width="120" height="90" fill="lightgrey"/> 
 
    <circle cx="60" cy="300" r="240" fill="limegreen"/> 
 
    <text x="60" y="50" text-anchor="middle">4 x 3</text> 
 
</svg>