Kako umetnuti SVG u HTML dokument?

Постоји неколико начина за убацивање 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; /* Пример стилизовања */
}