HTML Academy · Ders

Satır İçi SVG ve img ile object Karşılaştırması

Kullanım durumunuza uygun SVG gömme yöntemini seçin

Satır İçi SVG ve img ile object Karşılaştırması, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

SVG'yi Yerleştirmenin Üç Yolu

SVG (Ölçeklenebilir Vektör Grafikleri) üç şekilde yerleştirilebilir:

<img src="icon.svg"> — basit, önbelleğe alınır, JS/CSS erişimi yoktur
<object data="chart.svg"> — satır içi etkileşim, ayrı belge
HTML içinde satır içi SVG — tam CSS/JS erişimi, ek istek yoktur

img src ile SVG

En basit yöntem: SVG'yi görüntü olarak belirtin:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

CSS background-image ile SVG

SVG'yi dekoratif simgeler için CSS arka planı olarak kullanın:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

object Öğesiyle SVG

Etkileşimli SVG için <object> ile SVG yerleştirin:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

Satır İçi SVG

Tam denetim için SVG'yi doğrudan HTML içine yerleştirin:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Satır İçi SVG'nin Avantajları

Satır içi SVG neden kullanılır:

Tam CSS stillendirmesi: fill, stroke, geçişler, animasyonlar
JavaScript etkileşimi: SVG öğelerini seçme, olayları dinleme
currentColor: rengi üst CSS'den devralır
Ek HTTP isteği yoktur
role ve title ile erişilebilirlik ağacının parçası olabilir

Satır İçi SVG'nin Dezavantajları

Satır içi SVG'nin sakıncaları:

HTML dosyası büyür
Tarayıcı tarafından ayrı olarak önbelleğe alınmaz
Aynı SVG, çoğaltılmadan birden çok sayfada kolayca yeniden kullanılamaz
Yinelenen simgeler için kod tekrarı oluşur

Sprite için use Öğesi

SVG simgelerini bir kez tanımlayın ve <use> ile bunlara başvurun:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

Erişilebilir SVG

Satır içi SVG'leri erişilebilir hâle getirin:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

currentColor Tekniği

Metin rengini CSS'den devralmak için currentColor kullanın:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Hızlı Kontrol

img src ile SVG kullanmaya kıyasla satır içi SVG'nin temel avantajı nedir?

Özet: SVG Yerleştirme

SVG yerleştirmenin temel noktaları:

<img src> — basit; CSS/JS erişimi yoktur; önbelleğe alınır
CSS background-image — yalnızca dekoratiftir
<object data> — etkileşimli SVG; kısmen yalıtılmıştır
Satır içi SVG — tam CSS/JS denetimi; ek istek yoktur
<symbol> + <use> ile SVG sprite — verimli yeniden kullanım

Sıkça Sorulan Sorular

“Satır İçi SVG ve img ile object Karşılaştırması” dersi ücretsiz mi?

Evet — “Satır İçi SVG ve img ile object Karşılaştırması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Satır İçi SVG ve img ile object Karşılaştırması” dersinde ne öğreneceğim?

Kullanım durumunuza uygun SVG gömme yöntemini seçin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Satır İçi SVG ve img ile object Karşılaştırması” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Satır İçi SVG ve img ile object Karşılaştırması
Temel SVG Şekilleri: rect circle path
SVG viewBox ve Duyarlı Ölçeklendirme
CSS ve SMIL ile SVG Animasyonu

← HTML Academy Sayfasına Dön