SVG clipPath ve maske: Keskin kenar mı, yumuşak geçiş mi?

Bir görselin belirli bir konturda sonlanmasını istiyorsanız SVG <clipPath> kullanın. Görselin kısmi saydamlıkla yavaşça kaybolması gerekiyorsa SVG <mask> kullanın. Maske de keskin bir kesim oluşturabilir; ancak sert bir geometrik kenar için kırpma yolu, amacı daha basit biçimde ifade eder. CSS Masking belirtimi, bunları ayrı görünürlük işlemleri olarak tanımlar.

Logo şeklindeki bir görsel başka bir düzenleyiciye gönderilecekse bu seçim önemlidir. İki yöntem de ne gördüğünüzü denetler; hiçbiri gizlenen pikselleri geometriden silmez veya görseli vektör yollarına dönüştürmez. Bu kılavuz, tek bir özgün raster sahne ve tek bir kontur kullanır; ardından yalnızca görünürlük kuralını değiştirir. Dışa aktarmadan önce aynı testi kendi görselinize uygulayabilirsiniz.

İhtiyacınız olan kenara göre seçin

Kırpmanın görünür kenarında yine normal görüntüleme kaynaklı kenar yumuşatma bulunabilir. Ancak kırpma, şeklin içinde gri tonlu veya opaklık gradyanından kaynaklanan, bilinçli bir kısmi görünürlük şeridi oluşturamaz. MDN — Clipping and masking öğreticisi, bu ayrımı küçük SVG örnekleriyle gösterir.

Aynı görseli üç görünürlük kuralıyla karşılaştırın

Bu test için küçük bir manzara çizdim, onu 400 × 240 PNG olarak rasterleştirdim ve her panelde aynı pikselleri aynı yaprak benzeri konturun altına yerleştirdim. Soldaki panel o sınıra göre kırpılır. Ortadaki panel beyazdan siyaha geçişli bir parlaklık maskesi, sağdaki ise opaktan saydama geçişli bir alfa maskesi kullanır. İki gradyan da soldan sağa aynı saydamlaşmayı oluşturacak şekilde seçildi. Her sonuç açık ve koyu arka planlarda gösterilir; böylece kaybolan kenarı değerlendirmek kolaylaşır.

İki maske sütununun burada benzer görünmesinin bir nedeni vardır: beyazdan siyaha uzanan parlaklık gradyanı ile beyaz rengin opaklığını değiştiren gradyan, birbirine yakın maske değerleri kodlar. Bunlar birbirinin yerine kullanılabilecek girdiler değildir. Opak siyah, parlaklık maskesinde görseli gizlerken alfa maskesinde görünür bırakır. Alfa modunda sonucu pikselin opaklığı belirler; siyah veya beyaz olması belirlemez. CSS Masking — Mask processing tanımı, iki hesaplamayı da belirtir.

Tek bir konturdan kırpma ve maske oluşturun

Aşağıdaki içeriği clip-or-mask.svg olarak kaydedin, kendi photo.png dosyanızı yanına koyun ve iki dosyayı da aynı klasörden HTTP üzerinden sunun. İki görsel tek bir 400 × 240 koordinat sistemi kullanır. Aralarındaki tek fark clip-path veya mask kullanmalarıdır.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Başvurulan ID değerleri SVG içinde benzersiz olmalıdır. Kırpma ve maske, motif koordinatlarının her görselin yerel 400 × 240 alanıyla hizalanması için userSpaceOnUse kullanır. MDN — <clipPath> başvurusu, kırpmayı hedefin kendi geometrisini değiştirmeden boyamayı sınırlama işlemi olarak tanımlar. MDN — <mask> başvurusu ise maske bölgesini konumlandıran maskUnits ile maske görselini konumlandıran maskContentUnits arasındaki farkı açıklar.

Parlaklık modunu denemek için maskeyi farklı bir ID ile çoğaltın, mask-type="luminance" ayarlayın ve gradyan duraklarını başlangıçta opak beyaz, sonda opak siyah olacak şekilde değiştirin. mask başvurusunu bu yeni ID ile eşleştirin. SVG <mask> varsayılan olarak parlaklık modunu kullanır; bu örnek, ileride yapılacak bir düzenlemenin siyahın anlamını sessizce değiştirmemesi için modu açıkça belirtir. MDN — mask-type başvurusuna bakın.

Dışa aktarmadan önce sonucu kontrol edin

