SVG ni HTML hujjatiga qanday joylashtirish mumkin?

HTML ga SVG niqob qilishning bir nechta usullari mavjud:

• Inline SVG: <svg> tegidan foydalanib, SVG kodini to'g'ridan-to'g'ri HTML ga joylashtirish.
• <img> teg: src atributi bilan <img> tegidan foydalanish, bu SVG fayliga ishora qiladi.
• <object> teg: SVG ni <object> tegidan foydalanib joylashtirish.
• <embed> teg: SVG ni <embed> tegidan foydalanib joylashtirish.
• CSS: CSS orqali SVG ni fon rasmi sifatida ishlatish.
• <iframe>: SVG bilan HTML sahifasini <iframe> yordamida joylashtirish.

Har bir usulning o'ziga xos xususiyatlari va afzalliklari bor:

Usul	Afzalliklar	Kamchiliklar	Qo'llash
Inline SVG	To'liq nazorat, JS/CSS bilan interaktivlik	HTML hajmini oshiradi, kechirish murakkabligi	Kichik va tez-tez o'zgaradigan SVGlar, ikonalar
<img>	Soddalik, kechirish	Cheklangan nazorat, JS interaktivligi yo'q	Statik rasmlar
<object>	Semantika (tashqi obyekt), JS bilan interaktivlik	<img> ga nisbatan biroz murakkab, brauzer qo'llab-quvvatlashi	Murakkab SVGlar, fallback kontent
<embed>	<object> ga qaraganda oddiyroq, eski plaginlarni qo'llab-quvvatlash	HTML5 da tavsiya etilmaydi	Eski kod bilan moslik
CSS Background	Moslashuvchan joylashuv, qo'shimcha teglar yo'q	JS bilan interaktivlik yo'q, nazorat cheklangan	Dekorativ elementlar, naqshlar
<iframe>	To'liq izolyatsiya, alohida sahifa yuklash	Qo'shimcha yuk, interaktivlik qiyinchiliklari	Murakkab va mustaqil elementlarni joylashtirish

Inline SVG misoli:

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

<img> tegidan foydalanish misoli:

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

<object> tegidan foydalanish misoli:

<object data="image.svg" type="image/svg+xml">
  <!-- Alternativ kontent -->
  <img src="image.png" alt="Alternativ rasm">
</object>

CSS dan foydalanish misoli:

.element {
  background-image: url('image.svg'); /* SVG ni fon sifatida ishlatish */
  background-size: cover; /* Stil misoli */
}