SVG preserveAspectRatio: çizimi bozmadan sığdırın

SVG’nin viewBox alanının tamamını, şeklini bozmadan görüntüleme alanına sığdırmak için preserveAspectRatio="xMidYMid meet" kullanın. Bu alanın tamamen kaplanması gerekiyorsa ve içeriğin bir kısmı kenarların dışına taşabiliyorsa slice kullanın. Yatay ve dikey yönlerde farklı ölçeklendirmeyi yalnızca bilinçli olarak istiyorsanız none kullanın.

Burada önemli olan, çizimin viewBox ile tanımlanan koordinat dikdörtgeni ile görüntülendiği görüntüleme alanı arasındaki ayrımdır. Sığdırma, birinin diğerine nasıl eşlendiğini değiştirir. Bir logoyu yeniden çizmez, kaynak tuvaldeki boşlukları kaldırmaz veya kırpılmış yolları kalıcı olarak silmez.

Önce sığdırma davranışını seçin

MDN’in preserveAspectRatio başvuru belgesi, bu değerleri ve varsayılan xMidYMid meet değerini açıklar. Bir svg öğesi için bu eşleme bir viewBox gerektirir. Nitelik büyük/küçük harfe duyarlıdır: A ve R harflerini büyük bırakın.

Bir logo için meet ile başlayın. Bir harfi kaybetmek veya bir daireyi ovale dönüştürmek, genellikle biraz boşluk bırakmaktan daha kötü bir sonuçtur. Dekoratif bir arka planda ise bilinçli bir kırpma kabul edilebilir. Hizalamayı seçmeden önce buna karar verin.

Bir amblemi iki farklı görüntüleme alanı biçiminde test edin

Bu orijinal örnek bir daire, bir dikdörtgen ve merkezden kaydırılmış bir üçgen kullanır. Daire, oranların bozulmasını görünür kılar; birbirinden farklı parçalar ise hizalama değişikliklerini simetrik bir rozete göre daha kolay fark etmenizi sağlar.

Bunu bir HTML dosyasına yapıştırın ve tarayıcıda açın:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

ViewBox 200 birim genişliğinde ve 100 birim yüksekliğindedir. Oranı 2:1’dir. İlk görüntüleme alanı 300’e 100 CSS pikseldir ve 3:1 oranına sahiptir. xMidYMid slice ve none değerlerini karşılaştırmak için yalnızca niteliği değiştirin. Ardından görüntüleme alanını width="100" height="300" olarak değiştirip tekrarlayın.

Bu geometriyi Chrome’da, seçicilere dayanan küçük bir test düzeneğiyle oluşturduk. Ölçüm çıktısı, çizim grubunun geçerli dönüşüm matrisini kullanıyordu. Ortaya çıkan ölçekler ve ötelemeler aşağıdaki değerlerle eşleşti; yaklaşık −25 piksellik slice ötelemesi burada yuvarlanmıştır.

Uzun görüntüleme alanında meet üç küçük şeklin tamamını gösterdi. Ortalanmış slice, büyütülmüş kompozisyonun yalnızca altın renkli dikdörtgenin ağırlıkta olduğu bir kısmını gösterdi. none daireyi dar ve uzun hâle getirdi. Bu, söz konusu test örneğinin Chrome’daki kontrolüdür; her grafik düzenleyicinin içe aktarma davranışı için bir vaat değildir.

Koordinat başlangıcı sıfır olan bu örnekte ölçek kuralı basittir. Görüntüleme alanı genişliğini viewBox genişliğine, ardından görüntüleme alanı yüksekliğini viewBox yüksekliğine bölün. meet her iki eksende küçük oranı; slice ise büyük oranı kullanır. none iki oranı ayrı tutar. SVG koordinat sistemi belirtimi, hizalama ve sıfırdan farklı viewBox koordinat başlangıçları da dâhil olmak üzere bu eşlemeyi tanımlar.

Artan boşluğun yerini hizalamayla seçin

