CODEWITHSUNDEEP
csssvg
agentem
agentem

Reputation: 821

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>

Upvotes: 39

Views: 125175

Answers (6)

Aashish Kumar
Aashish Kumar

Reputation: 145

Use Bootstrap class img-fluid to make svg responsive.

<svg class="img-fluid" 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>

Upvotes: -1

brenna
brenna

Reputation: 778

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>

Upvotes: 56

NVRM
NVRM

Reputation: 13162

⚠️ Something changed in the contentBoxSize object in newer browsers versions, those demos weren't working while they was before. It's fixed here, see edit to support older browsers.

Svg is powerful. It's all about the viewBox., using JavaScript to control the viewBox allows to create amazing impossible stuffs.

Here is a way to reset the viewBox to the parent container dimensions, on dimensions change.

Using the javascript resize Observer API.

function resetViewbox(e){
   box.setAttribute("viewBox","0 0 "+e[0].contentBoxSize[0].inlineSize+" "+e[0].contentBoxSize[0].blockSize)      
   //console.log("New viewBox: ", box.getAttribute("viewBox"))   
}

new ResizeObserver(resetViewbox).observe(fluid)
#fluid {
  width: 200px;
  height:100px;
  overflow: auto;
  resize: both;
  border: 3px black solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8vh
}
<div id="fluid">
   <svg id="box" viewBox="0 0 100 100">
   <circle cx="76" cy="56" r="30" fill="blue"/>
   <text  x="10" y="30">I stay readable!</text>
   </svg>
</div>

This can be used in a lot of different ways:

function resetViewbox(e){
   //console.log(e[0].contentBoxSize[0].blockSize)
   text.setAttribute("y", e[0].contentBoxSize[0].blockSize / 4)
}

new ResizeObserver(resetViewbox).observe(fluid)
#fluid {
  width: 280px;
  height:100px;
  overflow: auto;
  resize: both;
  border: 3px black solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2rem
}
<div id="fluid">
   <svg id="box" viewBox="0 0 280 100">
   <circle cx="76" cy="56" r="30" fill="blue"/>
   <text id="text" x="10" y="30">I stay readable!</text>
   </svg>
</div>

Upvotes: 0

Josiah Nyarega
Josiah Nyarega

Reputation: 703

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

Upvotes: 10

Chaitanya Mogal
Chaitanya Mogal

Reputation: 398

Just provide height and width to svg tag.

svg {
      width:  auto;
      height: auto;
}

Upvotes: 4

Divyanshu Rawat
Divyanshu Rawat

Reputation: 4721

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.

Upvotes: 2

Related Questions