1. SVG'yi hem açık hem koyu arka planda görüntüleyin. Beyazda görünmez gibi duran bir saydamlık geçişi, koyu arka planda belirgin olabilir.
2. Görsel ve motifin aynı koordinatları kullandığını doğrulayın. Yalnızca görseli yeniden boyutlandırırsanız kontur artık hizalanmayabilir. Farklı boyuttaki hedeflerde yeniden kullanılabilen kırpmalar için clipPath birimleri kılavuzu, koordinat seçeneklerini açıklar.
3. Yumuşak bir kenar aniden sonlanıyorsa gradyanın yanı sıra maskenin x, y, width ve height değerlerini inceleyin. Maske bölgesi, sınırları dışındaki görseli kesebilir; yalnızca gradyanı genişletmek dar bir bölgeyi düzeltmez. MDN — mask, maske bölgesinin varsayılan değerlerini listeler; ancak açıkça belirtilmiş sınırları teslim dosyasında incelemek daha kolaydır.
4. Kaydedilen SVG'yi onu kullanacak uygulamada yeniden açın. Tarayıcıda doğru görüntülenmesi, başka bir içe aktarıcının ihtiyacınız olan kırpmayı, maskeyi, bağlantılı görseli veya düzenlenebilirliği koruduğunu kanıtlamaz.
5. Dosya yapısını inceleyin. Hâlâ <image> içeriyorsa kırpma sınırı vektör olsa bile raster pikseller içeriyor demektir. Gömülü raster kontrolü, bu ayrımı nasıl fark edebileceğinizi gösterir.

Bu örnekteki görsel PNG olarak kalır. Kırpma ve maskeleme onu vektörleştirmez. İşiniz gerçek kesim geometrisi veya kalıcı saydam bir delik gerektiriyorsa düzenleyicinizde ilgili yolları oluşturun ve dışa aktarılan dosyayı inceleyin. Dolmuş delikler için sorun giderme kılavuzu, gerçek bir açıklığı yalnızca beyaz tuvalde boş gibi görünen beyaz bir alandan ayırmanıza yardımcı olur.

PerfectVector bu süreçte nerede yer alır?

İhtiyacınız olan kontur yalnızca PNG veya JPG logoda mevcutsa PerfectVector'ün görselden vektöre dönüştürme iş akışı, düzenlenebilir bir SVG adayı sağlayabilir. Bir konturu <clipPath> veya <mask> içine kopyalamadan önce dış yolunu, küçük boşluklarını ve istenmeyen arka plan şekillerini inceleyin. Görünürlük yöntemini yine siz seçer ve efekti bir SVG düzenleyicide oluşturursunuz. Temiz bir vektör ana dosyası mevcutsa onu koruyun.

Bir fotoğrafı yalnızca maskenin arkasına yerleştirmek için vektörleştirmeniz gerekmez. Ayrıntılarını korumak önemliyse fotoğrafı raster görüntü olarak koruyun. SVG içindeki bir görsel yerine CSS ile denetlenen tek renkli bir simge için SVG CSS maske kılavuzu, bu ayrı iş akışını ele alır.

Sık sorulan sorular

SVG clipPath kademeli bir saydamlık geçişi oluşturabilir mi? Hayır. Kırpma yolu, sınırındaki normal kenar yumuşatma dışında hedefin hangi kısımlarının görünür olduğunu tanımlar. Bilinçli bir saydamlık geçişi için ara opaklık veya parlaklık değerleri olan bir maske kullanın.

Siyah, her SVG maskesinde görseli gizler mi? Hayır. Opak siyah, parlaklık maskesinde gizler; ancak piksel hâlâ opak olduğu için alfa maskesinde görünür bırakır. Tamamen saydam maske içeriği, hedef görseli her iki modda da gizler.

Kırpma veya maskeleme PNG'yi vektör görsele dönüştürür mü? Hayır. İkisi de görüntüleme sırasında görünürlüğü değiştirir. SVG hâlâ raster bir <image> içerebilir ve yalnızca vektörlerden oluşan bir teslim dosyası için ayrıca vektörleştirme veya yol düzenleme gerekebilir.

Kaynaklar

1. W3C — CSS Masking Module Level 1 — Kırpma, maskeleme ve alfa ile parlaklık maskesi değerlerinin tanımları.
2. MDN — Clipping and masking — Sert kenarlı kırpma ve yumuşak maske örnekleri.
3. MDN — <clipPath> — Kırpma davranışı, koordinat seçimi ve değişmeden kalan temel geometri.
4. MDN — <mask> — Maske bölgesi, içerik koordinat sistemi ve başvuru davranışı.
5. MDN — mask-type — SVG maske görselinin alfa ve parlaklık modlarında yorumlanması.

Raster logonuz için önce düzenlenebilir konturlar gerekiyorsa PerfectVector ile bir SVG adayı oluşturun, elde edilen yolu inceleyin; ardından kırpma veya maske uygulayın ve dışa aktarılan dosyayı hedef uygulamada yeniden açın.