İlk anahtar sözcük hizalamayı kontrol eder. xMin, xMid ve xMax, viewBox’ın sol kenarını, yatay merkezini veya sağ kenarını hizalar. YMin, YMid ve YMax aynı işlemi dikey yönde yapar. Bunlar, gerçek yolların çevresinde boşluk bulunabilen viewBox dikdörtgenini referans alır.

Uzun test görüntüleme alanı için:

• xMinYMin meet, sığdırılan viewBox’ı dikey olarak ortalamak yerine üste yerleştirir.
• xMinYMin slice, viewBox’ın sol tarafını görüntüleme alanının sol tarafıyla hizalı tutar. Büyütülen sağ taraf görüntüleme alanının dışına taşar.
• xMidYMid slice, yatay taşmayı her iki tarafa dağıtır.

Test düzeneğindeki ortalanmış hizalamayı xMinYMin olarak değiştirdik. Hem meet hem de slice ötelemeleri sıfır oldu; ölçek çarpanları ise sırasıyla 0,5 ve 3 olarak kaldı. Hizalama kompozisyonu taşıdı; sığdırma ölçeğini değiştirmedi.

Bir hizalama değişikliği yalnızca artan boşluk veya taşma bulunan bir eksende görünür olur. Geniş meet örneğinde viewBox zaten yüksekliği doldurur; dolayısıyla YMid değerini YMin yapmak onu hareket ettirecek dikey alan bırakmaz.

Kırpmayı açıkça belirleyin

slice bir ölçek seçer. Görüntüleme alanının dışına taşan kısımları görüp göremeyeceğinizi kırpma belirler. Örnek, kırpmanın öngörülebilir olması için açıkça overflow:hidden ayarlar.

Uzun test düzeneğinde overflow değerini visible olarak değiştirmek, büyütülen daireyi ve üçgeni slice görüntüleme alanının dışında görünür kıldı. Geometri kaybolmamıştı. MDN’in SVG overflow başvuru belgesi, farklı SVG bağlamları arasındaki varsayılan stil farkları da dâhil olmak üzere overflow ile görüntüleme alanı kırpması arasındaki ilişkiyi açıklar.

slice değerini yolları kesip atma işlemi olarak görmeyin. Teslim edilecek dosyanın yalnızca korunan geometriyi içermesi gerekiyorsa gerçek bir düzenleme işlemi uygulayın ve doğrulayın. Dikdörtgen olmayan özel bir görüntüleme penceresi için clipPath daha uygun bir araç olabilir.

Benzer şekilde, meet viewBox’ın sığmasını garanti eder; boyanan tüm içeriğin sığmasını garanti edemez. Kaynak dikdörtgenin dışındaki bir kontur, filtre veya yol yine de dışarı taşabilir. Yalnızca niteliğe güvenmek yerine görünür kenarları inceleyin.

Hizalamayla uğraşmadan önce kaynak boşluklarını düzeltin

Küçük bir işaretin çok büyük bir viewBox’ın yalnızca ortasını kapladığını düşünün. meet, boş kenar payları da dâhil olmak üzere koordinat dikdörtgeninin tamamını sığdırır. Ölçeklendirme doğru olsa bile sonuç fazla küçük görünebilir.

Düzenleyicinizde dışa aktarılan tuvali veya çalışma yüzeyini kontrol edin. Kompozisyonu daha sıkı çevrelemek için viewBox’ı değiştirirseniz amaçlanan konturları ve efektleri de kapsayın ve her yerleşimi yeniden kontrol edin. Her kenar payını otomatik olarak kaldırmayın: kaynakta bir marka işaretinin çevresinde bilinçli olarak bırakılmış güvenli boşluk bulunabilir.

Fiziksel boyut sorunları ayrı bir konudur. Yanlış milimetre boyutunda içe aktarılan bir SVG için SVG boyutlandırma iş akışı gerekir; sığdırma hizalamasını değiştirmek birimlerle ilgili varsayımlarını muhtemelen düzeltmez.

Satır içi SVG ile görsel sığdırmayı ayrı tutun

Satır içi SVG için ilgili svg öğesindeki niteliği değiştirin. CSS bu öğenin kutusunu boyutlandırabilir; preserveAspectRatio ise viewBox’ı bu kutuya eşler.

