SVG Logo Düzen Kaymasını Alan Ayırarak Önleyin

SVG logo keskin kalırken belirdiğinde yakındaki içeriği yine de yerinden itebilir. HTML görüntü elemanıyla yüklenen dış SVG için, dosyanın içsel boyutları kullanılabilir olmadan kutusunu ayırabilmesi amacıyla tarayıcıya yeterli boyut bilgisi verin. Eşleşen width ve height öznitelikleri yararlı başlangıçtır; CSS sonra kutuyu duyarlı yapabilir.

Bu, sayfa düzeni sorununu düzeltir. Logonun yollarını değiştirmez veya tuvali içindeki boşluğu kaldırmaz. Kullanılabilir vektör aslı koruyun. Tek kaynak PNG veya JPG ise düzenlenebilir çizimi ayrı kurtarın, ardından teslim edilen SVG'ye sayfada bilinçli yer verin.

Çizimi ayrılan kutudan ayırın

Kontrol edilecek ilişkili üç boyut vardır:

viewBox="0 0 300 100", 3:1 kaynak dikdörtgeni tanımlar. Dış dosyada bu bilgi sayfanın getirmesi gereken kaynağın içindedir. Bu, kaynak kullanılabilir olmadan çevre HTML'ye eşleşen oran koymaktan farklıdır.

MDN görüntü elemanı referansı, görüntü yüklenmeden alan sağlamak için width ve height özniteliklerinin ikisini de kullanmayı önerir. Google'ın düzen kayması rehberi de eksik görüntü boyutlarını yaygın hareket nedeni sayar ve boyutlar veya CSS oranıyla yer ayırmayı açıklar.

Sorununuz çizimin zaten kurulmuş görüntü alanına nasıl sığdığıysa ayrı SVG en boy oranı uyarlama rehberini kullanın. Kutuyu ayırmak ve çizimi içine sığdırmak farklı kontrollerdir.

Eşleşen width ve height öznitelikleriyle başlayın

3:1 işaret için basit teslim şöyle olabilir:

<img
  class="brand-logo"
  src="/assets/brand-logo.svg"
  width="300"
  height="100"
  alt="Example brand"
>

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

Öznitelikler amaçlanan oranı sağlar. CSS görüntülenen genişliği belirler ve kapsayıcı daralınca orantılı küçülmeye izin verir. Logonun her cihazda 300 fiziksel ekran pikseli kaplamasını gerektirmez.

Bilinçli boş alan dahil gerçek görüntü tuvalinin boyutlarını kullanın. Teslim edilen SVG daha geniş kaynak dikdörtgenine sahipse görünür harf biçimlerinin sınırlarını girmeyin. Bu uyumsuzluk ilk alan ayırmayı yüklenen kaynaktan farklı yapar.

Eşleşen değerler önemlidir; görüntünün doğal oranı kullanılabilir olduğunda devralabilir. Yanlış başlangıç oranı sonradan boyut düzeltmesi doğurabilir. Logoyu değiştirince aynı dosya adını korumanın geometriyi de koruduğunu varsaymak yerine hem işaretlemeyi hem teslim dosyasını yeniden kontrol edin.

Düzen yuvayı yönetiyorsa CSS oranı kullanın

Bileşen belirli kutu şekli tanımlıyorsa CSS oranı yararlıdır. Orantılı 3:1 görüntü için:

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}

MDN aspect-ratio referansı, özelliğin otomatik boyutlandırmaya katıldığını açıklar. Tercih edilen oranın hesapları etkilemesi için en az bir boyut otomatik kalmalıdır. Hem genişliği hem yüksekliği sabitlemek, açık boyutları ilk incelenecek şey yapar.

Kaynak oranı farklıysa istenen davranışı seçin. Şekli kalıcı yuva, kendi kapsayıcısını ve bilinçli görüntü sığdırma kuralını gerektirebilir. Orantılı logo normalde doğru kaynak oranını kullanmalıdır. Eski CSS kalsın diye kare logoyu önceki yazı logosunun 3:1 geometrisine zorlamayın.

auto 3 / 1 biçiminin başka anlamı vardır: değiştirilen eleman için geçici oran sağlayıp doğal oran kullanılabilir olduğunda onu kullanabilir. Geçici ve son oran eşleştiğinde yararlıdır; çelişen boyutların hiçbir şeyi hareket ettirmeyeceğinin garantisi değildir.

Kontrollü tarayıcı örneğimiz ne gösterdi?

F biçimli işaret, nokta ve ok içeren özgün 300 × 100 SVG oluşturduk. Üç HTML görüntü elemanının başlangıçta kaynak URL'si yoktu. Bir düğme ilk düzenden sonra üçünün hepsine aynı yerel SVG'yi atadı. Bu, yavaş ağ ölçüyormuş gibi yapmadan önce-sonra durumunu gözlenebilir kıldı.

Üçü de 300px CSS genişliği ve otomatik yükseklik kullandı. Birinde ayrılan oran yoktu, birinde width="300" height="100", birinde aspect-ratio: 3 / 1 vardı.

Yer ayrılmayan durumda metnin üst koordinatı 358.1875 değerinden 458.1875 değerine geçti. Yer ayrılan iki durumda 458.1875 kaldı. Her yüklenen görüntü 300 × 100 doğal boyut bildirdi; görüntülenen genişlik ve yüksekliği de 300 × 100 kaldı.

