How to set responsive SVG logo inside Bootstrap?

HTML & CSS
1

I try to set dynamic SVG inside the bootstrap theme. Which settings are the correct CSS/HTML to show dynamic responsive effect but aspect ratio will be kept.

<a class="navbar-brand" href="./index.html" aria-label="">
<img class="navbar-my-logo" src="/svglogos/mylogo.svg" alt="">
</a>

and CSS:

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-my-logo {
  width: 100%;
  min-width: 6rem;
  max-width: 6rem;
}
img, svg {
  vertical-align: middle;
}

Source: https://getbootstrap.com/docs/4.0/components/navbar/

2

If the min width is the same as the max width then all you get is a fixed width at 6 rem. They are therefore pointless when same values are used.

The min width and max width need to be different values or the element won’t resize between that range.

You also need to add height:auto or the aspect ratio of the image will be wrong.

3 
<div class="sidebar-logo paddingclass" id="">
<a class="navbar-brand" href="./index.html" aria-label="">
<img class="navbar-my-logo heightclass" src="/svglogos/mylogo.svg" alt="">
</a>
</div>

sidebar-logo {
 border-bottom: 1px dashed #CCC;
}
.paddingclass {
padding-right: 2rem;
padding-left: 2rem;
}
.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-my-logo {
 width: 100%;
 height:auto;
}
img, svg {
 vertical-align: middle;
}
.heightclass {
 /* height: 60px;*/
}
4

Has that helped?

I’d need to see a working example if you still have problems.

5

I will need to test when I have a new SVG.