how can i make an svg responsive

Question

Hello i'm new to using svg while watching a tutorial the autor created an svg file with the following attributes to make it resposive and it works for him, the problem is when i'm trying to do the same the shape gets bigger and it's not resposive at all. please help thank you

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 400">

<style type="text/css">
.st0{fill:#231F20;}
.circle{
fill:#27AAE1;

}

</style>
<g id="container" class="colors">
<circle class="st0" cx="200" cy="200" r="197.5"/>
</g>
<g id="dots" class="colors">
<path class="circle" id="c1" d="M146.98,363.54L146.98,363.54L146.98,363.54c-9.2-2.98-14.23-   12.851-11.25-22.05l0,0
    c2.97-9.19,12.84-14.23,22.04-11.25l0,0c9.19,2.979,14.23,12.85,11.25,22.04l0,0c-2.4,7.409-9.26,12.109-16.64,12.109l0,0
    C150.59,364.39,148.77,364.12,146.98,363.54z"/>
 <path class="circle" id="c2" d="M231.13,352.25c-2.99-9.19,2.04-19.061,11.229-22.05l0,0c9.19-2.99,19.07,2.04,22.061,11.229l0,0
    c2.979,9.19-2.04,19.061-11.23,22.05l0,0c-1.8,0.59-3.63,0.86-5.42,0.86l0,0C240.39,364.34,233.53,359.64,231.13,352.25z"/>
<path class="circle" id="c3" d="M61.03,301.16L61.03,301.16L61.03,301.16c-5.69-7.811-3.98-18.761,3.83-24.45l0,0
    c7.81-5.7,18.76-3.98,24.45,3.83l0,0c5.7,7.81,3.98,18.75-3.83,24.45l0,0c-3.11,2.27-6.72,3.359-10.29,3.359l0,0
    C69.79,308.35,64.46,305.85,61.03,301.16z"/>
<path class="circle" id="c4" d="M314.63,304.87c-7.82-5.69-9.55-16.63-3.86-24.45l0,0c5.681-7.82,16.63-9.54,24.45-3.86l0,0
    c7.811,5.69,9.54,16.63,3.85,24.45l0,0l0,0l0,0c-3.42,4.71-8.76,7.21-14.159,7.21l0,0C321.34,308.22,317.729,307.13,314.63,304.87z
    "/>
 <path class="circle" id="c5" d="M28.13,200.18c-0.01-9.66,7.81-17.5,17.48-17.51l0,0c9.66-0.01,17.51,7.81,17.52,17.48l0,0
    c0,9.66-7.82,17.5-17.49,17.52l0,0c0,0-0.01,0-0.02,0l0,0C35.97,217.67,28.13,209.84,28.13,200.18z"/>
 <path class="circle" id="c6" d="M336.88,200c0-0.02,0-0.03,0-0.05l0,0c-0.01-0.08-0.01-0.16-0.01-0.24l0,0c-0.021-9.67,7.8-17.52,17.47-17.54
    l0,0c9.66-0.02,17.51,7.8,17.53,17.46l0,0c0,0.07,0,0.14,0,0.21l0,0c0,0.05,0,0.11,0,0.16l0,0c0,0,0,0,0.01,0l0,0
    c0,9.66-7.84,17.5-17.5,17.5l0,0C344.71,217.5,336.88,209.66,336.88,200z"/>
<path class="circle" id="c7" d="M64.7,123.58c-7.82-5.68-9.56-16.62-3.88-24.44l0,0c5.68-7.83,16.62-9.56,24.44-3.89l0,0
    c7.82,5.68,9.56,16.63,3.88,24.45l0,0c-3.42,4.71-8.76,7.22-14.17,7.22l0,0C71.4,126.92,67.81,125.83,64.7,123.58z"/>
 <path class="circle" id="c8" d="M310.6,119.34L310.6,119.34c-5.7-7.8-4-18.75,3.8-24.45l0,0c7.811-5.7,18.761-4,24.46,3.8l0,0
    c5.7,7.81,4,18.76-3.81,24.46l0,0c-3.11,2.27-6.72,3.37-10.31,3.37l0,0C319.35,126.52,314.03,124.03,310.6,119.34z"/>
 <path class="circle" id="c9" d="M135.43,58.64c-3-9.19,2.02-19.07,11.21-22.07l0,0c9.19-3,19.07,2.02,22.06,11.21l0,0
    c3,9.19-2.01,19.07-11.2,22.07l0,0c-1.8,0.59-3.63,0.87-5.43,0.87l0,0C144.7,70.72,137.84,66.02,135.43,58.64z"/>
<path class="circle" id="c10" d="M242.09,69.71c-9.2-2.97-14.25-12.83-11.28-22.03l0,0c2.971-9.19,12.84-14.24,22.03-11.27l0,0
    c9.2,2.97,14.25,12.83,11.28,22.03l0,0c-2.391,7.41-9.261,12.13-16.65,12.12l0,0C245.689,70.56,243.88,70.29,242.09,69.71z"/>
</g>
</svg>

This may help. http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php — Pain, Aug 28 '14 at 20:20

score 0 · Answer 1 · answered Dec 11 '14 at 03:44

With SVG, it gets a little weird:

First thing you should do is wrap the SVG tag in a parent DIV tag.

<div id="parent_element">

    <svg id="your_svg" viewBox="0 0 400 400"></svg>

</div>

Add the attribute preserveAspectRatio="xMinyMin meet" to the SVG

<div id="parent_element">

    <svg id="your_svg" preserveAspectRatio="xMinyMin meet" viewBox="0 0 400 400"></svg>

</div>

Looking at the CSS, you need to set the child element absolutely positioned relative to the parent element:

/*Parent container*/

div {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
    vertical-align: middle;
}


/*SVG child*/

svg {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

Adjust as needed. Notice the padding-bottom hack. It is based on the height/width of the SVG ViewBox. For more information on that check out this Codrops Article and you can find another (and shorter) tutorial in this article

how can i make an svg responsive

1 Answers1