D
P
0
← All articlesBaca dalam Bahasa Indonesia

HTML & CSS

SVG Icons Squished, Circles Rendering as Ellipses in Some Slots? `preserveAspectRatio` `none` Stretches Non-Uniformly

July 4, 2026·4 min read
SVG Icons Squished, Circles Rendering as Ellipses in Some Slots? `preserveAspectRatio` `none` Stretches Non-Uniformly

A client site I maintain had just received a fresh batch of icon SVGs from the design pipeline. Once they were wired in, the result made me squint: some of the icons rendered visibly distorted. Circles came out as ellipses. Checkmarks were squashed wide, as if someone had grabbed both ends and pulled. The most maddening part was that the distortion felt random. The same icon looked perfect in the sidebar and then came out dented inside a button. I opened the source files in the design tool, and every one of them was perfectly proportional. Nothing was wrong with the artwork.

My first instinct was to blame CSS. I checked the flexbox on the misbehaving slots, hunted for a stray transform, checked object-fit. All clean. Only then did I do what should have been step one: open an exported SVG file in a text editor instead of staring at the source in the design tool. On the root svg, a single attribute ended the investigation on the spot:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     width="24" height="24" preserveAspectRatio="none">
  <path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>

preserveAspectRatio="none". There was my culprit.

Why this happens

An SVG has two separate notions of size. The viewBox defines the artwork's internal coordinate system, in other words its proportions. The final rendered size comes from the CSS box the SVG sits in. preserveAspectRatio is the rule that bridges the two: how the viewBox gets mapped onto the box. The default, when the attribute is absent, is xMidYMid meet: scale uniformly, center it, fit inside the box. Proportions are always safe.

none switches all of that off. It means: stretch the viewBox until it fills the box, along both axes independently. Non-uniform, and by design, not a browser bug. The consequence is that any slot whose CSS box does not exactly match the viewBox's aspect ratio will deform the artwork. A 24x24 icon in a 24x24 slot: fine. The same icon in a 32x24 button slot: a third wider. Inside a width: 100% wrapper: whatever the wrapper feels like that day. That is why the distortion felt random. It was not random at all; it just depended on the aspect ratio of the box, and some slots happened to match.

So where did the attribute come from? Nobody had written it for an icon on purpose. It turned out that at some point a decorative divider had been deliberately stretched non-uniformly, a legitimate use case for none, and the setting had stuck in the export template. From then on, every icon that went through the same pipeline carried the attribute along. One decision made for one asset, leaking into the entire fleet.

The fix

Three steps, from a single file to the whole folder.

First, remove preserveAspectRatio="none" from the root. Without the attribute, the browser falls back to the default xMidYMid meet: uniform scaling, centered, whatever the shape of the box. Second, stop pinning width and height to fixed numbers that will later fight with CSS. Set both to 100% and let the viewBox be the single source of truth for proportions:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     width="100%" height="100%">
  <path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>

If you would rather handle sizing entirely in CSS, drop the width and height attributes altogether and control it from the stylesheet:

.icon-slot svg {
  width: 100%;
  height: 100%;
}

Third, and this matters because dozens of files were infected: do not fix them one by one in an editor. A single one-liner sweeps the whole icons folder:

grep -rl 'preserveAspectRatio="none"' assets/icons/ | \
  xargs sed -i 's/ preserveAspectRatio="none"//g'

On a Windows machine, the PowerShell version:

Get-ChildItem assets/icons -Recurse -Filter *.svg | ForEach-Object {
  (Get-Content $_.FullName -Raw) -replace ' preserveAspectRatio="none"', '' |
    Set-Content $_.FullName -NoNewline
}

Verification is quick: render the icons in slots of different sizes and ratios, square, wide, width: 100%, then resize to your heart's content. If a circle stays a circle at every container size, you are done. And one more step that must not be skipped: fix the export template too. Otherwise the next batch of icons arrives carrying the same disease.

The takeaway

  • When an SVG renders distorted, check preserveAspectRatio first, before blaming CSS.
  • none means non-uniform stretch, by design. That is not the browser breaking; that is the browser obediently following an instruction.
  • The viewBox defines proportions, CSS defines size. Do not let fixed attributes wedge themselves in between.
  • An export pipeline can poison every asset downstream. Fix the template first, then batch-fix the fleet.

What stuck with me from this one was not the attribute but that feeling of "randomness". A bug that shows up in some places and not others is almost never random; it just depends on a variable you have not spotted yet. Here, the variable was as simple as the shape of a box.