Как да вмъкнете SVG в HTML документ?

Има няколко начина за вмъкване на SVG в HTML:

• Inline SVG: Вмъкване на SVG кода директно в HTML с помощта на таг <svg>.
• Таг <img>: Използване на таг <img> с атрибут src, сочещ към SVG файл.
• Таг <object>: Вмъкване на SVG чрез таг <object>.
• Таг <embed>: Вмъкване на SVG чрез таг <embed>.
• CSS: Използване на SVG като фон чрез CSS.
• <iframe>: Вмъкване на HTML страница с SVG чрез <iframe>.

Всеки метод има свои особености и предимства:

Метод	Предимства	Недостатъци	Приложение
Inline SVG	Пълен контрол, интерактивност с JS/CSS	Увеличава размера на HTML, сложност при кеширане	Малки и често променящи се SVG, иконки
<img>	Простота, кеширане	Ограничен контрол, липса на интерактивност с JS	Статични изображения
<object>	Семантика (външен обект), интерактивност с JS	Малко по-сложно от <img>, поддръжка в браузърите	Комплексни SVG, съдържание за fallback
<embed>	По-лесен от <object>, поддръжка на остарели плъгини	Не се препоръчва в HTML5	Съвместимост със стар код
CSS Background	Гъвкаво позициониране, без допълнителни тагове в HTML	Липса на интерактивност с JS, ограничен контрол	Декоративни елементи, шарки
<iframe>	Пълна изолация, зареждане на отделна страница	Надвишава разходите, трудности при взаимодействие	Вмъкване на сложни, независими елементи

Пример за Inline SVG:

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

Пример за използване на таг <img>:

<img src="image.svg" alt="Описание SVG">

Пример за използване на таг <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Запасно съдържание -->
  <img src="image.png" alt="Алтернативно изображение">
</object>

Пример за използване на CSS:

.element {
  background-image: url('image.svg'); /* Използване на SVG като фон */
  background-size: cover; /* Пример за стилизиране */
}