Загрузка страницы с SVG файлами

1. Подключать svg файл лучшего всего через тег <object>

 <object type="image/svg+xml" data="SvgImg.svg" width="200" height="200"> 
          <img src="SvgImg.png" width="200" height="200" alt="image format png"/> 
    </object>    

1. Браузер не понимающий SVG проигнорирует тег <object> и перейдет к следующему тегу <img> и обработает его, как обычный HTML тег и выведет картинку. Подробнее здесь. Так надо делать, если вы хотите использовать интерактивность svg и это лучший способ добавления svg файлов в html.
2. Ставить диагноз по TV, а в вашем случае по предложенному видео,- сродни шаманству, но попробую:

У вас вероятнее всего в самом файле svg отсутствует viewport, поэтому картинка растягивается в каких-то моментах на весь экран. Браузер, если не указан viewport svg считает его по умолчанию: width="100%" и height="100%" (это и есть viewport по умолчанию) Поэтому попробуйте явно задать в шапке svg файла viewport и viewBox с равными величинами. Например:

<svg id="svg1" version="1.1" 
       xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
	  width="200" height="200" viewBox="0 0 200 200">

Кратко:

• Сначала дорабатываете файл svg
• Изменяете способ добавления svg файла в Html страничку

Можно попробовать скрыть все svg и img до момента загрузки стилей:

<style>svg, img { display: none; }</style>
<link rel="stylesheet" href="styles.css" />

Ну а в css файле выставляем нужный display.