xMidYMid

xMidYMid is an alignment value used within SVG’s preserveAspectRatio attribute to control how a viewBox is positioned when the SVG content is scaled to fit its viewport. The preserveAspectRatio attribute governs both the preservation of aspect ratio and the placement of the viewBox content inside the viewport.

The align component in preserveAspectRatio consists of an x value (xMin, xMid, xMax) and a y value (yMin, yMid, yMax). xMidYMid specifies that the viewBox is centered on both the horizontal and vertical axes. This alignment is commonly combined with the optional meet or slice keyword, which determines how the graphic is scaled.

- meet: preserves aspect ratio and scales the viewBox to fit entirely within the viewport, potentially leaving empty space.

- slice: preserves aspect ratio and scales the viewBox to fill the viewport, potentially clipping content.

If meet or slice is omitted, the default behavior is equivalent to meet.

In practice, xMidYMid is used to keep the graphic centered as the container size changes, making layouts more predictable in responsive designs. It does not change the coordinate system of the SVG itself; rather, it affects how the pre-existing viewBox is mapped onto the drawn area.

Example: preserveAspectRatio="xMidYMid meet" centers the viewBox both horizontally and vertically and scales it to fit inside the viewport while preserving aspect ratio.

See also: preserveAspectRatio, viewBox, SVG scaling and responsive graphics.