Maski CSS z SVG: zachowaj sylwetkę, ustaw kolor

Maska CSS z SVG określa, które części elementu pozostają widoczne. W przypadku jednokolorowej ikony użyj sylwetki z SVG jako maski i nadaj elementowi kolor za pomocą background-color: currentColor. Widoczny kolor ikony pochodzi wtedy z CSS, zamiast odzwierciedlać oryginalną paletę SVG.

Zacznij od przezroczystości źródła. Nieprzezroczysty prostokąt za grafiką może zmienić zamierzoną ikonę w jednolity blok. Przezroczysty otwór musi pozostać przezroczysty, jeśli chcesz, aby prześwitywała przez niego strona pod spodem.

Dokumentacja MDN mask-image opisuje, jak obraz źródłowy i tryb maskowania określają widoczność. W praktyce trzeba przygotować odpowiednią sylwetkę, wybrać sposób jej interpretacji i sprawdzić ją w rozmiarze używanym w Twoim interfejsie.

Użyj maski, gdy celem jest sylwetka w jednym kolorze

Rozważ ikonę zakładki z otworem w kształcie rombu i małym koralowym paskiem. Jako zwykły obraz SVG ma dwa kolory. Jako maska alfa na niebieskim elemencie nieprzezroczysta grafika odsłania kolor niebieski; koralowy pasek nie pojawia się już jako osobny kolor.

To przydatne w przypadku ikony interfejsu, której kolor ma się dostosowywać do motywu. Byłby to kiepski sposób prezentacji ilustracji, w której różnice kolorów niosą znaczenie.

Jeśli potrzebujesz edytować poszczególne wypełnienia i obrysy SVG, skorzystaj z poradnika zmiany kolorów SVG. Maskowanie przydaje się wtedy, gdy to sama sylwetka jest częścią do ponownego wykorzystania. Aby uzyskać ostrą granicę geometryczną, dopasuj niestandardowy obszar przycinania SVG do elementu docelowego i wybierz między rozciągnięciem sylwetki a zachowaniem jej proporcji.

Przygotuj niewielki plik źródłowy z rzeczywistym otworem

Zapisz ten oryginalny przykład jako bookmark.svg:

<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>

Pierwsza ścieżka zawiera zewnętrzny kształt zakładki i jej otwór w kształcie rombu. Nie ma tu prostokąta tła zajmującego cały obraz. Drugi, mały prostokąt to koralowy pasek.

Otwórz SVG na kontrastującym tle, zanim użyjesz go jako maski. Sprawdź, czy tło widać przez romb i wokół zewnętrznej granicy. Biały romb namalowany na jednolitej zakładce wyglądałby podobnie na białej stronie, ale w masce alfa nadal byłby nieprzezroczysty.

W przypadku istniejącego zasobu sprawdź zarówno ewentualny kształt tła, jak i widoczny motyw. Poradnik przezroczystego tła SVG omawia różnicę między pustą przestrzenią a białym prostokątem.

Nadaj kolor elementowi ikony za pomocą CSS

Umieść icon.css obok pliku SVG i użyj tych reguł:

.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;
}

Dodaj do przycisku widoczną etykietę:

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

Tutaj ikona towarzyszy etykiecie „Save article” („Zapisz artykuł”), więc jest wyłączona z drzewa dostępności, aby nie powtarzać tej etykiety. Przykład pokazuje tylko sposób prezentacji; osobno połącz przycisk z akcją zapisywania w swojej aplikacji.

Element potrzebuje obszaru, któremu można nadać kolor, dlatego CSS ustawia jego szerokość, wysokość i sposób wyświetlania. currentColor korzysta z jego koloru tekstu. Zmiana właściwości color przycisku zmienia kolor ikony bez modyfikowania bookmark.svg.

Dokumentacja mask-size definiuje contain jako dopasowanie całego obrazu maski z zachowaniem jego proporcji. W połączeniu z wyśrodkowaniem i wyłączeniem powtarzania sprawia to, że źródło zajmuje jeden przewidywalny obszar ikony. Poradnik maskowania web.dev omawia te ustawienia rozmiaru i powtarzania.

Udostępniaj przykład przez HTTP, także podczas testów lokalnych. Opis MDN mask-image ostrzega, że lokalne źródła obrazów file:// nie są akceptowane w tym zastosowaniu. Brak obrazu maski lub błąd jego wczytywania może sprawić, że maskowany element będzie niewidoczny.

Rozróżnij obraz SVG i element maski SVG

Plik SVG używany jako obraz i odwołanie do elementu SVG <mask> to różne źródła. Nie wybieraj trybu tylko dlatego, że nazwa pliku kończy się na .svg.

Dokumentacja mask-mode określa tę wartość domyślną zależną od źródła. Przy interpretacji alfa zarówno nieprzezroczysta czerń, jak i nieprzezroczysta biel odsłaniają element. Przy interpretacji luminancji nieprzezroczysta biel go odsłania, a czerń ukrywa; wartości pośrednie mogą dawać częściową widoczność.

Zgodnie z dokumentacją mask-type właściwość mask-type dotyczy elementu SVG <mask> i domyślnie przyjmuje luminancję. Dodanie jej do zwykłego elementu span ikony nie zmieni sposobu interpretacji maski będącej obrazem. Użyj mask-mode na maskowanym elemencie, gdy potrzebujesz określić to zachowanie.

