Making SVG responsive
I have an SVG with the following code. I'd like to make it have a responsive width, and I've read that you shouldn't set width and height on the viewport, but when I remove them the SVG disappears. How should I change this so that the SVG will resize?
.thumb_arrow{
z-index: 1000;
background-size: 100% 100%;
float: right;
position:relative;
bottom: 2rem;
left:2rem;
margin-right:1rem;
@media (min-width: @screen-medium) {
margin-right: 15rem;
}
}<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10em" height="10em"viewBox="0 0 50 100" enable-background="new 0 0 73.672 275.734" xml:space="preserve">
<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>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: 10em;
}<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>Just provide height and width to svg tag.
svg {
width: auto;
height: auto;
}
You can set the max-with to 100% i.e
svg {
max-width: 100%
}
This means, the image will always adapt to the width of its container
For me I had to make the circle responsive instead of path, This is how I did that.
.circle-container {
width: 6vw;
height: 6vw;
}
<div class='circle-container'>
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="46" cy="45" r="40"></circle>
</svg>
</div>
P.S - Circle r, cx, cy might be different for you, but the context set the width and height attributes of the SVG to "100%", viewBox.