Scaling an SVG <img> to fit viewport - html

Question

Here's the WIP :
www.wearethefirehouse.com/wcftest
Logo is .SVG from Illustrator.
My code is (included the whole section for perspective, maybe conflicting div's?):
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
If you shrink browser window you'll see that it STARTS fine, then jumps around a bit, finally settling at a uselessly large iteration by the time you're in a mobile viewport.
How do I get it to scale cleanly?
This is my first time with SVG and I know it's something I need to use more... trial by fire, right?
Any help would be appreciated!

Answer 1

This has nothing to do with SVG. It's jumping around because of Bootstrap and the way it is resizing elements on the page based on page width.
If you don't want it to jump so much, you could use different bootstrap styles. Eg.:
<div class="col-md-12>
<img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>