Bir HTML görüntü öğesinde kullanılan harici SVG için, yerine konan görsel içeriğinin sığdırılmasını CSS kontrol eder:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

MDN’in object-fit belgesi, yerine konan içeriğin CSS kutusuna nasıl sığdığını açıklar. Bu, SVG belgesinin iç eşlemesini düzenlemekten farklı bir katmandır. object-fit: contain de kaynakta zaten bulunan boş tuvali kaldıramaz. Hangi yerleştirme modelini kullanacağınıza karar verirken satır içi SVG ile görüntü öğesinin karşılaştırmasına bakın.

HTML’deki img yerine tam sözcükle yazılan bir SVG image öğesi de vardır. Bunun preserveAspectRatio niteliği, başvurulan görselin o öğe için oluşturulan dikdörtgene nasıl sığdığını kontrol eder. MDN’in nitelik başvuru belgesinde açıklandığı gibi, bu durum aynı öğede bir viewBox sağlama yönündeki genel gerekliliğin istisnasıdır. Bu üç durumu ayrı tutmak, bir HTML görselini yalnızca SVG’ye ait bir nitelik ekleyerek düzeltmeye çalışmanızı önler.

Yerleştirmeden önce kaynağın oranlarını koruyun

Size özel işaretin yalnızca PNG veya JPG sürümü varsa ve düzenlenebilir vektör geometrisine ihtiyacınız varsa PerfectVector, yerleşimi oluşturmadan önce bir SVG kaynağı elde etmenizi sağlayabilir. Önce konturları, küçük açıklıkları ve tuval sınırlarını inceleyin. Sonucu sığdırmak mevcut geometrisini korur; oranları bozulmuş bir kaynağı düzeltemez veya vektörleştirme sırasında hiç elde edilmemiş ayrıntıları yeniden oluşturamaz.

Mevcut temiz bir SVG doğrudan sığdırma kontrollerine geçebilir. Yukarıdaki basit amblem için elle yazılmış geometri yeterlidir. Görsel vektörleştirmeye genel bakış, raster bir görselden yollar elde etmenin ne zaman yararlı olduğunu açıklar.

Yalnızca raster biçimde bulunan bir işaret için kaynağınızı PerfectVector’da deneyin, SVG’yi inceleyin ve kırpmayı düşünmeden önce meet ile geniş ve uzun bir yerleşimi karşılaştırın. Yerleşim kararlarını geri alabilmek için orijinal ana vektör dosyasını saklayın.

Sık sorulan sorular

SVG’mde meet kullanırken neden hâlâ boşluk var? Görüntüleme alanı ile viewBox’ın en-boy oranları farklı olabilir; bu da eşit ölçeklendirmeden sonra artan boşluk bırakır. Kaynak viewBox’ta yolların çevresinde kenar payları da bulunabilir. Hizalama bu dikdörtgeni taşır; içindeki boşlukları kaldırmaz.

Slice çizimi kalıcı olarak kırpar mı? Hayır. Görüntüleme alanını kaplamak için kullanılan ölçeği değiştirir. Hangi kısımların görünür olduğunu overflow ve kırpma kontrol eder. Ayrı bir düzenleme yapmadığınız sürece orijinal yol geometrisi belgede kalır.

None neden dairemi ovale dönüştürüyor? Yatay ve dikey yönlerde farklı ölçek çarpanlarına izin verir. Görüntüleme alanı ile viewBox oranları farklı olduğunda bir daire elipse dönüşebilir. Eşit ölçeklendirmeyi korumak için bir hizalama anahtar sözcüğüyle birlikte meet veya slice kullanın.

Kaynaklar

1. MDN preserveAspectRatio — Sığdırma değerlerini, hizalamayı, varsayılanları ve SVG image istisnasını tanımlar.
2. SVG coordinate-system specification — Görüntüleme alanı için ölçek ve öteleme hesabını tanımlar.
3. MDN SVG overflow — Overflow’un görüntüleme alanı kırpmasını nasıl kontrol ettiğini açıklar.
4. MDN object-fit — Yerine konan görsel içeriğinin CSS kutusuna sığdırılmasını belgeler.