Web Compat: SVG-in-img with height/width but no viewBox should scale without aspect ratio control

Fixed Issue #11305302


Amelia B.
Mar 17, 2017
This issue is public.
Found in
  • Microsoft Edge
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Edge made a lot of web compat fixes (relative to IE) to match other browsers’ behavior when it comes to SVG with viewBox attributes. However, it discovered one remaining mis-match while compiling all the possibilities.

Steps to reproduce:

  • An SVG file that has defined height and width (attributes on the root svg element), but no viewBox.
  • Embedded as an img in an HTML page.
  • That img is given defined height and width that do not match the aspect ratio of the SVG’s height and width.

All the other browsers scale it the way they would a non-SVG image, with no aspect ratio control. Edge scales it with aspect ratio control, as if it had an SVG viewBox matching its height and width.

Not really a “standards” issue, since the standards around this are still not well written. But maintaining de-facto standards is an important first step to making those written standards happen!

Full CodePen:

Just the example where Edge doesn’t match Gecko/Blink/WebKit:


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

    • Correction: It seems I shouldn’t have assumed that WebKit would behave like Blink. They actually match Edge’s behavior on this case (and have their own unique behavior when it comes to iframes, treating them the same as object). The text in the linked pens has been updated.

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Fixed”

    • As part of the work to implement object-fit we now behave as Chrome and do scale the heart without taking its aspect-ratio into account. I had a look at the full test case and we seem to match Chrome everywhere now.

    You need to sign in to your Microsoft account to add a comment.

    Sign in