SVG desen birimleri: Motifleri doğru boyutta tutun

Bir şeklin boyutlarını değiştirirken SVG deseninin tekrar aralığını sabit tutmak için patternUnits="userSpaceOnUse" ve sayısal bir karo genişliği ile yüksekliği kullanın. Karonun içindeki çizimi ise patternContentUnits veya desene ait bir viewBox ile ayrı olarak kontrol edin.

Bu ayrım, küçük bir motif hem dar bir rozeti hem de geniş bir afişi doldurduğunda önem kazanır. Afişte daha fazla kopya, kopyalar arasında daha büyük boşluklar veya esnetilmiş bir motif isteyebilirsiniz. Bunların her biri farklı bir koordinat seçimi gerektirir. Afiş grubunun tamamını ölçeklemek ise sonucu tekrar değiştirir.

Motif zaten SVG yollarından oluşuyorsa bu yolları koruyun. Vektörleştirme, tek kaynağın raster görüntü olduğu durumlarda iş akışının daha önceki aşamasına aittir.

Karoyu içindeki çizimden ayrı düşünün

Bir desen, tekrarlanan dikdörtgen bir karodan ve onun içine çizilen içerikten oluşur. patternUnits, karonun x, y, width ve height değerlerini kontrol eder. Desenin bir viewBox değeri yoksa patternContentUnits, içerik koordinatlarını kontrol eder.

objectBoundingBox kullanıldığında .25 genişliği, doldurulan nesnenin sınırlayıcı kutu genişliğinin dörtte biri anlamına gelir. Motifin genişliğinin dörtte biri anlamına gelmez. 120 birim genişliğindeki bir dikdörtgende karo 30 birim, 240 birim genişliğindeki bir dikdörtgende ise 60 birim olur.

İçerik koordinatları için varsayılan değer userSpaceOnUse olarak kalır. Bu nedenle yalnızca patternUnits değerini değiştirmek, her motifin boyutu aynı kalırken motifler arasındaki boşlukları değiştirebilir. Birlikte değiştiklerini varsaymak yerine iki özniteliği de bilinçli olarak ayarlayın.

Bir yaprağın dört sürümünü karşılaştırın

Bu örnek için yaprak yollarını çizdik ve SVG'yi bir tarayıcıda görüntüledik. İki hedef dikdörtgen de 80 birim yüksekliğinde; genişlikleri ise 120 ve 240 birim. Ekran görüntüsünde bu özgün şekillerin çevresine etiketler ve arka planlar eklenmiştir. Bu bir SVG gösterimidir, PerfectVector dönüşüm sonucu değildir.

Satırları yukarıdan aşağıya okuyun:

1. Sabit 40 × 40 karo, dar dikdörtgende üç, geniş dikdörtgende altı sütun oluşturur. Yaprağın boyutları değişmez.
2. .25 karo genişliği, her iki hedefte de dört sütunu korur. Yaprak koordinatları hâlâ kullanıcı birimlerini kullandığı için geniş dikdörtgende yapraklar arasında daha fazla boşluk vardır.
3. Sınırlayıcı kutuya göre tanımlanan içerik koordinatları, hedef genişliği iki katına çıktığında yaprağı yatay olarak esnetir. Hedefin yüksekliği değişmediği için dikey boyutu aynı kalır.
4. viewBox="0 0 40 40" içeren sabit 40 × 40 karo, işaretlemede patternContentUnits="objectBoundingBox" kalmasına rağmen ilk satırın sonucuna geri döner. Desenin viewBox değeri önceliklidir.

Tam örneği açın

Bunu pattern-units.svg olarak kaydedin ve doğrudan bir tarayıcıda açın. Dört satır, görseldekiyle aynı tanımları kullanır; etiketler ve arka planlar yoktur. Her dikdörtgen çifti, yerel başlangıç noktaları karşılaştırılabilir olsun diye öteleme uygulanmış gruplara yerleştirilmiştir.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

fixed deseniyle başlayın ve yalnızca ikinci dikdörtgenin genişliğini değiştirin. Ardından bir yolu değiştirmeden önce tile ve both desenlerini inceleyin. Böylece koordinat seçimini çizimin kendisinden ayrı tutarsınız. Daha kapsamlı yol ve renk değişiklikleri için SVG düzenleme rehberini kullanın.

Motifin kendi koordinatları varsa viewBox kullanın

Desene ait bir viewBox, karo ayrı bir boyuta sahipken yaprağın alışık olduğunuz çizim alanını korumasını sağlar. SVG desen belirtimi, viewBox ve preserveAspectRatio kullanarak bu çizim alanını karoya sığdırır.

Son satırda hem karo hem de viewBox 40 × 40 olduğundan en boy oranında uyumsuzluk yoktur. Daha sonra karoyu dikdörtgen yaparsanız varsayılan preserveAspectRatio="xMidYMid meet", motifin oranlarını korur ve sığdırılan çizim alanını ortalar. preserveAspectRatio="none", yatay ve dikey yönlerde bağımsız ölçeklemeye izin verir. Bunu yalnızca biçim bozulmasını amaçlıyorsanız seçin.

Desende bir viewBox varken patternContentUnits değerini değiştirmek boyut sorununu çözmez: bu durumda özniteliğin etkisi yoktur. Hangi parçanın değişmesi gerektiğine göre karo boyutlarını, viewBox değerini veya onun en boy oranı kuralını değiştirin.

Tek bir tanımın tekrarlanan bir dolgu oluşturması gerektiğinde desen kullanışlıdır. Bunun yerine tek tek yerleştirilmiş kopyalara ihtiyacınız varsa SVG sembolleri ve use ile oluşturulan kopyalar bu işe daha doğrudan uygundur.

