SVG-ni HTML sənədinə necə daxil etmək olar?

HTML-ə SVG daxil etməyin bir neçə yolu var:

• Satır içi SVG: <svg> etiketi vasitəsilə SVG kodunu birbaşa HTML-ə daxil etmək.
• <img> etiketi: src atributu ilə <img> etiketi istifadə edərək SVG faylına istinad etmək.
• <object> etiketi: SVG-ni <object> etiketi ilə daxil etmək.
• <embed> etiketi: SVG-ni <embed> etiketi ilə daxil etmək.
• CSS: SVG-ni CSS vasitəsilə fon şəkli kimi istifadə etmək.
• <iframe>: SVG ilə HTML səhifəsini <iframe> vasitəsilə daxil etmək.

Hər bir metodun öz xüsusiyyətləri və üstünlükləri var:

Metod	Üstünlüklər	Mənfi cəhətlər	Tətbiq
Satır içi SVG	Tam nəzarət, JS/CSS ilə qarşılıqlı əlaqə	HTML ölçüsünü artırır, keşikdə çətinliklər	Kiçik və tez-tez dəyişən SVG-lər, ikonlar
<img>	Sadəlik, keşikdə saxlama	Məhdud nəzarət, JS qarşılıqlı əlaqə yoxu	Statik şəkillər
<object>	Semantika (xarici obyekt), JS ilə qarşılıqlı əlaqə	<img>-ə nisbətən bir az daha mürəkkəb, brauzer dəstəyi	Çətin SVG-lər, ehtiyat məzmunu
<embed>	<object>-dən daha sadə, köhnə plagin dəstəyi	HTML5-də tövsiyə edilmir	Köhnə kod ilə uyğunluq
CSS Background	Elastik yerləşdirmə, əlavə etiketlər olmadan	JS ilə qarşılıqlı əlaqə yoxu, məhdud nəzarət	Dekorativ elementlər, naxışlar
<iframe>	Tam izolasiya, müstəqil səhifə yükləmə	Yük çoxluğu, qarşılıqlı əlaqə çətinlikləri	Çətin və müstəqil elementlərin daxil edilməsi

Satır içi SVG nümunəsi:

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

<img> etiketi nümunəsi:

<img src="image.svg" alt="SVG təsviri">

<object> etiketi nümunəsi:

<object data="image.svg" type="image/svg+xml">
  <!-- Ehtiyat məzmunu -->
  <img src="image.png" alt="Alternativ şəkil">
</object>

CSS nümunəsi:

.element {
  background-image: url('image.svg'); /* SVG-ni fon kimi istifadə etmək */
  background-size: cover; /* Stil nümunəsi */
}