Making Svg Responsive

Making SVG responsive

Try adding a container element with a defined width around your SVG, then removing width and height. It should fill the space.

You also need to increase the width of the viewBox to accommodate the whole shape.

.svg-container {
 width: 300px;
 height: 150px;
 resize: both;
 overflow: auto;
 border: 1px dashed #aaa;
}

svg {
 width: 95%;
 height: 95%;
}

<div class="svg-container">
  <svg viewBox="0 0 60 100"> 
    <path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.318,15.823l3.1-1.937 c6.64,10.515,10.152,22.797,10.152,35.624c0,12.927-3.56,25.284-10.294,35.848l-2.959-1.849L39.891,100L52.22,89.183l-3.14-1.962 C56.037,76.298,59.717,63.529,59.717,50.177z"/> 
  </svg>
</div>

issues making svg responsive

it seems to me that your viewbox is wrong, it should be viewbox="-20 -20 1130 440"

.home-wrapper {
  background : red;
  margin     : 1em;
  padding    : 0;
  font-size  : 0;
  }
svg {
  width      : 100%;
  height     : auto;
  background : yellow;
  }
.cls-1 {
  fill         : none;
  stroke       : #0d1738;
  stroke-width : 3px;
  }
.cls-2 {
  fill : #0d1738bb;
  }
.cls-4 {
  fill : #3d4df3;
  }
.cls-3 {
  font-size   : 38px;
  font-family : TitilliumWeb-SemiBoldTitillium Web;
  font-weight : 600;
  }
.cls-4 {
  font-size   : 20px;
  font-family : TitilliumWeb-Regular,Titillium Web;
  }

<div class="home-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="-20 -20 1130 440"> <!-- width="1100" height="400.347"-->
    <defs></defs>
    <g id="Grupo_209" stroke-width="100%" data-name="Grupo 209" transform="translate(-78 -2163.155)">
      <path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate(79.5 2455.191)" d="M0 0h757"/>
      <path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283.825v-60.237" transform="translate(-662.126 -60.434)"/>
      <path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305.806 2278.306h803.112" transform="translate(-91.918 -13.804)"/>
      <g id="Grupo_116" data-name="Grupo 116" transform="translate(0 1276.691)">
        <path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
        <g id="Grupo_110" data-name="Grupo 110" transform="translate(-33 -1.92)">
          <text id="_4430" data-name="4430" class="cls-3" transform="translate(420 982.231)"><tspan x="-42.56" y="0">2</tspan></text>
          <text id="USUARIOS" class="cls-4" transform="translate(420 1020.231)"><tspan x="-44.83" y="0">U</tspan></text>
        </g>
      </g>
      <g id="Grupo_115" data-name="Grupo 115" transform="translate(3 1276.691)">
        <path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/>
        <g id="Grupo_111" data-name="Grupo 111" transform="translate(-2 -71.5)">
          <text id="_775" data-name="775" class="cls-3" transform="translate(742 1051.811)"><tspan x="-31.92" y="0">5</tspan></text>
          <text id="CURSOS" class="cls-4" transform="translate(742 1089.811)"><tspan x="-35.48" y="0">C</tspan></text>
        </g>
      </g>
      <g id="Grupo_114" data-name="Grupo 114" transform="translate(0 1276.691)">
        <path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/>
        <g id="Grupo_112" data-name="Grupo 112" transform="translate(50 -71.5)">
          <text id="_4" data-name="4" class="cls-3" transform="translate(1048 1051.811)"><tspan x="-10.64" y="0">4</tspan></text>
          <text id="PAÍSES" class="cls-4" transform="translate(1048 1089.811)"><tspan x="-30.38" y="0">P</tspan></text>
        </g>
      </g>
      <path id="Polígono_22" data-name="Polígono 22" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(86 2399.502)"/>
      <path id="Polígono_23" data-name="Polígono 23" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(495 2399.502)"/>
      <path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate(79.5 2302.191)" d="M0 0v153"/>
    </g>
  </svg>
</div>

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>

HTML SVG responsive size

