How to Make a <Svg> Element Expand or Contract to Its Parent Container

How to make an svg element responsive to it's parent container?

Just set the width and height attributes of the SVG to "100%". Either in the SVG, or via CSS.

Secondly, fix your other attributes:

viewBox values should not have commas.
it is preserveAspectRatio, not preserveAspect, and meet, not Meet

#main {  width: 400px;  height: 100px;  border: 4px solid red;}

<div id="main">  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">    <rect x="0" y="0" width="100" height="100" fill="green"/>  </svg></div>

scaling an svg to be the width of the screen

Try this SVG header, wrapped around a <div> that controls the width, height using CSS.

<body>
  <div style="width: 100%; height: 100%">

    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1368 775" enable-background="new 0 0 1368 775" xml:space="preserve">
    ...
    </svg>
  </div>
</body>

Forcing an SVG to resize based on percentage height

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>

How to Make a <Svg> Element Expand or Contract to Its Parent Container

How to make an svg element responsive to it's parent container?

scaling an svg to be the width of the screen

Forcing an SVG to resize based on percentage height

Related Topics

Leave a reply