0

Consider the following code

<div style="width:480px;border:1px solid red">

<svg viewBox="0 0 100 100">
<path style="stroke:#000" d="M 0 0 100 100" />
</svg>

</div>

As we can see, the line is fully stretched to container. This is expected as per my understanding on viewBox. (in Firefox/Chrome/Edge/Opera)

However, IE11 or below does not strech the line to container. This is because IE11 expect a specific height to SVG.

I do not really care about IE11 support. I am just wondering, whether all modern browsers are consistent in handling svg aspect ratio in the same way firefox/chrome/edge/opera handles it as I showed in first code snippet.

Note: I am not looking for a working around in IE, that is already available in many stackoverlow answers. I just wanted to ensure that, not setting explicit height for my svg does not cause issues in modern browsers

Kiran
  • 896
  • 1
  • 6
  • 25
  • it really depends on the full code. You may have different behavior not because of the SVG itself but because other properties applied around. Example: https://stackoverflow.com/q/62367587/8620333 (test the code using Firefox and Chrome to compare) – Temani Afif Jun 21 '20 at 10:33
  • thanks for response. but for a simple block container without much css, can i expect a consistent behaviour like the first code snippet – Kiran Jun 21 '20 at 10:35
  • I would say yes but I doubt you will have *only* this code inside a web page. There is for sure more CSS that can make the behavior different. – Temani Afif Jun 21 '20 at 10:37

0 Answers0