SVG responsive on div - html

Question

As the title said, I want to add an SVG border animation to a div. I tryed with a static div but now I want to make it works even if the div width and height change dynamically (as thumbnail class with Bootstrap)
Here is my SVG :
<svg>
<line class="top" x1="0" y1="0" x2="3000" y2="0"/>
<line class="left" x1="0" y1="3000" x2="0" y2="0"/>
<line class="bottom" x1="3000" y1="300" x2="0" y2="300"/>
<line class="right" x1="300" y1="0" x2="300" y2="300"/>
</svg>
Thanks for the help, here is a jsbin : http://jsbin.com/suvinakaqa/1/edit

Answer 1

If you want the SVG to responsively fill the <div>, you need to give it a viewBox and set preserveAspectRatio="none" so that it stretches to fill the <div> both horizontally and vertically. Otherwise it will just keep its aspect ratio and just scale up or down to fit inside the <div>.
Note that the stretching that occurs, now that you've disabled aspect ratio, will cause the horizontal lines to appear to have a different width to the vertical ones. To fix that you could add vector-effect="non-scaling-stroke" to the lines.
.myDiv
{
width: 100%;
height: 300px;
}
<div class="myDiv">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
stroke="black" stroke-width="4">
<line class="top" x1="0" y1="0" x2="100" y2="0" vector-effect="non-scaling-stroke"/>
<line class="left" x1="0" y1="100" x2="0" y2="0" vector-effect="non-scaling-stroke"/>
<line class="bottom" x1="100" y1="100" x2="0" y2="100" vector-effect="non-scaling-stroke"/>
<line class="right" x1="100" y1="0" x2="100" y2="100" vector-effect="non-scaling-stroke"/>
</svg>
</div>

Answer 2

For eg you have following in HTML
<div class="myClass">
<svg>
<line class="top" x1="0" y1="0" x2="3000" y2="0"/>
<line class="left" x1="0" y1="3000" x2="0" y2="0"/>
<line class="bottom" x1="3000" y1="300" x2="0" y2="300"/>
<line class="right" x1="300" y1="0" x2="300" y2="300"/>
</svg>
</div>
Please use following CSS
.myClass svg{
width:100% !important;
height:auto;
}