SVG в поведении HTML-таблицы с изменением размеров и границ

Question

Я экспериментировал с SVG внутри ячеек таблицы HTML.Для всех элементов HTML установлено box-sizing в border-box, поэтому размеры границ включены в размер элементов.

К сожалению, содержимое ячеек, таких как текст, ведет себя иначе, чем SVG, где размеры границ отсутствуют (илитолько частично) включены в высоту ячейки (в зависимости от того, какой браузер вы используете).

Я настроил скрипку с кодом ниже здесь

Таблица с SVG

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

* {
  box-sizing: border-box;
}

tr {
  height: 22px;
}

<table>
  <tr class="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="second">
    <td>4</td>
    <td style="border-top: 1px solid red; border-bottom: 1px solid blue">5</td>
    <td style="padding: 0; border-top: 1px solid red; border-bottom: 1px solid blue">
      <svg style="display: block" width="22" height="22" viewBox="0 0 22 22">
        <circle cx="11" cy="11" r="10" stroke="green" stroke-width="1" fill="yellow" />
      </svg>
    </td>
  </tr>
  <tr class="third">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
<table>
  <tr class="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="second">
    <td>4</td>
    <td style="border-top: 1px solid red; border-bottom: 1px solid blue">5</td>
    <td style="padding: 0; border-top: 1px solid red; border-bottom: 1px solid blue">
      6
    </td>
  </tr>
  <tr class="third">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table> 

Вы увидите, что в Chrome второй ряд с SVG выше (23 пикселя), чем второй ряд без SVG.В Firefox размер ячейки SVG вообще не уменьшается, даже если ячейка SVG имеет только одну границу сверху или снизу.IE и Edge, кажется, делают это, хотя я нашел более сложные примеры таблиц, где is не будет работать каким-то образом.

Мой вопрос: если в Chrome это так, как это должно работать (не удалось найти спецификацию для этого) или если это не так.