SVG nasıl HTML belgesine eklenir?

HTML'e SVG gömme yöntemleri birkaç farklıdır:

• Satır içi SVG: <svg> etiketi kullanılarak SVG kodunun doğrudan HTML'ye gömülmesi.
• <img> etiketi: SVG dosyasını göstermek için src özniteliğiyle <img> etiketi kullanmak.
• <object> etiketi: SVG'yi <object> etiketiyle gömmek.
• <embed> etiketi: SVG'yi <embed> etiketiyle gömmek.
• CSS: SVG'yi CSS aracılığıyla arka plan resmi olarak kullanmak.
• <iframe>: SVG içeren bir HTML sayfasını <iframe> ile gömmek.

Her yöntemin kendine özgü özellikleri ve avantajları vardır:

Yöntem	Avantajlar	Dezavantajlar	Kullanım
Satır içi SVG	Tam kontrol, JS/CSS ile etkileşimli	HTML boyutunu artırır, önbellekleme karmaşası	Küçük ve sık değişen SVG'ler, ikonlar
<img>	Basitlik, önbellekleme	Sınırlı kontrol, JS etkileşimi yok	Statik görseller
<object>	Semantik (dış nesne), JS ile etkileşimli	<img>'ye göre biraz daha karmaşık, tarayıcı desteği	Karmaşık SVG'ler, yedek içerik
<embed>	<object>'tan daha basit, eski eklenti desteği	HTML5'te önerilmez	Eski kod uyumluluğu
CSS Arka Plan	Esnek konumlandırma, ek HTML etiketi gerekmez	JS ile etkileşim yok, kontrol sınırlı	Dekoratif öğeler, desenler
<iframe>	Tam izolasyon, bağımsız sayfa yükleme	Ek yük, etkileşim zorlukları	Karmaşık ve bağımsız öğelerin gömülmesi

Satır içi SVG örneği:

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

<img> etiketi kullanımı örneği:

<img src="image.svg" alt="SVG Açıklaması">

<object> etiketi kullanımı örneği:

<object data="image.svg" type="image/svg+xml">
  <!-- Yedek içerik -->
  <img src="image.png" alt="Alternatif görsel">
</object>

CSS kullanımı örneği:

.element {
  background-image: url('image.svg'); /* SVG'yi arka plan olarak kullanma */
  background-size: cover; /* Stil örneği */
}