SVG ikonlarını bağlama ve kalite kaybı olmadan CSS ile yeniden renklendirme

Kerem Aydın·6 Temmuz 2026·⏱3 dk

SVG ikonları eklemek ve kalite kaybı olmadan yeniden renklendirmek için inline SVG veya SVG sprite kullanın ve rengi fill/stroke: currentColor ile belirleyin. İkon bir dosya olarak (<img> veya background-image) bağlanırsa yeniden renklendirme sınırlıdır; bu durumda mask-image işinizi görür.

İçindekiler

Hangi bağlantı yöntemini seçmeli

Web için genellikle 3 çalışan senaryo yeterlidir: inline, sprite, maske. Diğerleri uzlaşma gerektirir.

SVG ikonlarını bağlama yöntemlerinin karşılaştırması

YöntemCSS ile yeniden renklendirmeEn iyi kullanım alanıKısıtlamalar
HTML'de Inline SVG✅ maksimumhover/geçiş efektleri, ikonun farklı parçalarıdaha fazla işaret dili
SVG sprite (symbol + use)✅ iyisitede çok sayıda ikon, tek tip setsymbol içindeki özniteliklerde disiplin önemli
<img src="icon.svg">❌ neredeyse yokiçerik görselleri, basit eklemeCSS iç path öğelerini görmez
background-image: url(icon.svg)❌ neredeyse yokdekoratif öğelerrenk/durum yönetimi zor
mask-image + background-color✅ (tek renkli)harici SVG'yi hızlıca yeniden renklendirmesadece “silüet”, çok renklilik yok

“Metin gibi” tutarlı bir yeniden renklendirme istiyorsanız — ikonları tek renkli yapın ve fill="currentColor" veya stroke="currentColor" kullanın.

Doğru şekilde yeniden renklendirme: fill, stroke ve currentColor

İki ana ikon modeli vardır:

  • doldurma (fill) — çoğu “düz” ikon;
  • çerçeve/kenarlık (stroke) — çizgisel ikonlar.

Inline SVG: en kontrollü seçenek

<button class="btn">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2l9 4.5-9 4.5L3 6.5 12 2z"></path>
  </svg>
  Bildirimler
</button>

.btn { color: #111; }
.btn:hover { color: #0a66ff; }

.icon{
  width: 20px;
  height: 20px;
  fill: currentColor; /* metin rengini miras alır */
  transition: transform .2s ease, fill .2s ease;
}
.btn:hover .icon{ transform: translateY(-1px); }

“Stroke” ikonlar için

.icon-stroke{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

“Renklenmiyor” sorununun sık nedeni: SVG içinde sabit fill="#000" / stroke="#000" bulunması. Bu öznitelik genellikle CSS'i ezer. Çözüm — onu silmek veya currentColor ile değiştirmektir.

SVG zaten dosya olarak bağlıysa: img, background ve maskeleme

Neden <img> ve background-image yeniden renklenmez

<img src="icon.svg"> ve background-image: url(icon.svg) SVG'yi harici kaynak olarak yükler, bu nedenle CSS'iniz iç öğelere (<path>, <g>) erişip fill/stroke değerlerini değiştiremez.

İşaret dilini inline/sprite olarak yeniden yazmaya hazır değilseniz maskelemeyi kullanın.

mask-image ile tek renkli yeniden renklendirme

.icon-mask{
  width: 20px;
  height: 20px;
  background-color: #111;

  -webkit-mask: url("/icons/bell.svg") no-repeat center / contain;
  mask: url("/icons/bell.svg") no-repeat center / contain;
}

.icon-mask.is-active{ background-color: #0a66ff; }

Maske netliği korur (hâlâ vektördür), ancak ikonu bir “şablon”a dönüştürür: gradyanlar ve birden fazla renk korunmaz.

Sık yapılan hatalar

  • <img> veya background-image üzerinde fill boyamaya çalışmak — burada çalışmaz.
  • SVG içinde fill="#000" / stroke="#000" bırakıp currentColor'ın bunu ezmesini beklemek.
  • Çizgisel ikonu stroke yerine fill ile boyamak.
  • viewBox eksikliği: ikon kötü ölçeklenir ve boyut değişiminde “bozulur”.
  • Spriteta farklı mantıklı ikonlar (bir kısmı fill, bir kısmı stroke) ortak kurallar olmadan — sonra bakım zorlaşır.

SSS

Çok renkli SVG'leri tek bir CSS komutuyla yeniden renklendirmek mümkün mü?
Tamamen — nadiren. Daha kolayı inline yapıp parçaları sınıflar/seçicilerle yönetmek veya temalar için ayrı sürümler hazırlamaktır.

İkonun metin/bağlantı rengini otomatik almasını nasıl sağlarım?
SVG içindeki öğelere fill="currentColor" (veya stroke="currentColor") atayın ve rengi üst öğede color ile yönetin.

Onlarca ikonlu büyük proje için ne seçmeli?
Genellikle en iyi denge — SVG sprite (tek ikon seti) + kural “tüm tek renkli ikonlar currentColor kullanır”.

SVG optimizasyonu kaliteyi düşürür mü?
Hayır, bu vektör ise. Optimizasyon genellikle meta verileri ve gereksiz öznitelikleri kaldırarak netlik kaybı olmadan dosya boyutunu azaltır.