SVG-объекты изначально загружаются в браузере по вертикали, а затем по горизонтали

Question

У меня есть группа SVG, которые должны сидеть рядом друг с другом горизонтально.

HTML-код:

<svg height="70" width="70" style="position:relative; z-index: 1; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>

<object data="imgs/su.svg" type="image/svg+xml">
  <img src="imgs/su.svg" />
</object>

<svg height="70" width="70" style="position: relative; z-index: 0; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>
.
.
.

Мой браузер - Chrome, и в итоге происходит то, что Chrome загружает каждый из них в свой «блок», вызывая, таким образом, разрыв строки, и как только все элементы загружаются, затем переупорядочивает их по горизонтали.

Эта проблема занимает 2 секунды , чтобы решить ее на смартфоне, что немного уродливо. Любые решения?

Answer 1

Как я уже говорил ранее, избавьтесь от <object>, оборачивая ваше изображение SVG ненужным, и вы будете в порядке:

<svg height="70" width="70" style="position:relative; z-index: 1; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>

<img src="https://upload.wikimedia.org/wikipedia/commons/6/67/Firefox_Logo%2C_2017.svg" width="70" height="70" style="position: relative; z-index: 0; margin: -18px;" />

<svg height="70" width="70" style="position: relative; z-index: 0; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>