SVG viewBox & preserveAspectRatio Scaling Calculator
Calculate viewport coordinate transforms, aspect ratio scaling factors, letterbox/pillarbox margins, and clipping bounds for SVG viewBox and preserveAspectRatio directives.
viewBox & Viewport Coordinates
min-x
min-y
width
height
Scale Multiplier & Behavior
PILLARBOX BARS
2.00x Scale
Rendered 200x200 px inside 300x200 px container (50px pillarbox on each side)
Generated SVG Tag
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="300" height="200">
Geometric Alignment & Padding Margins
Rendered Content Size:
200 x 200 px (1:1 Ratio)
Pillarbox / Letterbox Bars:
Horizontal: 50px left, 50px right
Cropped Overflow:
None (Fully visible)
Scale Equation:
min(300/100, 200/100) = 2.00x