Dikdörtgeni boyutlandırmak ile grubunu ölçeklemek farklıdır

userSpaceOnUse, aralığı kullanıcı koordinatlarında sabitler; ekranda değişmez bir piksel aralığı sağlamaz. Bir dönüşüm, desen dolgusu da dâhil olmak üzere bu koordinatları ölçekleyebilir.

Yukarıdaki fixed tanımını kullanan iki sürümü de açtık. İlk dikdörtgende width="240" vardı. İkincisi, transform="translate(20 120) scale(2 1)" uygulanmış bir grubun içinde width="120" değerini koruyordu. İkisi de o belgede ekranda 240 birim yer kaplıyordu; ancak ilki altı yaprak sütunu, dönüşüm uygulanan diğeri ise yatay olarak esnetilmiş üç sütun gösteriyordu.

Ekran boyutuna uyarlanan çizimlerde sorun araştırırken bu ayrımdan yararlanın:

• Daha fazla tekrarı görünür kılmak için koordinat ölçeğini değiştirmeden hedefin geometrisini büyütün.
• Tüm kompozisyonu büyütmek için grubu ölçekleyin ve desenin görünümünün de ölçeklenmesini bekleyin.
• Sayfa yerleşimi kök SVG'nin görüntülenen boyutunu değiştiriyorsa desen özniteliklerini sorumlu tutmadan önce kök viewBox eşlemesini inceleyin.

SVG koordinat sistemi belirtimi, kullanıcı koordinatlarına uygulanan dönüşümleri açıklar. Uygulamalar arasında uyumsuzluk varsa önce SVG belgesinin boyutlarını kontrol edin; desen birimleri tek başına fiziksel çıktı boyutunu belirleyemez.

Özel motifinizi tekrarlamadan önce hazırlayın

Motifiniz yalnızca PNG veya JPG olarak mevcutsa PerfectVector, tekrar için SVG geometrisini yeniden elde edebilir. Motifi vektöre dönüştürün, sonucu bir düzenleyicide açın ve desene yerleştirmeden önce ana hattı, küçük boşlukları ve istenmeyen arka plan şekillerini inceleyin.

Motifin ayrı bir ana SVG dosyasını saklayın. Karoyu bir kopyanın çevresinde oluşturun, ardından hem dar hem de geniş bir hedefte test edin. Mevcut vektör çizimleri doğrudan bu düzenleme adımına geçebilir. Basit bir geometrik işareti elle yeniden çizmek daha hızlı olabilir; bir fotoğrafı ise karmaşık bir yol kümesine dönüştürmek yerine görüntü olarak korumak daha uygun olabilir.

Tarayıcıda görüntülenmesi, her tasarım uygulamasının desen tanımını koruduğunu kanıtlamaz. Kaydedilen dosyayı gerçek hedef ortamında yeniden açın ve tekrar aralığını ve motif biçimini orada kontrol edin. Tekrarlanan bir dolgu, görünür her yaprağın bağımsız olarak düzenlenebilir kopyalarını da oluşturmaz. SVG dosyası rehberi, belgenin görünümünün yanı sıra yapısının da neden önemli olduğunu açıklar.

Dosyayı teslim etmeden önce her fill="url(#...)" başvurusunun mevcut ve benzersiz bir desen ID'sine işaret ettiğini, karonun pozitif boyutlara sahip olduğunu ve motifin amaçlanan karoya sığdığını kontrol edin. SVG desenleri normalde içeriği karo sınırında kırpar. Bu nedenle bir kenarı aşan yaprak için taşan kısmın görüneceğini varsaymak yerine tekrarın bilinçli şekilde tasarlanması gerekir.

Sık sorulan sorular

Aralık değişirken yaprak neden aynı boyutta kaldı? patternUnits, karo boyutlarını; patternContentUnits ise çizim koordinatlarını kontrol eder. Varsayılan kullanıcı uzayı içeriğiyle birlikte kullanılan, sınırlayıcı kutuya göre tanımlanmış bir karo, yaprağı boyutlandırmadan aralığını değiştirebilir.

patternContentUnits neden hiçbir şey yapmıyormuş gibi görünüyor? Desende bir viewBox olup olmadığını kontrol edin. Varsa içerik koordinat eşlemesini o tanımlar ve patternContentUnits etkisiz kalır.

userSpaceOnUse desenin ekranda aynı boyutta kalmasını sağlar mı? Sayısal karo boyutlarını hedefin geçerli kullanıcı koordinat sisteminde tutar. Bir grubu ölçeklemek veya kök SVG'nin koordinatlardan görüntüleme alanına eşlemesini değiştirmek, desenin görüntülenen boyutunu yine değiştirebilir.

Kaynaklar

1. MDN — patternUnits — Karo geometrisinin koordinatlarını ve sınırlayıcı kutu varsayılanını tanımlar.
2. MDN — patternContentUnits — İçerik koordinatlarını ve viewBox önceliğini tanımlar.
3. W3C — SVG patterns — Karonun sığdırılmasını, en boy oranı davranışını ve desen kırpmasını açıklar.
4. W3C — SVG coordinate systems — Grup ölçeklemesinin temelindeki kullanıcı koordinatı dönüşümlerini tanımlar.

Yeniden kullanmak istediğiniz, yalnızca raster görüntü olarak mevcut bir motifiniz mi var? Görüntünüzü SVG yollarına dönüştürün, yeniden elde edilen ana hattı inceleyin ve nihai tekrar düzenini oluşturmadan önce iki hedef boyutunda da test edin.