title: Safari not rendering SVGs to the desired size/height (SVGS are clipped)
body: <p>I have some responsive inline SVGs I made. Their sizes render as I want them to in Chrome, Firefox and Edge, but in Safari they escape their containers/are cut off. For some reason their containers doesn't stretch to accommodate them. The following screenshot demonstrates the unwanted, cut-off Safari rendering: </p>
  
  <p><a href="https://i.stack.imgur.com/uKnNX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uKnNX.png" alt="SVGS don&#39;t fit"></a></p>
  
  <p>There are known issues with SVG rendering in Safari, and I have tried all the fixes out there I have found to the best of my ability (<a href="https://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari/" rel="nofollow noreferrer">here</a>, <a href="https://stackoverflow.com/questions/17158717/svg-container-renders-wrong-size-in-safari-desktop-fine-in-chrome-ios">here</a>, <a href="https://stackoverflow.com/questions/26091989/svg-viewbox-height-issue-on-ios-safari">here</a>, and <a href="https://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers">here</a>), but I can't manage to make the containers fit the SVGs in Safari.  It is in part because things are a little complicated with my javascript and I'm still a beginner, forgive me if my codepen is a bit messy. </p>
  
  <p>This is my codepen. :<a href="http://codepen.io/ihatecoding/pen/Bzgqqa" rel="nofollow noreferrer">http://codepen.io/ihatecoding/pen/Bzgqqa</a></p>
  
  <p>What my jquery does: it makes SVGs as large as possible until they take up 1/3 of the screen height, at that point it won't let them get taller.</p>
  
  <p>To help you focus on what matters :</p>
  
  <ul>
  <li>The SVGs are all of class <code>.areaSVG</code> </li>
  <li>The SVG parents/containers are always <code>.ey-col-svg</code> </li>
  <li>The entire footer is <code>#indexFooter</code> </li>
  <li>The main background image that is supposed to resize according to the height of the landing footer is <code>#section0img</code></li>
  </ul>
  
  <p>The current version that is working the best has the following format for the svg container:</p>
  
  <pre><code>.ey-col-svg {
      display: block;
      max-height: calc(30vh - 1vw - 63px);
      text-align: center;
      box-sizing: content-box;
      padding: 0;
      margin: -2vh 0 0 0;
  }
  </code></pre>
  
  <p>This is the css for the SVGs before the javascript makes them visible and adjusts their <code>height</code>:</p>
  
  <pre><code>.areaSVG {
      overflow: visible;
      display: none;
      box-sizing: content-box;
      margin: 0;
      padding: 1.6vh 0 1vh 0;
  }
  </code></pre>
  
  <p>Again, to repeat The javascript I have currently implemented adjusts the <code>height</code> of the SVGs (whose class is <code>areaSVG</code>).</p>
  
  <p>This is the most relevant part of my jQuery script;  it controls the size of the the SVGs. As I mentioned above, this script makes the SVGs as large as possible until they take up 1/3 of the screen height, and at that point it won't let them get taller:</p>
  
  <pre><code>  function resizeSVG() {
  
  // the row
   var $linksRow = $('.ey-nav-bar');
  
  // the text
     var $areaText = $('.ey-text-content');
  
  //the entire row below "research Area"
  
  
  
           // the actual svg container
  
        var $area = $('.areaSVG');
  
        var scale = 0.6;
  
           //the wrapper containing the svg div, its height and its width
        var $eyCol = $(".ey-col-svg");
        var eyWidth = $eyCol.width();
        var eyHeight = $eyCol.height();
  
                //the window
        var winHeight = $(window).height();
        var winWidth = $(window).width();
  
        //max Height caclulated based on window
        var maxHeight = .33 * winHeight;
  
  
          // if the height of the column is less than the width, and below the max height
  
        if (eyHeight &lt; eyWidth &amp;&amp; eyHeight &lt; maxHeight)
  
                    //make the height of the svg the max heihgt
          $area.height(maxHeight);
  
            // use the scaling factor times the width of the svg wrapper
  
        var imageWidth = scale * $eyCol.width();
                  // get the hight of the column       
  
        var imageHeight = $eyCol.height();
  
  
            // will be the dimensions used to size lenth and width of the svg
  
        var tot;
  
            //apsect ratio of the screen (horizontal/vertical)
  
        var ratio = winWidth / winHeight;
            // if the screen is landscape or if the user has left the landing section
  
  
          tot = imageWidth &gt; imageHeight ? imageHeight: imageWidth;
  
  maxTextHeight = maxHeight * .07;
  maxTotHeight = maxHeight * .5;
  
  if (tot &lt; maxTotHeight)
  
  {        $area.css("height", tot);
  
  }
          else
          {
  
  
    $area.css("height", maxTotHeight);
    $areaText.css("height", maxTextHeight);
  
          }
  
  minLinksHeight = maxHeight * .8;
  
  var linksHeight = $linksRow.height();
  
  
      }
  </code></pre>
  
  <p><em>(Note: the resulting SVG heights are subsequently used by another function, not seen here, to control the size of the main image).</em> </p>
  
  <p>This is my introductory formatting code for each inline svg:</p>
  
  <pre><code>    &lt;svg class="areaSVG notFixed index" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  </code></pre>
  
  <p>Any help would be very appreciated, I really would like to see this to render properly in Safari!</p>