SVG-ны HTML документине кантип киргизсе болот…

SVG'ни HTMLге киргизүүнүн бир нече жолдору бар:

Inline SVG: SVG кодун түздөн-түз <svg> тегинин ичинде киргизүү.
<img> теги: src атрибуту менен <img> тегин колдонуу, ал SVG файлга көрсөтөт.
<object> теги: SVG'ни <object> теги аркылуу киргизүү.
<embed> теги: SVG'ни <embed> теги аркылуу киргизүү.
CSS: SVG'ни CSS аркылуу фон катары колдонуу.
<iframe>: SVG менен HTML баракчаны <iframe> аркылуу киргизүү.

Ар бир ыкма өзүнүн өзгөчөлүктөрү жана артыкчылыктары бар:

ыкма	Артыкчылыктары	Кемчиликтери	Колдонуу
Inline SVG	Толук көзөмөл, JS/CSS менен интерактивдүүлүк	HTMLдин өлчөмүн көбөйтөт, кэшке салуу кыйынчылыгы	Кичинекей жана көп өзгөрүлүүчү SVG, иконалар
`<img>`	Жөнөкөй, кэшке салуу	Чектелген көзөмөл, JS менен интерактивдүүлүк жок	Статикалык сүрөттөр
`<object>`	Семантика (сырткы объект), JS менен интерактивдүүлүк	`<img>`ке караганда көбүрөөк кыйын, браузерлерде колдоо	Кыйын SVG, fallback мазмуну
`<embed>`	`<object>`тен жөнөкөй, эски плагиндерди колдоо	HTML5те сунушталбайт	Эски код менен шайкештик
CSS Background	Ийкемдүү жайгаштыруу, кошумча тегдерсиз	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; /* Стилдөө мисалы */
}

SVG-ны HTML документине кантип киргизсе болот?