Try using CSS to set the SVG width to 100% and height to auto:

<div style="margin: -10px; text-align: center;">
  <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
</div>

how to make svg responsive

Contrary to the assumptions in the comments it is perfectly fine to use length values specified as percentages. The spec covers the details in its basic data types section.

Combining this knowledge with the hints from the article you linked to in your question you could end up with something like the following for a responsive layout:

<svg viewbox="0 0 3840 7000" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">

Making SVG Responsive based on width 100% like images

The reason your image won't scale is because it doesn't have a viewBox.

You are linking to a <g> element. That group is inside an SVG that has a viewBox, but that viewBox won't be used. The browser will look for a viewBox on the outer-most <svg> element. That element doesn't have one.

To prove my point, copy the winner-cup viewBox to the root/outermost <svg> element. The SVG will now scale to 100%.

<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 971.9 842.9">

As to the reason why it was only scaling to a height of 150px. You will find the answer here:

SVG height percentage not working under Linux browsers?

In your case the parent element is <embed> (and <object>) rather than <body>, but the reason is the same.

How to make this SVG responsive?

You need to replace width and height with viewBox="0 0 1704 586" in source code of SVG.

Responsive SVG viewBox

Add width & height properties to your svg css. With width set and height auto.

body {  margin: 0;  text-align: center;}
svg#ham-btn {  margin: 2rem;  border: 1px solid black;  fill: #383838;  /* percentage of viewport - height will autocalculate */  width: 7vw;  height: auto;}

<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">  <style>    #ham-btn {      cursor: pointer;    }    #ham-btn:hover #r1 {      transition: transform 0.2s;      transform-origin: 50% 50%;      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);    }    #ham-btn:hover #r2 {      transition: x 0.2s;      x: 120%;    }    #ham-btn:hover #r3 {      transition: transform 0.2s;      transform-origin: 50% 50%;      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);    }      </style>  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" /></svg>

How to make responsive SVG/CSS background with aspect ratio

Here the navy-blue SVG has the width of 5000px. It is positioned 100px right and the overflow of the header is hidden. So, some/most of the SVG is hidden to the left. The logo image is also positioned absolute and to the right.

(the image is also a SVG, but in a <img>)

header {
  position: relative;
  height: 100px;
  overflow: hidden;
}

header svg {
  position: absolute;
  right: 100px;
}

header img {
  position: absolute;
  right: 0;
}

header nav {
  position: relative;
  color: white;
}

@media (min-width: 1024px) {
  header {
    max-width: 1024px;
  }
}

@media (min-width: 1366px) {
  header {
    max-width: 1366px;
  }
}

<header>
  <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdHRlcm4gaWQ9InAxIiB2aWV3Qm94PSIwIDAgMTAgMTAiIHdpZHRoPSIxJSIgaGVpZ2h0PSIzJSI+CjxjaXJjbGUgcj0iNSIgY3g9IjUiIGN5PSI1IiBmaWxsPSJuYXZ5Ii8+CjwvcGF0dGVybj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjcDEpIi8+Cjwvc3ZnPg=="
    alt="logo" width="300" height="100" />
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 100" height="100">
    <polygon points="0,0 5000,0 4950,100 0,100 z" fill="navy" />
  </svg>
  <nav>
    <ul>
      <li>Menu</li>
      <li>Menu</li>
    </ul>
  </nav>
</header>

How to make SVG responsive, with fixed elements?

From what I'm getting out of your question, listening for a resize event is indeed not going to do the cut for printing. So what you need to do is listen for a print request, and run your resize code from it:

window.addEventListener("beforeprint", beforePrint);
window.addEventListener("afterprint", afterPrint);
if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

function beforePrint() {
    //Resize for printing
}

function afterPrint() {
    //Resize again for after printing
}

This is taken from this article. Please read over it for a more detailed description, limitations, and other possible work-arounds.

For any other situations where you need to resize but the window resize event isn't sufficient, there's usually at least a semi-simple work-around. JavaScript is your only option for something as complex as sorting and sizing items in a graph.