SVG CSS maskeleri: Silueti koruyun, rengi ayarlayın

Bir SVG CSS maskesi, bir öğenin hangi kısımlarının görünür kalacağını belirler. Tek renkli bir simge için SVG'nin siluetini maske olarak kullanın ve öğeyi background-color: currentColor ile boyayın. Böylece simgenin görünür rengi, SVG'nin özgün paletini görüntülemek yerine CSS'den gelir.

Kaynağın saydamlığından başlayın. Çizimin arkasındaki opak bir dikdörtgen, amaçlanan simgeyi dolu bir bloğa dönüştürebilir. Altındaki sayfanın görünmesini istiyorsanız saydam bir boşluk saydam kalmalıdır.

MDN'nin mask-image referansı, kaynak görselin ve maskeleme kipinin görünürlüğü nasıl belirlediğini açıklar. Uygulamada yapmanız gereken, işe yarayan bir siluet hazırlamak, nasıl yorumlanacağını seçmek ve arayüzünüzün kullandığı boyutta incelemektir.

Amaç tek renkli bir siluetse maske kullanın

Elmas biçimli bir boşluğu ve küçük bir mercan rengi şeridi olan yer imi simgesini düşünün. Sıradan bir SVG görseli olarak iki renklidir. Mavi bir öğenin üzerindeki alfa maskesi olarak kullanıldığında opak çizim maviyi görünür kılar; mercan rengi şerit artık ayrı bir renk olarak görünmez.

Bu, rengi temaya göre değiştirilebilen bir arayüz simgesi için kullanışlıdır. Renk farklarının anlam taşıdığı bir illüstrasyon içinse kötü bir sunum tercihidir.

SVG'nin dolgularını ve konturlarını tek tek düzenlemeniz gerekiyorsa SVG renk düzenleme rehberini kullanın. Maskeleme, yeniden kullanılacak parça siluetin kendisi olduğunda kullanışlıdır. Kesin bir geometrik sınır için özel SVG kırpma alanını hedefine uyarlayın ve silueti esnetmekle oranlarını korumak arasında seçim yapın.

Gerçek bir boşluk içeren küçük bir kaynak hazırlayın

Bu özgün örneği bookmark.svg adıyla kaydedin:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

İlk yol, yer iminin dış şeklini ve elmas biçimli boşluğunu içerir. Tüm alanı kaplayan bir arka plan dikdörtgeni yoktur. İkinci küçük dikdörtgen, mercan rengi şerittir.

SVG'yi maske olarak kullanmadan önce zıt renkli bir arka plan üzerinde açın. Elmasın içinden ve dış sınırın çevresinden arka planı görebildiğinizi kontrol edin. Dolu bir yer iminin üzerine boyanmış beyaz bir elmas, beyaz bir sayfada benzer görünür, ancak alfa maskesinde yine de opak kalır.

Mevcut bir varlıkta görünür motifin yanı sıra arka plan şekillerini de inceleyin. Saydam SVG arka planı rehberi, boş alanla beyaz dikdörtgen arasındaki farkı ele alır.

Simge öğesini CSS ile boyayın

icon.css dosyasını SVG'nin yanına yerleştirin ve şu kuralları kullanın:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

Düğmede görünür bir etiket kullanın:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Burada simge “Save article” ifadesine eşlik ettiği için etiketi tekrarlamak yerine erişilebilirlik ağacından gizlenir. Örnek yalnızca sunumu gösterir; düğmeyi uygulamanızın kaydetme eylemine ayrıca bağlayın.

Öğenin boyanacak bir kutuya ihtiyacı vardır; bu yüzden CSS genişliğini, yüksekliğini ve görüntüleme biçimini belirler. currentColor, metin rengini kullanır. Düğmenin color değerini değiştirmek, bookmark.svg dosyasını yeniden yazmadan simgenin rengini değiştirir.

mask-size referansı, contain değerini tüm maske görselini oranlarını koruyarak sığdırma olarak tanımlar. Ortalamayla ve tekrarın kapatılmasıyla birlikte kullanıldığında kaynak, tek ve öngörülebilir bir simge kutusuna yerleşir. web.dev'in maskeleme rehberi, bu boyutlandırma ve tekrar kontrollerini ele alır.

Yerelde test ederken de örneği HTTP üzerinden sunun. MDN'nin mask-image açıklaması, yerel file:// görsel kaynaklarının bu kullanımda kabul edilmediği konusunda uyarır. Eksik veya yüklenemeyen bir maske görseli, maskelenen öğeyi görünmez bırakabilir.

SVG görselini SVG mask öğesinden ayırın

Görsel olarak kullanılan bir SVG dosyasıyla bir SVG <mask> öğesine yapılan referans farklı girdilerdir. Dosya adının .svg ile bitmesine bakarak kip seçmeyin.

mask-mode referansı, kaynağa bağlı bu varsayılanı belirtir. Alfa yorumunda opak siyah da opak beyaz da öğeyi görünür kılar. Parlaklık yorumunda opak beyaz öğeyi gösterir, siyah gizler; ara değerler kısmi görünürlük oluşturabilir.

mask-type referansına göre mask-type, bir SVG <mask> öğesine uygulanır ve varsayılanı parlaklıktır. Bunu sıradan simge span öğesine eklemek, görsel maskesinin yorumlanma biçimini değiştirmez. Bu davranışı belirtmeniz gerektiğinde maskelenen öğede mask-mode kullanın.

