Какие есть способы вставить SVG на страницу?

Поиск

SVG – масштабируемая векторная графика, которая может быть вставлена на веб-страницу несколькими способами:

Использование тега <img>. SVG-файл можно вставить на страницу с помощью тега <img> и указать путь к файлу в атрибуте src. Например:

<img src="image.svg" alt="SVG image">

Использование тега <object>. Тег <object> позволяет вставить SVG-файл в документ и задать его параметры. Ниже приведен пример:

<object type="image/svg+xml" data="image.svg" width="100" height="100">
  <img src="fallback.png" alt="SVG image">
</object>

Использование тега <embed>. Тег <embed> также позволяет вставить SVG-файл на страницу и задать его параметры. Пример:

<embed type="image/svg+xml" src="image.svg" width="100" height="100">

Использование тега <svg>. SVG-изображение можно вставить непосредственно в HTML-код страницы с помощью тега <svg>. Например:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Использование CSS. SVG-изображения можно задавать через CSS, используя свойство background-image. Пример:

div {
  background-image: url('image.svg');
  width: 100px;
  height: 100px;
}

Каждый из этих способов имеет свои преимущества и недостатки, и выбор конкретного способа зависит от конкретной ситуации.