为什么矢量和文本在此导航栏中没有垂直对齐？

Question

我正在使用HTML中的导航栏。我不明白为什么这些元素在导航栏中排列不好。

body {
    background-color: #ECEFF1; /* Blue Gray 50 */
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

#header {
    background-color: #ba68c8; /* Purple 300 */
    color: #ffffff; /* White */
    height: 24px;
    padding: 8px;
}

.header-link {
    font-size: 24px;
    text-decoration: none;
}

<div id="header">

    <a class="header-logo" href="#">
        <img src="http://www.sigmacubes.com/img/logo_h.svg" height="24" />
    </a>

    <a class="header-link" href="#">
      Text
    </a>

</div>

尽管svg垂直对齐，但文本不会垂直对齐。为什么会这样？