OpenDeck•6d ago•

6 replies

aspect ratio incorrect if outer SVG is scaled

✅Resolved

When calling

setImage

setImage

with an SVG, the aspect ratio appears to be ignored when the outer

<svg>

<svg>

is scaled. Eg:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                  viewBox="0 0 6 1" preserverAspectRatio="xMidYMid meet" fill="#f13e33">
  <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
  <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/>
  </svg><svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                  viewBox="0 0 6 1" preserverAspectRatio="xMidYMid meet" fill="#f13e33">
  <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
  <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/>
  </svg><svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
</svg>

produces the first attached image. The second image (from https://developer.mozilla.org/en-US/play) shows the correct rendering. If the

viewBox

viewBox

is instead defined on an inner

<svg>

<svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <svg viewBox="0 0 6 1" fill="#f13e33">
    <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
    <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/></svg>
    <svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
  </svg>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <svg viewBox="0 0 6 1" fill="#f13e33">
    <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
    <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/></svg>
    <svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
  </svg>
</svg>

then things render correctly, as in the 3rd attached image.

Solution

It looks like webkit has several known svg scaling issues. Closing this issue since it's fairly easily worked around by attaching the

viewBox

viewBox

to an extra internal

<svg>

<svg>

wrapper.

Jump to solution

OpenDeck•6d ago•

6 replies

mikeburr

aspect ratio incorrect if outer SVG is scaled

✅Resolved

When calling

setImage

setImage

with an SVG, the aspect ratio appears to be ignored when the outer

<svg>

<svg>

is scaled. Eg:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                  viewBox="0 0 6 1" preserverAspectRatio="xMidYMid meet" fill="#f13e33">
  <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
  <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/>
  </svg><svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                  viewBox="0 0 6 1" preserverAspectRatio="xMidYMid meet" fill="#f13e33">
  <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
  <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/>
  </svg><svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
</svg>

produces the first attached image. The second image (from https://developer.mozilla.org/en-US/play) shows the correct rendering. If the

viewBox

viewBox

is instead defined on an inner

<svg>

<svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <svg viewBox="0 0 6 1" fill="#f13e33">
    <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
    <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/></svg>
    <svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
  </svg>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <svg viewBox="0 0 6 1" fill="#f13e33">
    <svg x="0.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 5 0 L 6 0 L 6 6 L 5 6 Z M 5 6 L 6 6 L 6 11 L 5 11 Z"/></svg>
    <svg x="2.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 0 0 L 5 0 L 5 1 L 0 1 Z M 5 0 L 6 0 L 6 6 L 5 6 Z M 1 5 L 5 5 L 5 6 L 1 6 Z M 0 6 L 1 6 L 1 10 L 0 10 Z M 0 10 L 5 10 L 5 11 L 0 11 Z"/></svg>
    <svg x="4.5" y="0" height="1" width="1" viewBox="0 0 6 11" preserveAspectRatio="xMidYMid"><path d="M 2 9 L 3 9 L 3 10 L 2 10 Z"/></svg>
  </svg>
</svg>

then things render correctly, as in the 3rd attached image.

Solution

It looks like webkit has several known svg scaling issues. Closing this issue since it's fairly easily worked around by attaching the

viewBox

viewBox

to an extra internal

<svg>

<svg>

wrapper.

Jump to solution

aspect ratio incorrect if outer SVG is scaled

aspect ratio incorrect if outer SVG is scaled

Similar Threads

Similar Threads

Similar Threads