Fitting svgs in divs with multiple elements - html

Question

I am new to using svgs in CSS. My goal is to place the svg that I have referenced below (a battery icon) inside of the divs of item class, centered vertically, in the first case to the left of the bullet (in the item labeled foo), and in the second case to the right of the text (in the item labeled bar).
I have tried using changing the display of the image to inline-block, and inserting
<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />
within the item (see below), but this does not work. What is the best practice with inserting svg elements inline in divs with other elements? Should span or background-size:contain be used?
#foo { background: #00FF7F; }
#bar { background: #ff0000;}
.items { text-align: center; font-weight: 500; color: #fff; border-width: 2px;
border-color: #fff; padding: 2px;}
.item, .item-selected{ display: inline-block; font-weight: 500;
text-align: center;
vertical-align: middle;
border-width: 2px;
background-color: #484848;
opacity: 0.85;
border-color: green;
border-width: 2px;
border-radius: 3px;
padding: 2px;
color: #fff;
cursor: pointer;
}
.item-selected{
background-color: #fff;
color: #181818;
}
.bullet { display: inline-block; margin: 3px 3px 0px 10px; width: 10px; height: 10px; border-radius: 7px; }
.label { display: inline-block; font-weight: 300;}
image {
width: 50px;
height: 50px;
display: inline-block;
}
<div class='items'>
<div class='item' id= 'wrk'><image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" /><div class='bullet' id='foo'></div><div class='label'>foo</div></div>
<div class='item-selected' id = 'brk'><div class='bullet' id='bar'></div><div class='label'>bar</div></div>
</div>
<svg>
<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />
</svg>

Answer 1

You can use svg as image using img then adjust CSS for alignment:
#foo {
background: #00FF7F;
}
#bar {
background: #ff0000;
}
.items {
text-align: center;
font-weight: 500;
color: #fff;
border-width: 2px;
border-color: #fff;
padding: 2px;
}
img {
vertical-align:middle;
}
.item,
.item-selected {
display: inline-block;
font-weight: 500;
text-align: center;
vertical-align: middle;
border-width: 2px;
background-color: #484848;
opacity: 0.85;
border-color: green;
border-width: 2px;
border-radius: 3px;
padding: 2px;
color: #fff;
cursor: pointer;
}
.item-selected {
background-color: #fff;
color: #181818;
}
.bullet {
display: inline-block;
margin: 3px 3px 0px 10px;
width: 10px;
height: 10px;
border-radius: 7px;
}
.label {
display: inline-block;
font-weight: 300;
}
image {
width: 50px;
height: 50px;
display: inline-block;
}
<div class='items'>
<div class='item' id='wrk'>
<img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
<div class='bullet' id='foo'></div>
<div class='label'>foo</div>
</div>
<div class='item-selected' id='brk'>
<div class='bullet' id='bar'></div>
<div class='label'>bar</div>
<img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
</div>
</div>