SVG изображение не отображается в браузерах, кроме ie

Question

У меня есть меню переключения формата изображения SVG. Я добавляю его html, но он не отображается должным образом.

Вот виды для проводника и chrome

Вот svg

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="24.000000pt" height="31.000000pt" viewBox="0 0 24.000000 31.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,31.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">

Вот мой html

.sidebar-toggle {
    float: left;
    background: url('menucursor.svg') no-repeat !important;
    padding: 2px 10px 0 3px;
    font-family: fontAwesome;
    position: absolute;
    font-size: 20px;
    text-decoration: none;
}

<a class="sidebar-toggle" data-toggle="offcanvas" href="#" role="button"></a>

Когда я пытаюсь использовать background-image атрибут не принимает из браузера.

Есть ли способ показать его правильно?

Answer 1

Поскольку ваш якорь a не имеет дочерних элементов, он не может занимать место в вашем домике. Вам придется явно назначить ваши размеры:

.sidebar-toggle {
  display: block;
  width: 20px; //Change this to whatever meets your needs, I suggest the actual width of the svg.
  height: 20px; //Change this to whatever meets your needs, I suggest the actual height of the svg.
  background-size: 100% 100%; //Or background-size: cover; or background-size: contain;
  float: left;
  background: url(../../assets/images/icons/menucursor.svg) no-repeat !important;
  padding: 2px 10px 0 3px;
  font-family: fontAwesome;
  position: absolute;
  font-size: 20px;
  text-decoration: none;
}