Forcing an SVG to resize based on percentage height

I have a footer containing a row of scaling SVG buttons that I am very happy with except for one thing: I cannot get the height of the svgs to scale to be a certain percentage of their container (e.g. 30%) in my footer. I have tried for days but I cannot figure out why.

If I use a fixed size (in pixels, for example), the height sort of does what I want, but it isn't responsive in the way I'd like. Maybe I don't yet understand something about svgs. I would really like the svg div to be based on a relative percentage of the height of its container.

Thanks in advance!

This is the codepen: http://codepen.io/ihatecoding/pen/KzRQWO

This is the snippet:

#footer {
  text-align: center;
  position: fixed;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  max-height:40% !important;

}

.areaSVG {
  width: auto;
  
  /* this is the height setting I would like to be a percentage */
  height: 60px;  /* <------ there*/
  
  overflow: visible;
  margin: 0 26% 0 26%;
  box-sizing: content-box;
  backgroud-color: Grey;
}

.ey-col-svg {
  display: block;
  margin: 10% 20% 10% 20%;
  text-align: center;
  background-color: Red;
}

.ey-nav-bar {
  background-color: MediumVioletRed ! important;
  width: 100% !important;
  overflow: hidden;
  text-align: center;
  height: auto;
}

.ey-row-scale {
  text-align: center;
  padding-left: 5%;
  padding-right: 5%;
  display: block;
  background-color: Orange;
  max-width: 90%;
  overflow: hidden;
}

.ey-col-1 {
  text-align: center;
  background-color: Green;
  width: 24%;
  margin: 0;
  padding: 0;
  display: inline-block;
  border-collapse: collapse;
}

.ey-text-content {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 2vw;
  color: black;
  z-index: 10000;
}

#linkTextCell {
  text-align: center;
  width: 100%;
  vertical-align: middle;
  font-size: 150%;
  display: block;
  color: White;
  background-color: Blue;
}

#content {font-size: 2vw;}

<div id="content">
  <p>I am happy with this row of scaling svgs, except for one thing - I want the height of the svgs (class "areaSVG" ) to be fixed 30%, but I can't get it to stick. It sort of behaves as I wnat if I set a fixed pixel, but I would really love it if the height could be percentage based. If you know about svgs, perhaps you can figure out a way to do this?</p>
  
</div>
  








<div id="footer">

<div id="linkTextCell" class="navText hideRow">
  Links:
</div>



<div class="ey-nav-bar">
  <div class="ey-row-scale">


      <div class="ey-col-1">
        <a class = "eSVG areaAnchor" href="#">

   <div class="ey-col-svg">


     <svg  class="areaSVG" viewBox="20 0 37 73" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
         M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
         C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
 <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
         C12.787,37.379,11.41,38.895,11.41,38.895z" />
 <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
 <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
 <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
         c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
         c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
         c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
</svg>

   </div>

   <div class="ey-text-content navText">Link 1</div>
 </a>

 </div>

 
      <div class="ey-col-1">
        <a class = "sSVG areaAnchor" href="#">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
            M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
            C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
    <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
            C12.787,37.379,11.41,38.895,11.41,38.895z" />
    <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
    <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
    <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
            c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
            c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
            c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
   </svg>     </div>

           <div class="ey-text-content navText">Link 2</div>

         </a>

      </div>

      <a class = "wSVG areaAnchor"  href="#">

      <div class="ey-col-1">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
            M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
            C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
    <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
            C12.787,37.379,11.41,38.895,11.41,38.895z" />
    <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
    <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
    <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
            c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
            c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
            c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
   </svg>
          </div>
        <div class="ey-text-content navText">Link 3</div>

    </div>
  </a>


      <div class="ey-col-1">
        <a class = "nSVG areaAnchor" href="#">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
            M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
            C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
     <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
            C12.787,37.379,11.41,38.895,11.41,38.895z" />
     <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
     <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
     <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
            c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
            c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
            c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
     </svg>
           </div>

        <div class="ey-text-content navText">Link 4</div>
      </a>

  </div>

    </div>
    </div>


</div>

Solution

With a lot of help, I was able make this javascript solution. I hope this helps anyone who wants to get a row of svgs that are fully responsive to the height and width of the screen. Note that because the text in the footer containing the SVGs is not completely responsive to height, the svgs disappear at the smallest media heights. If you want it fully responsive, you should make the text divs height-dependent.

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