Bunlar tek tarayıcıda kontrollü sayfadan gerçek eleman konumu ölçümleridir. Deney elle URL ataması kullandı. Ağ yavaşlatma izi, Core Web Vitals puanı veya tarayıcılar arası davranış kaydetmedi. Özellikle 100px hareket bir mesafedir; CLS puanı değildir.

Yalnızca dosyayı değil teslim edilen bileşeni kontrol edin

Düzeltmeyi doğrularken gerçek logo yerleşimini kullanın:

1. Kaynağı doğrulayın. Teslim SVG'sini açıp tuval oranını kontrol edin. Karşılaştırma için değişmemiş ana dosya tutun.
2. Erken boyutlandırmayı inceleyin. Görüntü boyutları kullanılabilir olmadan HTML veya CSS'nin amaçlanan kutuyu sağladığını kontrol edin.
3. Eleman konumlarını karşılaştırın. Yalnızca logo keskinliğini değil, yakındaki başlığı veya gezinme öğesini izleyin.
4. Yükleme sonrasını kontrol edin. Son genişlik, yükseklik ve oranları ayrılan yerle karşılaştırın.
5. Dar ve geniş kapsayıcılar deneyin. Duyarlı kuralların işareti orantılı küçülttüğünü ve çevre kontrolleri kullanılabilir bıraktığını doğrulayın.

Tarayıcı yükleme kontrolü için gerçek sayfayı önbellek kapalı ve geliştirici araçlarında uygun ağ ayarıyla yeniden yükleyin. Bu, düğmeli örneğimizden farklı koşulu kontrol eder. Sayfa geç yüklenen görüntü kullanıyorsa o yerleşime kaydırarak da bakın.

Hareket sürüyorsa o anda neyin değiştiğini belirleyin. Yazı tipi değişimi, eklenen banner, genişleyen gezinme satırı veya başka görüntü, logonun kendi kutusu sabitken bile onu taşıyabilir. web.dev rehberi görüntü boyutlandırmasını diğer düzen kayması nedenlerinden ayırır; tek logoya yer ayırmak tam site performans denetimi değildir.

Yakındaki diğer SVG sorunlarını ayrı tutun

Altında küçük şerit olan, boyutu değişmeyen görüntü kutusu satır içi metin sorunu olabilir. Görüntüye ayrılan boyutlardan ayrı olarak display ve dikey hizalamayı inceleyin. Elemanı metin satırında taşımak ve henüz mevcut olmayan görüntüye alan ayırmak, düzenin farklı anlarını ele alır.

Yerinde duran fakat geniş boş kenarlar gösteren SVG, tuval veya sığdırma kontrolü gerektirir. Bu kenarları kaldırmak için kaynağı kırpmak oranını değiştirir; sonrasında sayfanın yer ayırmasını güncelleyin. Satır içi SVG ve görüntü açıklaması, belge elemanlarını mı dış görüntüyü mü biçimlendirdiğinizi belirlemenize de yardım eder.

Özgün işaret yalnızca piksellerse düzenlenebilir aday şekiller hazırlamak için PerfectVector'ın logo vektörleştiricisini kullanın. Teslim tuvalini seçmeden silueti ve açıklıkları kaynakla karşılaştırın; izleme kalitesi değerlendirme tablosu bu geometri kontrolünü ele alır. Vektörleştirme sitenin HTML boyutlarını, CSS oranını veya yükleme davranışını ayarlamaz.

Sık sorulan sorular

SVG viewBox tek başına düzen kaymasını önler mi? Dış görüntüde viewBox getirilen kaynağın içindedir. Görüntünün içsel boyutları kullanılabilir olmadan yer ayırabilmesi için HTML düzenine eşleşen boyut bilgisi verin; ardından son bileşeni doğrulayın.

SVG logo width ve height özniteliklerini koruyarak duyarlı olabilir mi? Evet. CSS görüntülenen genişliği yönetip yüksekliği otomatik tutarken eşleşen öznitelikler amaçlanan oranı sağlayabilir. Teslim dosyasının ve duyarlı kuralların bu oranları koruduğunu kontrol edin.

Keskin SVG iyi CLS puanını garanti eder mi? Hayır. Keskinlik çizimin görüntülenmesini tanımlar. CLS; yazı tipleri, eklenen içerik ve diğer medyayı da içerebilen sayfa genelindeki düzen kararsızlığıyla ilgilidir. Kontrollü örnekteki hareket mesafesi CLS puanı değildir.

Kaynaklar

1. web.dev — Cumulative Layout Shift'i iyileştirme — Eksik görüntü boyutları, alan ayırma, diğer hareket nedenleri ve hareketle CLS ölçütünün ayrımı.
2. MDN — HTML görüntü elemanı — Width ve height öznitelikleri, doğal görüntü boyutları ve görüntü düzeni.
3. MDN — aspect-ratio — Otomatik boyutlandırma ve belirtilen oranla auto-artı-oran biçiminin farkı.

Yalnızca raster logonuz mu var? PerfectVector ile düzenlenebilir SVG hazırlayın, konturları ve tuvali doğrulayın, ardından görüntüleneceği sayfada eşleşen alanı ayırın.