SVG ViewBox Aspect Letterbox
Compute SVG xMidYMid meet letterboxing for a positive viewBox and viewport; not preserveAspectRatio slice or arbitrary alignment.
Description
Compute SVG xMidYMid meet letterboxing for a positive viewBox and viewport; not preserveAspectRatio slice or arbitrary alignment.
Centered letterboxing fits a viewBox into a viewport with one uniform scale and possible unused bands.
When to use this tool
Compute SVG xMidYMid meet letterboxing for a positive viewBox and viewport; not preserveAspectRatio slice or arbitrary alignment.
- Prepare the supplied viewBox, viewportWidth, viewportHeight fields for this operation.
- Compare the complete example with the representation used by your own input before carrying the result into another step.
How to use the tool and how it works
- Enter viewBox, viewportWidth, viewportHeight. Use the exact text syntax, units and index conventions explained below.
- Run the tool. If input validation fails, correct the supplied fields before interpreting any result.
- Read result.scale, result.offsetX, result.offsetY, result.translateX, result.translateY. Interpret false, null and empty lists using the distinctions below; they can be valid outputs.
Require positive viewBox width/height and viewport dimensions. Choose min(viewportWidth/viewBoxWidth,viewportHeight/viewBoxHeight), center the scaled extents and subtract scaled minX/minY to obtain the final translations.1
| Input field | Meaning and representation | Accepted input |
|---|---|---|
| viewBox | view box. | List of finite numbers; bounded by the operation; greater than zero |
| viewportWidth | viewport width. | Finite number; greater than zero |
| viewportHeight | viewport height. | Finite number; greater than zero |
| Output field | Interpretation |
|---|---|
| result | Object containing the named outputs below. |
| result.scale | The scale value under the stated formula or text convention. |
| result.offsetX | The offset x value under the stated formula or text convention. |
| result.offsetY | The offset y value under the stated formula or text convention. |
| result.translateX | The translate x value under the stated formula or text convention. |
| result.translateY | The translate y value under the stated formula or text convention. |
{
"input": {
"viewBox": [
0,
0,
10,
20
],
"viewportWidth": 100,
"viewportHeight": 100
},
"output": {
"result": {
"scale": 5,
"offsetX": 25,
"offsetY": 0,
"translateX": 25,
"translateY": 0
}
}
}Limitations and assumptions
- This is the centered meet model only. Slice, nonuniform scaling, alternate alignment and a complete SVG transform stack are not evaluated.
- Point pairs use [x,y], rectangles and viewBox use [x,y,width,height], and all coordinate units must be consistent. This tool does not read, render or modify an SVG document.
- Every declared top-level field is required and unexpected fields are rejected. Numeric inputs must be finite; ordinary text fields are bounded to 8,192 UTF-16 code units, with tighter operation-specific limits where stated.
- String lists have at most 128 entries of at most 128 code units; matrices have at most 128 rows and columns. Larger numeric lists and parsed JSON have separate bounded budgets. Nonfinite results and excessively large serialized outputs are rejected.
- Indexes are zero-based and spans have an exclusive end unless explicitly stated otherwise. A valid false, null or empty-list result is distinct from malformed input.
Alternative or Complementary methods
Use a full SVG parser or rendering engine when the task includes commands and CSS values outside the documented branch. Compare coordinates and transforms under the same units and viewport convention.
References
Similar or alternative tools
- SVG ViewBox Number Parser
Parse an SVG viewBox with explicit nonnegative width/height; zero dimensions are retained as nonrenderable, not a valid aspect-ratio divisor.
- Absolute Line Command Differencer
Difference explicit absolute SVG M/L commands against the preceding current point, initially the origin; no curves or closepath.