Here is the snippet:

$(document).ready(scaleSVG);
$(window).on('resize', scaleSVG);

function scaleSVG() {
  var scale = 0.9;
  var $eyCol = $(".ey-col-svg");
  var eyWidth = $eyCol.width();
  var eyHeight = $eyCol.height();
  var maxHeight = .4 * $(window).height();

  if(eyHeight < eyWidth && eyHeight < maxHeight)
    $(".areaSVG").height(maxHeight);

  var imageWidth = scale * $eyCol.width();
  var imageHeight = $eyCol.height();
  var tot = imageWidth > imageHeight ? imageHeight : imageWidth;
  //var imageHeight = 0.5*$(".ey-col-svg").height();

  $(".areaSVG").css("width", tot);
  $(".areaSVG").css("height", tot);
};

#footer {
  text-align: center;
  position: fixed;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  max-height: 40vh;
}

.areaSVG {
  /* this is the height setting I wanted to be  a percentage */
  /*height: 30%; <------ there*/
  overflow: visible;
  box-sizing: content-box;
  backgroud-color: Grey;
}

.ey-col-svg {
  display: block;
  height: calc(100% - 30px);
  max-height: calc(40vh - 2vw - 63px);
  padding: 0 0;
  margin:0;
  text-align: center;
  background-color: Red;
}

.ey-nav-bar {
  background-color: MediumVioletRed ! important;
  width: 100% !important;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.ey-row-scale {
  text-align: center;
  padding-left: 2.5%;
  padding-right: 2.5%;
  display: block;
  background-color: Orange;
  max-width: 95%;
  height: calc(100% - 28px);
  overflow: hidden;
}

.ey-col-1 {
  text-align: center;
  background-color: Green;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  border-collapse: collapse;
}

.ey-text-content {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 2vw;
  height: calc(2vw + 5px);
  line-height: calc(2vw + 5px);
  color: black;
  z-index: 10000;
}

#linkTextCell {
  text-align: center;
  width: 100%;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  font-size: 150%;
  display: block;
  color: White;
  background-color: Blue;
}

#content {
  font-size: 2vw;
}




.fillDark{fill:DimGray;}
.fillWhite{fill:White;}
.strokeDark{stroke:DimGray;}
.strokeWhite{stroke:White;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<div id="content">
  <p>Javascript solution to scaling svgs.  This isn't perfect.  At the very smallest heights the SVGs disappear (because the text isn't scaling in response to hight). But, with a bit of work you can customize this to your needs.</p>
  
</div>
  








<div id="footer">

<div id="linkTextCell" class="navText hideRow">
  Links:
</div>



<div class="ey-nav-bar">
  <div class="ey-row-scale">


      <div class="ey-col-1">
        <a class = "eSVG areaAnchor" href="#">

   <div class="ey-col-svg">


     <svg  class="areaSVG" viewBox="20 0 37 73"    xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
         M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
         C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
 <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
         C12.787,37.379,11.41,38.895,11.41,38.895z" />
 <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
 <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
 <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
         c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
         c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
         c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
</svg>

   </div>

   <div class="ey-text-content navText">Link 1</div>
 </a>

 </div>

 
      <div class="ey-col-1">
        <a class = "sSVG areaAnchor" href="#">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
            M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
            C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
    <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
            C12.787,37.379,11.41,38.895,11.41,38.895z" />
    <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
    <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
    <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
            c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
            c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
            c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
   </svg>     </div>

           <div class="ey-text-content navText">Link 2</div>

         </a>

      </div>

      <a class = "wSVG areaAnchor"  href="#">

      <div class="ey-col-1">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
            M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
            C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
    <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
            C12.787,37.379,11.41,38.895,11.41,38.895z" />
    <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
    <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
    <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
            c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
            c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
            c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
   </svg>
          </div>
        <div class="ey-text-content navText">Link 3</div>

    </div>
  </a>


      <div class="ey-col-1">
        <a class = "nSVG areaAnchor" href="#">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
            M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
            C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
     <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
            C12.787,37.379,11.41,38.895,11.41,38.895z" />
     <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
     <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
     <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
            M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
            c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
            c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
            c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
     </svg>
           </div>

        <div class="ey-text-content navText">Link 4</div>
      </a>

  </div>

    </div>
    </div>


</div>