'SVG' Viewbox'ı (HTML) Kullanmaya Yönelik Bir Web Tasarım Rehberi
Viewbox, SVG şekilleri oluştururken yaygın olarak kullanılan bir özelliktir. Belgeyi tuval olarak düşünürseniz, görünüm kutusu, görüntüleyicinin görmesini istediğiniz tuvalin bir parçasıdır. Sayfa tüm bilgisayar ekranını kapsayabilse de, şekil yalnızca üçte bir oranında mevcut olabilir.
Viewbox, ayrıştırıcının bu üçte bir küçültme yapmasını söylemenizi sağlar. Ekstra beyaz alanı ortadan kaldırır. Görüntü kutusunu bir resmi kırpmak için sanal bir yaklaşım olarak düşünün.
Bu olmadan, grafiğiniz gerçek boyutunun üçte biri olarak görünecektir.
Görüntüleme Kutusu Değerleri
Bir görüntüyü kırpmak için, kesimleri yapmak için resim üzerinde noktalar oluşturmanız gerekir. Görünüm kutusu niteliğini kullanırken de aynı durum geçerlidir. Görüntüleme kutusu için değer ayarları şunları içerir:
- minx - başlangıç x koordinatı
- miny - başlangıç y koordinatı
- genişlik - görüntüleme kutusunun genişliği
- yükseklik - görüş kutusunun yüksekliği
Görüntüleme kutusu değerleri için sözdizimi şöyledir:
viewBox = "0 0 200 150"
Görünüm kutusunun genişliğini ve yüksekliğini SVG belgesi için ayarladığınız genişlik ve yükseklikle karıştırmayın. Bir SVG dosyası oluşturduğunuzda, kurduğunuz ilk değerlerden biri belge genişliği ve yüksekliği. Belge bir tuval. Görünüm kutusu tüm tuvali ya da sadece bir bölümünü kaplayabilir.
Bu görünüm kutusu tüm sayfayı kapsar.
Bu görünüm kutusu, sağ üst köşede başlayan sayfanın yarısını kapsar.
Şekeriniz de yükseklik ve genişlik atamalarına sahiptir.
Sağ üst köşede başlayan ve sayfanın yarısını genişleten bir görüntü kutusuyla 800 x 400 piksel'i kapsayan bir belgedir. Şekil, görünüm kutusunun sağ üst köşesinde başlayan ve 100 px sola ve 50 px aşağı hareket eden bir dikdörtgendir.
Neden bir Viewbox ayarla?
SVG, sadece bir şekil çizmekten çok daha fazlasını yapar. Gölge efekti için üst üste bir şekil oluşturabilir. Bir şekli bir yöne dönecek şekilde dönüştürebilir. Gelişmiş filtreler için, görünüm kutusu özniteliğini anlamanız ve kullanmanız gerekir.