Przykład zakładki używa zwykłego zewnętrznego obrazu SVG i jawnie wybiera alfę. Testuj używane właściwości w obsługiwanych przez siebie przeglądarkach; obsługa maskowania jako ogólnej funkcji nie oznacza obsługi każdej kombinacji trybu i źródła.

Znajdź przyczynę kwadratu, brakującej ikony lub wypełnionego otworu

Przydatnym testem negatywnym jest umieszczenie nieprzezroczystego białego prostokąta zajmującego cały obraz za grafiką w kopii bookmark.svg. Przy interpretacji alfa taka kopia odsłania cały obszar maski. Zmiana prostokąta z białego na czarny nie przywraca sylwetki, ponieważ oba kolory pozostają nieprzezroczyste.

Usuń niechciane tło ze źródła, zamiast zmieniać kolor elementu. Zachowaj oryginalny plik, aby móc porównać go z poprawioną kopią.

Przeprowadzaj te testy osobno. Pomyślne żądanie obrazu nie dowodzi, że źródło ma właściwą przezroczystość, a prawidłowa przezroczystość nie nadaje elementowi brakującej szerokości lub wysokości.

Oceń efekt w rozmiarze komponentu

Powiększ zakładkę, aby sprawdzić jej kontury, a następnie przywróć rzeczywisty rozmiar używany w interfejsie. Sprawdź otwór w kształcie rombu, dolne wycięcie i odstęp między ikoną a jej etykietą. Powiększona wersja pomaga znaleźć wady; mała wersja pokazuje, czy projekt jest użyteczny.

Wypróbuj dwa kontrastujące tła strony i dwa kolory ikony. W każdym przypadku przez otwór powinien być widoczny kolor strony. Jeśli pozostaje biały, wróć do struktury źródła.

W przypadku rodziny ikon porównaj sąsiadujące symbole przy tym samym rozmiarze CSS. Ich obszary viewBox mogą zawierać różne ilości pustej przestrzeni, przez co ikony w jednakowych obszarach wyglądają nierówno. Poradnik przygotowania ikon do zestawu UI omawia pracę nad taką spójnością.

Odtwarzaj sylwetkę z obrazu rastrowego tylko wtedy, gdy źródło tego wymaga

Przezroczysty PNG może już służyć jako maska CSS; konwersja do SVG nie jest wymagana do maskowania. Jeśli masz czyste źródło wektorowe, zachowaj je.

Jeśli przydatna ikona zachowała się tylko jako niedopracowany obraz rastrowy, procedura konwersji PNG do SVG w PerfectVector może pomóc przygotować wersję do dalszej edycji. Przytnij obraz do motywu, sprawdź podgląd wektorowy pod kątem obszarów tła i utraconych otworów, a następnie pobierz SVG. Użyj tego pliku w masce i powtórz kontrole w rozmiarze komponentu.

W przypadku zakładki oceń zewnętrzne wycięcie i otwór w kształcie rombu, zanim zajmiesz się oryginalnym koralowym paskiem. Jednolity kolor maskowanego elementu i tak zastąpi kolor tego paska. Złożona wielokolorowa ilustracja może wymagać innego podejścia; świadomie wybierz sylwetkę, zamiast odwzorowywać każdy szczegół.

Omówienie wektoryzacji obrazów szerzej wyjaśnia odtwarzanie źródła. Plik wektorowy nadal potrzebuje odpowiedniego kształtu i właściwej przezroczystości do tego sposobu pracy z CSS.

Najczęściej zadawane pytania

Czy maska SVG zachowuje oryginalne kolory? Maska określa widoczność. W przykładzie z jednolitym tłem element nadaje jeden kolor, więc odrębne kolory źródła nie zostają zachowane.

Dlaczego moja ikona zmienia się w jednolity kwadrat? Sprawdź, czy źródło maski zawiera nieprzezroczyste tło zajmujące cały obraz. Przy interpretacji alfa zarówno nieprzezroczysta biel, jak i czerń odsłaniają element.

Czy maski SVG zawsze są maskami luminancji? Nie. Zwykły obraz SVG zazwyczaj używa alfy przy match-source. Element maski SVG domyślnie używa luminancji, chyba że zmienisz sposób jego interpretacji.

Czy muszę przekonwertować przezroczysty PNG do SVG? Nie. PNG może dostarczać obraz maski. Wektoryzacja jest opcjonalna, gdy potrzebujesz odtworzyć lub edytować odpowiednią sylwetkę ze źródła rastrowego.

Źródła

1. MDN — mask-image — Źródła obrazów, błędy wczytywania, wymagania dotyczące lokalnego serwera i widoczność.
2. MDN — mask-mode — Alfa, luminancja i wartości domyślne zależne od źródła.
3. MDN — mask-type — Interpretacja elementu maski SVG.
4. MDN — mask-size — Dopasowanie rozmiaru za pomocą contain i proporcje obrazu.
5. web.dev — Apply effects to images with CSS mask-image — Maski obrazów, ustawienia rozmiaru i powtarzanie.

Zacznij od jednej ikony i sprawdź jej sylwetkę, otwór oraz docelowy rozmiar w interfejsie. Jeśli źródło rastrowe wymaga odtworzenia, przygotuj wersję SVG do oceny, sprawdź jej przezroczystość i przetestuj ją z kolorem, który Twój interfejs będzie nadawać za pomocą CSS.