Способы подключения SVG

Первый способ и самый распространенный - с помощью открывающего и закрывающего тега svg

<svg>  </svg>

Поддержка у этого способа очень хорошая, но IE8 не поддерживает.

Поскольку svg это прежде всего векторный рисунок, он и вставляется как обыкновенный рисунок в HTML через тег img

<img src="logo.svg" alt="Company Logo" >

Третий способ это подключить через свойство фона background в стилях CSS

.element {
  background: url(mySVG.svg);
}

С помощью тега <object>, который сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Внутри данного тега можно разместить fallback, то есть резервное содержимое, которое появится если изображение с атрибута data не доступно. Например, можно вставить туда загрузку картинки в другом формате с помощью тега img.

<object type="image/svg+xml" data="logo.svg">
  <!--fallback-->
  <img src="logo.png" alt="logo"/>
</object>

Как элемент <embed>, который используется для загрузки и отображения объектов, которые исходно браузер не понимает.

<embed type="image/svg+xml" src="mySVG.svg" />

Через тег <iframe>, который является контейнером и находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. Можно также указать альтернативный текст fallback, который увидят пользователи, если этот тег браузером не поддерживается.

<iframe  src="mySVG.svg">
  <!--fallback-->
</iframe>

Это шесть основных способов подключения svg элемента на HTML страницу. Самые распространенные это первые три.