Yer imi örneği, sıradan bir dış SVG görseli kullanır ve açıkça alfayı seçer. Kullandığınız özellikleri desteklediğiniz tarayıcılarda test edin; genel maskeleme özelliğinin desteklenmesi, her kip ve kaynak birleşiminin desteklendiğini göstermez.

Dolu kareyi, görünmeyen simgeyi veya dolan boşluğu teşhis edin

Yararlı bir olumsuz durum testi, bookmark.svg dosyasının bir kopyasında çizimin arkasına tüm alanı kaplayan opak beyaz bir dikdörtgen koymaktır. Alfa yorumunda bu kopya tüm maske alanını görünür kılar. Dikdörtgeni beyazdan siyaha çevirmek silueti geri getirmez, çünkü her iki renk de opak kalır.

Öğenin rengini ayarlamak yerine istenmeyen arka planı kaynaktan kaldırın. Düzeltilmiş kopyayı karşılaştırabilmek için özgün dosyayı saklayın.

Bu testleri ayrı tutun. Başarılı bir görsel isteği, kaynağın doğru saydamlığa sahip olduğunu kanıtlamaz; doğru saydamlık da öğenin eksik genişliğini veya yüksekliğini sağlamaz.

Sonucu bileşen boyutunda değerlendirin

Konturlarını incelemek için yer imini büyütün, ardından gerçek arayüz boyutuna geri getirin. Elmas biçimli boşluğu, alttaki çentiği ve simgeyle etiketi arasındaki mesafeyi kontrol edin. Büyütülmüş sürüm kusurları bulmanıza yardımcı olur; küçük sürüm ise tasarımın işe yarayıp yaramadığını gösterir.

Birbiriyle kontrast oluşturan iki sayfa arka planı ve iki simge rengi deneyin. Boşluk, her durumda sayfanın rengini göstermelidir. Beyaz kalıyorsa kaynak yapısına geri dönün.

Bir simge ailesinde yan yana duran simgeleri aynı CSS boyutunda karşılaştırın. viewBox değerleri farklı miktarlarda boş alan içerebilir; bu da eşit kutuların dengesiz görünmesine yol açar. Arayüz kiti simge hazırlama rehberi, bu tutarlılık çalışmasını ele alır.

Raster silueti yalnızca kaynak gerektiriyorsa kurtarın

Saydam bir PNG zaten CSS maskesi olarak kullanılabilir; maskeleme için SVG dönüşümü şart değildir. Elinizde temiz bir vektör kaynağı varsa onu koruyun.

Kullanışlı bir simgenin yalnızca kaba bir raster görseli kaldıysa PerfectVector'ın PNG'den SVG'ye dönüştürme iş akışı, düzenlenebilir bir aday hazırlamanıza yardımcı olabilir. Motifi kapsayacak şekilde kırpın, vektör önizlemesinde arka plan bölgelerini ve kaybolan boşlukları inceleyin, ardından SVG'yi indirin. Bu dosyayı maskede kullanın ve bileşen boyutundaki kontrolleri tekrarlayın.

Yer iminde, özgün mercan rengi şeritle ilgilenmeden önce dış çentiği ve elmas biçimli boşluğu değerlendirin. Tek renkli maske boyaması zaten şeridin rengini de kendi rengine dönüştürecektir. Karmaşık, çok renkli bir illüstrasyon farklı bir yaklaşım gerektirebilir; her ayrıntıyı vektörleştirmek yerine silueti bilinçli olarak seçin.

Görsel vektörleştirmeye genel bakış, kaynağı geri kazanmayı daha geniş kapsamda açıklar. Bir vektör dosyasının da bu CSS iş akışı için kullanışlı bir şekle ve uygun saydamlığa sahip olması gerekir.

Sık sorulan sorular

SVG maskesi özgün renkleri korur mu? Maske görünürlüğü kontrol eder. Tek renkli arka plan örneğinde rengi öğe sağladığı için kaynağın ayrı renkleri korunmaz.

Simgem neden dolu bir kareye dönüşüyor? Maske kaynağında tüm alanı kaplayan opak bir arka plan olup olmadığını kontrol edin. Alfa yorumunda opak beyaz da siyah da öğeyi görünür kılar.

SVG maskeleri her zaman parlaklık maskesi midir? Hayır. Sıradan bir SVG görseli, match-source altında normalde alfa kullanır. Bir SVG mask öğesi ise yorumlanma biçimi değiştirilmedikçe varsayılan olarak parlaklık kullanır.

Saydam bir PNG'yi SVG'ye dönüştürmem gerekir mi? Hayır. PNG bir maske görseli sağlayabilir. Raster kaynaktan uygun bir silueti geri kazanmanız veya düzenlemeniz gerektiğinde vektörleştirme isteğe bağlıdır.

Kaynaklar

1. MDN — mask-image — Görsel kaynakları, başarısız yükleme, yerel sunucu gereksinimleri ve görünürlük.
2. MDN — mask-mode — Alfa, parlaklık ve kaynağa bağlı varsayılanlar.
3. MDN — mask-type — SVG mask öğesinin yorumlanması.
4. MDN — mask-size — Contain boyutlandırması ve görsel oranları.
5. web.dev — Apply effects to images with CSS mask-image — Görsel maskeleri, boyutlandırma ve tekrar.

Tek bir simgeyle başlayın ve siluetini, boşluğunu ve son arayüz boyutunu kontrol edin. Raster kaynağın geri kazanılması gerekiyorsa bir SVG adayı hazırlayın, saydamlığını inceleyin ve arayüzünüzün kullanacağı CSS boyamasıyla test edin.