An interactive widget to help explain how the viewBox and preserveAspectRatio parameters control which region of an SVG image is rendered by the browser.
The dashed red box is the view box.
The solid blue box is what's rendered.
| viewBox | ||
|---|---|---|
| enabled | ||
| min-x | ||
| min-y | ||
| width | ||
| height | ||
| preserveAspectRatio | |
|---|---|
| none | |
| align X | |
| align Y | |
| meet/slice | |
| svg size | ||
|---|---|---|
| width | ||
| height | ||