Why Does My Round SVG Brand Symbol Become Oval in a Wide Header?

Check the ViewBox Before Changing the Artwork

An SVG viewBox defines four numbers: min-x, min-y, width, and height. These establish the internal coordinate rectangle mapped into the displayed viewport.

A wide header can have a different aspect ratio from the viewBox. How the two rectangles are reconciled determines whether artwork stretches, fits, or extends beyond the visible area.

The default preserveAspectRatio value is xMidYMid meet. It scales uniformly, centers the viewBox, and keeps the entire defined region visible.

Decision branch: If a circle becomes oval, inspect preserveAspectRatio and the relationship between viewport and viewBox before redrawing the approved symbol.

Distinguish None, Meet, and Slice

With preserveAspectRatio set to none, horizontal and vertical scaling can differ. A circular symbol may therefore become elliptical. When none is selected, meet and slice behavior is irrelevant.

Meet preserves proportions while fitting the entire viewBox inside the viewport. Unused space can remain when their aspect ratios differ.

Slice also preserves proportions but scales until the viewport is covered. Portions of the viewBox may extend beyond its boundaries and become visually cropped.

Decision branch: Choose meet when the complete approved symbol must remain visible. Consider slice for an intentionally cropped decorative composition. Do not use none as a universal solution for wide layouts.

Interpret the Measured Browser Fixture

An actual synthetic Chrome fixture used a 240×120 SVG viewport, a 0 0 120 120 viewBox, and a circle centered at 60,60 with radius 40. Overflow was explicitly hidden.

With meet, the circle's geometry bounding box measured approximately 80×80. With none, it measured 160×80, demonstrating nonuniform scaling.

With slice, the geometry bounding box measured 160×160, extending beyond the viewport's 120-pixel height and becoming visually clipped.

A separate no-viewBox case using none measured 80×80 because the fixture retained unit scaling on both axes.

These are geometry bounding-box measurements, not clipped visible-pixel bounds. They establish behavior only for this synthetic browser fixture, not actual brand assets or external design-tool imports.

Illustrative Exercise: Two Header Deliverables

Illustrative exercise — fictional brand-layout requirements, not executed merchant tests.

Input A is a wide storefront header requiring the entire approved round symbol and its clear space. Preserve proportional scaling and inspect whether meet leaves acceptable surrounding space.

Input B is a decorative campaign header where a large circular motif is intentionally cropped. Evaluate slice while checking which portions extend beyond the viewport.

Decision branch: For A, protect complete symbol geometry and approved clear space. For B, document the intended crop instead of treating it as accidental distortion.

SVG files can also contain embedded raster imagery. This scaling guidance does not convert raster artwork into vectors or establish compatibility with a particular design application.

Inspect the actual measurement data

These data describe the synthetic checks scoped in the article, not real-product, publishing-platform or subjective-quality acceptance.

• synthetic-svg-scaling-geometry.csv · SHA256 a2a38a841216baf3a87b7baf88b236fe320c3bac3abfb6973a232c74c8b910e5

Illustrative Exercise — Approved Symbol Geometry Versus Decorative Cropping

These are illustrative exercise rows. Save a copy and record your own observations; the example is not an executed acceptance test.

Download review worksheet (CSV)