Невозможно использовать дисплей: встроенный в SVG

Question

Я пытаюсь выровнять изображение SVG рядом с текстом логотипа.Однако он не будет работать с display: inline.

HTML

<div id="logo">
    <img src="images/logo.svg" alt="ArtPass">
    <p>ArtPass</p>
</div>

CSS

#logo {
    color: $white;
    font-weight: 700;
    font-size: 1.5 rem;
    float: left;
    margin:0;
    display:inline;
    img {
        display:inline;
    }
}

Answer 1

Просто измените стиль абзаца display.Потому что элемент p по умолчанию имеет стиль display:block.

#logo>p { display: inline-block }

<div id="logo">
  <img src="https://via.placeholder.com/30/4B89DA/" alt="">
  <p>ArtPass</p>
</div>

Answer 2

В соответствии со спецификацией SVG значение display: none указывает, что данный элемент и его дочерние элементы не должны отображаться напрямую (т. Е. Эти элементы отсутствуют в дереве визуализации), поэтому любое значение, отличное от none или inherit показывает, что данный элемент будет обработан пользовательским агентом SVG.