SVG invisible on Safari without height attribute, but issue not recreatable?

Question

I have an SVG in my website which displays fine on Chrome but isn't visible on Safari and Mobile Safari.

Weirdly, if I copy and paste the SVG into a Codepen page then it works fine, so I'm not able to recreate the issue publicly.

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>

Setting height 100% as an attribute fixes the issue in Safari and doesn't make it the wrong size or aspect ratio.

What is going on here? Why does this work and is a safe fix? And also why is the issue not reproducible?

UPDATE: Ive now been able to recreate. Safari hides the SVG when it has a parent div with display: flex:

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/yLPgaJx

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>
</div>

If I set the container div to display: block or set a height on the SVG then it comes back.

Answer 1

In my case, adding the svg attributes width="40" and height="auto" did the trick for Safari to show the svgs correctly:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.8 503.8" width="40" height="auto">
    <style>.st0{fill:currentcolor}</style>
    <path d="M251.9 45.4c67.3 0 75.3.2 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.6a79.6 79.6 0 0 1 29 18.9 78.2 78.2 0 0 1 18.8 28.9c3.5 8.9 7.6 22.3 8.7 46.8 1.2 26.6 1.5 34.6 1.5 101.8s-.3 75.3-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8a83.4 83.4 0 0 1-47.8 47.8c-8.9 3.5-22.2 7.6-46.8 8.7-26.5 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.5-1.1-37.9-5.2-46.8-8.7a78.2 78.2 0 0 1-28.9-18.8 79.6 79.6 0 0 1-18.9-29c-3.4-8.9-7.5-22.2-8.6-46.8-1.3-26.5-1.5-34.5-1.5-101.8s.2-75.2 1.5-101.8c1.1-24.5 5.2-37.9 8.6-46.8a78.4 78.4 0 0 1 18.9-28.9 78.4 78.4 0 0 1 28.9-18.9c8.9-3.4 22.3-7.5 46.8-8.6 26.6-1.3 34.6-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.8 1.5S102.9 7 86.9 13.2a124.9 124.9 0 0 0-44.6 29.1 123.6 123.6 0 0 0-29.1 44.6c-6.2 16-10.5 34.3-11.7 61.2S0 183.5 0 251.9s.3 77 1.5 103.9 5.5 45.1 11.7 61.1a125.3 125.3 0 0 0 29.1 44.7 123.4 123.4 0 0 0 44.6 29c16 6.2 34.3 10.5 61.2 11.7s35.4 1.5 103.8 1.5 77-.2 103.9-1.5 45.1-5.5 61.1-11.7a128.6 128.6 0 0 0 73.7-73.7c6.2-16 10.5-34.3 11.7-61.1s1.5-35.5 1.5-103.9-.2-77-1.5-103.8-5.5-45.2-11.7-61.2a123.4 123.4 0 0 0-29-44.6 123.1 123.1 0 0 0-44.7-29.1c-16-6.2-34.3-10.5-61.1-11.7S320.3 0 251.9 0Z"></path> 
    <path d="M251.9 122.6a129.4 129.4 0 1 0 129.4 129.3 129.3 129.3 0 0 0-129.4-129.3Zm0 213.3a84 84 0 1 1 84-84 84 84 0 0 1-84 84Z"></path> 
     <circle cx="386.4" cy="117.4" r="30.2"></circle>
</svg>

Answer 2

As comments @Evanss

Also height auto doens't make the SVG appear, but height 100% does.

width="22" height="100%"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="100%"  aria-hidden="true" focusable="false" role="img" style="border:1px solid red">

  <path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
  </path>
  </svg>

The snippet above doesn't render the image correctly, but if you save the svg as a separate file and open it in a browser, you'll see exactly the same image.

In the image below, the red rectangle is the border of the svg canvas with width="22" and height="100%"

As you can see, with this SVG configuration, paddings are too large. What is unacceptable and will interfere with layout

Using JavaScript isnt idea as it may cause the page to flicker

Using the JavaScript method getBBox() in the snippet console allows you to find out the physical dimensions of the svg shape In this case, JS is not involved in the SVG rendering process and is only a reference tool.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
  <path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
  </path>
 </svg>
 <script>
   console.log(path.getBBox())
 </script>

In the console, we can see the physical dimensions (dimensions that are given by the path of the svg shape)

  "x": 0,
  "y": 31.999996185302734,
  "width": 448,
  "height": 448

To move the image to the top left corner (this is the svgs origin) we set the value viewBox="0 32 448 448"` And to reduce the margin margins we set fixed values width="22" height="22"

Recommendations for creating and using icons

Setting both dimensions would be very time consuming as I have a lot of icons with the same issue.

1. If you are using some unique icons created by a designer, then you cannot avoid the manual positioning and scaling process for each icon described above.

There is no universal solution for this case. It all depends on how the icon was drawn.

2. If the icon is simple, standard, then it is better to use icons drawn by professionals. There are many such resources on the web.
   In this case, manual, additional processing is not required.

3. You can use google-fonts character font

Icons by name can be selected here
The name of your icon - Close `Fullscreen

Below is an example with minimal layout

span {
  margin-left: 0.5em;
  margin-top:0.5em;
  transition: transform 1s ease-in-out;
}
span:hover {
  transform: scale(2); 
  color:red;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span class="material-icons"> close_fullscreen </span>

Answer 3

You have the height of the SVG twice. In view styles hight="100%" and style="height: auto;"

safari doesn't know which style to prefer, how to scale the SVG, so it doesn't display the image.

Leave one style: width="22" height="auto"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="auto" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
  <path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
  </path>
 </svg>

Update

Try setting the values of `viewBox="0 32 448 448" according to the dimensions shown by the JS method getBBox()

And also specify fixed width and height viewport width="22" height="22"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 448" width="22" height="22" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
  <path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
  </path>
 </svg>
 <script>
   console.log(path.getBBox())
 </script>