Svg Viewbox Height Issue on iOS Safari

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

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>

Safari not rendering SVGs to the desired size/height (SVGS are clipped)

I figured out a combinations of CSS settings that now make the SVGs Render in entirety in Safari (as well as in Chrome, Firefox, and Edge); Safari no longer clips them/cuts them off. My sizing and calculations are not perfect, but the display settings work, you will need to tweak the size according to your own needs adjusting the height of the SVG container/parent. My javascript (which controls other aspects of the page) are wonky, but the SVG settings are more or less correct. I hope this helps someone.

Here is the codepen: http://codepen.io/ihatecoding/pen/zBgqgp

The inline html declaration of the SVG

I adjusted my viewBox and removed my overflow: visible setting according to the suggestions of @Paul Lebeau Note that the preserveAspectRatio is intentionally not specified because it should remain with the default setting, xMidYMid meet (unlike other Safari SVG fixes which change it to none).

Here is the code:

 <svg class="areaSVG notFixed index" viewBox="0 0 80 80"  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

The CSS

If you are not using my javascript to resize the svgs, use the following css settings for the SVG container (.ey-col-svg) and the SVG itself (.areaSVG):

/* the SVG parent/container */

.ey-col.svg {
    display: block;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}

/* the SVG itself */

.areaSVG {
    display: inline-block;
    max-height: 15vh; 
    box-sizing: content-box;
    margin: 0;
}

Notes about my javascript

If you are using my messy javascript, please note both the container and the SVG will both initially have the setting display: none in the CSS, and then the javascript will change both of them to have the same displays settings I have shown above [with the container (.ey-col-svg) set to display: block and the SVG (.areaSVG) set to display: inline-block].

Also, my javascript in my codepen has changed. It now works better if I adjust the height of the container (.ey-col-svg) instead of the of SVG (.areaSVG) itself. Another option that might work better for users is changing the max-height of the container, instead of the height (as I have done).

Mobile Safari SVG Problem

Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

</body>
</html>

The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is
"Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.

Not sure if Ipad cares about the Content-Type but other browsers do.

Updated

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

SVG does not display correctly, iOS Safari

Change the following line to:

.st38{opacity:.08;fill:url(#XMLID_108_);}

i.e. remove the 8.00000e-02

also ... run this through an optimiser like SVGOMG ... if displayed at the small size this is far too complicated and large. Simplify all the gradients, maybe even merge them all into one. Should be able to get the ungzipped version down an order of magnitude from 35kb. Lovely logo though.

In Safari svg mask looks blurry like if it's raster

Apparently, safari has problems with mask-images containing masked elements.

Fortunately you can simplify your mask:

.logo {
  width: 96px;
  height: 96px;
  background: #000;
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg width='48' height='48' fill='none' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='48' height='48'%3E%3Cpath d='M48 24c0 19.205-4.795 24-24 24S0 43.205 0 24 4.795 0 24 0s24 4.795 24 24z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23000' d='M0 0h48v48H0z'/%3E%3C/g%3E%3C/svg%3E");
}

.logo2 {
  width: 96px;
  height: 96px;
  background: #000;
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 24c0 19.205-4.795 24-24 24S0 43.205 0 24 4.795 0 24 0s24 4.795 24 24z' fill='%23000' /%3E%3C/svg%3E");
     
}

<p>Original</p>
<div class="logo"></div>
<p>Fixed</p>
<div class="logo2"></div>