SVG viewBox ve Duyarlı Ölçeklendirme

SVG genişliği ve yüksekliği, DOM'da oluşturulan boyutu belirler. viewBox özniteliği dahili koordinat uzayını tanımlar. Bunlar birbirinden bağımsızdır: width="200" ve height="200" ile kullanılan "0 0 100 100" viewBox değeri, koordinat uzayını 2 katına ölçekler.

viewBox="min-x min-y width height". En yaygın kullanım: viewBox="0 0 100 100", başlangıç noktası olan 100x100'lük bir koordinat uzayı tanımlar. SVG'deki koordinat değerleri piksel cinsinden değil, bu uzaya göre belirtilir.

Duyarlı bir SVG için genişlik ve yükseklik özniteliklerini kaldırın (veya bunları %100 olarak ayarlayın) ve orantıları viewBox'ın belirlemesine izin verin. CSS ekleyin: svg { width: 100%; height: auto; }. SVG, en-boy oranını koruyarak kapsayıcısına sığacak şekilde ölçeklenir.

preserveAspectRatio, en-boy oranları farklı olduğunda viewBox'ın SVG görünüm alanına nasıl sığacağını denetler. Değerler: "xMidYMid meet" (varsayılan; kenarlarda boşluk bırakır), "xMidYMid slice" (doldurmak için kırpar), "none" (en-boy oranını korumadan sığacak şekilde esnetir).

min-x ve min-y değerlerini değiştirmek, SVG koordinat uzayının görünen bölümünü kaydırır. viewBox="50 50 100 100", (50,50) ile (150,150) arasındaki bölgeyi gösterir. Bu, viewBox değerlerinin JavaScript ile güncellenmesi sayesinde etkileşimli kaydırmayı mümkün kılar.

Yakınlaştırmak için viewBox boyutlarını küçültün: viewBox="25 25 50 50", daha küçük bir bölgeyi SVG öğesini dolduracak şekilde büyütülmüş olarak gösterir. Uzaklaştırmak için boyutları artırın. SVG öğesini ölçeklendirmeden etkileşimli yakınlaştırma yapmak için tekerlek olaylarında viewBox'ı güncelleyin.

img etiketindeki SVG, object-fit ile duyarlı biçimde ölçeklenir; ancak CSS ile biçimlendirilemez veya betiklerle çalıştırılamaz. Satır içi SVG, CSS ve JavaScript tarafından tamamen erişilebilirdir; ancak HTML boyutunu artırır. Seçiminizi etkileşim gereksinimlerine göre yapın.

İkon SVG'leri sabit bir viewBox (örneğin, "0 0 24 24") kullanır ve genişlik ile yükseklik belirtmez; böylece boyutlandırmayı CSS yapar: .icon { width: 1.5rem; height: 1.5rem; }. viewBox, keskin vektör görüntülemeyi korurken ikonların her boyutta doğru şekilde ölçeklenmesini sağlar.

İkonları, gizli bir SVG içindeki <symbol viewBox="0 0 24 24"> öğelerinde tanımlayın. Bunlara şu şekilde başvurun: <use href="#icon-name">. Her kullanım öğesinin kendine ait genişliği, yüksekliği, dolgusu ve rengi olabilir; böylece tüm ikonlar için tek bir küme dosyası kullanılır.

fill="currentColor", CSS renk özelliğini öğeden veya üst öğesinden devralır. SVG ya da üst öğe üzerinde color: red ayarladığınızda ikon otomatik olarak kırmızı dolguyla gösterilir. Bu, tek renkli ikonların SVG'ye özgü biçimlendirme gerektirmeden metin rengini izlemesini sağlar.

SVG içeriği kırpılmış veya beklenmedik bir konumda görünüyorsa viewBox değerini günlüğe kaydedin ya da inceleyin. Yaygın bir hata, oluşturulan boyutu hesaba katmadan viewBox'ı kaynak görselin piksel boyutlarına ayarlamaktır; bu, ölçeklendirme sorunlarına yol açar. viewBox'ın SVG görselinin gerçek içerik sınırlarıyla eşleştiğini doğrulayın.

Bir SVG'nin herhangi bir kapsayıcı genişliğine duyarlı biçimde ölçeklenmesini nasıl sağlarsınız?

SVG viewBox'ı, oluşturulan piksel boyutundan bağımsız bir dahili koordinat uzayı tanımlar ve duyarlı ölçeklendirmeyi mümkün kılar. width:100%; height:auto ile birlikte bir viewBox ayarlamak, SVG'lerin her kapsayıcıya uyum sağlamasını sağlar. Simge ve kullanım kümesi deseni, currentColor temalandırması ve preserveAspectRatio, esnek ve temalandırılabilir SVG kullanımı için eksiksiz bir araç seti sunar.