Чӣ гуна метавон 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">
  <!-- Мундариҷаи fallback -->
  <img src="image.png" alt="Тасвири алтернативӣ">
</object>

Маслиҳат барои истифодаи CSS:

.element {
  background-image: url('image.svg'); /* Истифодаи SVG ҳамчун фон */
  background-size: cover; /* Мисол барои услубгузорӣ */
}

Чӣ гуна метавон SVG-ро дар ҳуҷҷати HTML ворид кард?