SVG, bir vektör görüntü formatıdır (XML tabanlı), bu nedenle bulanıklaşmadan herhangi bir boyuta ölçeklenebilir. Bunu iki ana şekilde dahil edebilirsiniz; her birinin avantaj ve dezavantajları vardır.
Inline SVG — HTML içinde doğrudan markup
html
SVG, bir vektör görüntü formatıdır (XML tabanlı), bu nedenle bulanıklaşmadan herhangi bir boyuta ölçeklenebilir. Bunu iki ana şekilde dahil edebilirsiniz; her birinin avantaj ve dezavantajları vardır.
Avantajları: CSS ile stillendirebilirsiniz (fill, stroke), parçalarını canlandırabilirsiniz, currentColor aracılığıyla rengi değiştirebilirsiniz (metin rengini devralır), ve olaylara yanıt verebilirsiniz — çünkü gerçek DOM'dir. Ekstra HTTP isteği yoktur.
Dezavantajları: HTML'i şişirir, ayrı olarak önbelleğe alınmaz, yinelenen simgeler markup'ı kopyalar.
<img> — dosya olarak referans<img src="logo.svg" alt="Company logo" width="120" />
Avantajları: tarayıcı tarafından önbelleğe alınır, HTML'i temiz tutar, basittir. Dezavantajları: CSS/JS ile iç kısımlarını stillendiremez veya script edemezsiniz — opak bir görüntüdür.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Inline vs <img> SVG seçimi, grafiği stillemek/canlandırmanız (inline) gerekip gerekmediği veya sadece onu verimli bir şekilde görüntülemeniz (<img>) gerekip gerekmediğine kaynaklanır.
Hover'da veya tema değişinde renk değiştiren simgeler inline gider (çoğunlukla bileşen olarak); statik marka varlıkları <img> aracılığıyla gider.
Her iki durumda da, vektörler her çözünürlükte net kalır — simgeler ve logolar için ideal.