SVG viewBox Açıklaması: Bozulmadan Ölçeklenen Simgeler

Son güncelleme: Kasım 2026

viewBox, her simgenin üzerine çizildiği görünmez koordinat ızgarasıdır. Dört sayısını anlarsanız herhangi bir SVG’yi temizce yeniden boyutlandırabilir, küçücük ya da kesik görünen simgeleri düzeltebilir ve bütün bir arayüz setinde çizgi kalınlıklarını tutarlı tutabilirsiniz.

Dört sayı, tek bir eşleme

viewBox="0 0 24 24" şunu ilan eder: iç tuvalim (0, 0) noktasında başlar ve 24 birim genişliğinde, 24 birim yüksekliğindedir. <svg> öğesi sayfada hangi piksel boyutunu alırsa alsın — bir araç çubuğunda 16 px, bir boş durumda 96 px — tarayıcı o 24 birimlik ızgarayı sığacak şekilde gerer ve her yol onunla ölçeklenir. Çizim asla değişmez; değişen yalnızca simge birimleri ile ekran pikselleri arasındaki eşlemedir. Çözünürlükten bağımsız simgelerin bütün hilesi budur.

viewBox’ı koruyun, width ve height’i silin

İyi biçimlendirilmiş bir simge dosyası bir viewBox ve çoğu zaman piksel cinsinden gereksiz width/height öznitelikleriyle gelir. viewBox’ı koruyun — sabit width ve height’i silin ve simgeyi CSS ile boyutlandırın. Artık tek bir dosya her yuvaya hizmet eder: göreli birimler (width: 1em) simgelerin çevresindeki metinle birlikte ölçeklenmesini sağlar ve kırılma noktaları tek bir kuralla bütün bir seti büyütüp küçültebilir. Bu sitede sunulan kopyalar aynı kurala uyar; aynı indirme bu yüzden 16 piksellik bir menüye de bir hero bölümüne de değişmeden düşer.

preserveAspectRatio: bilerek letterbox

Öğenin kutusu ile viewBox şekil olarak uyuşmadığında — kare simge barındıran geniş bir düğme — uzlaşmaya preserveAspectRatio karar verir. Varsayılan xMidYMid meet, bütün ızgarayı içine sığdırır, ortalar ve boş bantlar bırakır: genellikle tam istenen budur. Buna karşılık slice kutuyu doldurur ve taşanı kırpar; bu, dekoratif arka planlara uyar ama bir simgenin kenarlarını kesip atabilir. preserveAspectRatio="none" doldurmak için gerer ve bozar; simgeler için neredeyse hiç doğru değildir.

Klasik arızaları teşhis etmek

Simge, büyük ve boş bir kutunun içinde posta pulu gibi görünüyorsa: geride kalmış bir width/height ya da çizimden çok daha büyük bir viewBox (ilk 24 birimde çizilmiş bir glifin çevresinde 0 0 512 512) — viewBox’ı çizimi saracak şekilde normalleştirin. Simge kesik görünüyorsa: viewBox çizimden küçüktür ya da tuval kenarına ortalanmış konturlar ortadan ikiye bölünmektedir — ızgaranın içinde en az kontur kalınlığının yarısı kadar pay bırakın; çoğu set bu yüzden 24 üzerinde, içeriği yaklaşık 2 birim içeriden çizer. Bulanık simgeler bir viewBox sorunu değil raster sorunudur: bulanıksa muhtemelen bir PNG’yi ölçekliyorsunuz ve çözüm SVG kaynağıdır.

← Pratik SVG Rehberleri ve Eğitimleri