SVG CSS 마스크: 실루엣 유지와 색상 설정
SVG를 CSS 아이콘 마스크로 사용하고 투명한 구멍을 보존하며 currentColor로 칠하세요. 알파와 휘도를 비교한 뒤 실제 UI 크기에서 아이콘을 확인하세요.
목차
SVG CSS 마스크는 요소의 어느 부분이 계속 보일지 제어합니다. 단색 아이콘에는 SVG의 실루엣을 마스크로 사용하고 요소를 background-color: currentColor로 칠하세요. 그러면 아이콘은 SVG의 원래 팔레트를 표시하는 대신 CSS에서 보이는 색상을 가져옵니다.
소스의 투명도부터 시작하세요. 아트워크 뒤의 불투명 사각형은 원하는 아이콘을 단색 블록으로 바꿀 수 있습니다. 아래 페이지가 보이게 하려면 투명한 구멍이 계속 투명해야 합니다.
MDN의 mask-image 참조는 소스 이미지와 마스킹 모드가 가시성을 결정하는 방식을 설명합니다. 실제 작업은 유용한 실루엣을 준비하고 해석 방식을 선택한 뒤 인터페이스에서 사용하는 크기로 확인하는 것입니다.
단색 실루엣이 목적일 때 마스크 사용하기
마름모 구멍과 작은 산호색 줄이 있는 책갈피 아이콘을 생각해 보세요. 일반 SVG 이미지로는 두 색상입니다. 파란 요소 위의 알파 마스크로는 불투명한 아트워크가 파란색을 드러내며 산호색 줄은 더 이상 별도 색상으로 나타나지 않습니다.
이는 테마를 바꿀 수 있는 인터페이스 아이콘에 유용합니다. 색상 차이가 의미를 전달하는 일러스트레이션에는 좋지 않은 전달 방식입니다.
개별 SVG 채우기와 스트로크를 편집해야 한다면 SVG 색상 편집 안내를 사용하세요. 마스킹은 실루엣 자체가 재사용 대상일 때 유용합니다. 명확한 도형 경계에는 사용자 지정 SVG 클립을 대상에 맞추고 실루엣을 늘일지 비율을 유지할지 선택하세요.
실제 구멍이 있는 작은 소스 준비하기
이 직접 만든 예제를 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>첫 경로에는 책갈피 바깥 모양과 마름모 구멍이 들어 있습니다. 전체 크기의 배경 사각형은 없습니다. 작은 두 번째 사각형이 산호색 줄입니다.
마스크로 사용하기 전에 대비되는 배경에서 SVG를 여세요. 마름모와 바깥 경계 주변이 비쳐 보이는지 확인하세요. 꽉 채운 책갈피 위에 흰색 마름모를 칠하면 흰 페이지에서는 비슷해 보이지만 알파 마스크에서는 여전히 불투명합니다.
기존 에셋에서는 보이는 모티프뿐 아니라 배경 도형도 살펴보세요. 투명 SVG 배경 안내는 빈 공간과 흰색 사각형의 차이를 다룹니다.
CSS로 아이콘 요소 칠하기
SVG 옆에 icon.css를 두고 다음 규칙을 사용하세요.
.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;
}버튼에는 보이는 라벨을 사용하세요.
<button class="save-button" type="button">
<span class="bookmark-icon" aria-hidden="true"></span>
Save article
</button>여기서 아이콘은 ‘Save article’과 함께 있으므로 라벨을 반복하지 않고 접근성 트리에서 숨깁니다. 예제는 표시만 보여 줍니다. 버튼은 애플리케이션의 저장 동작에 별도로 연결하세요.
요소에는 칠할 상자가 필요하므로 CSS에서 너비, 높이, display를 설정합니다. currentColor는 텍스트 색상을 사용합니다. 버튼의 color를 바꾸면 bookmark.svg를 다시 쓰지 않고 아이콘의 칠이 바뀝니다.
mask-size 참조는 contain을 비율을 유지하면서 전체 마스크 이미지를 맞추는 것으로 정의합니다. 가운데 정렬 및 반복 없음과 함께 사용하면 소스가 예측 가능한 아이콘 상자 하나를 차지합니다. web.dev의 마스킹 안내는 이 크기 및 반복 제어를 다룹니다.
로컬 테스트에서도 예제를 HTTP로 제공하세요. MDN의 mask-image 설명은 이 용도에 로컬 file:// 이미지 소스가 허용되지 않는다고 경고합니다. 마스크 이미지가 없거나 로딩에 실패하면 마스킹된 요소가 보이지 않을 수 있습니다.
SVG 이미지와 SVG mask 요소 구분하기
이미지로 사용한 SVG 파일과 SVG의 <mask> 요소 참조는 다른 입력입니다. 파일 이름이 .svg로 끝난다는 이유만으로 모드를 선택하지 마세요.
| 소스와 모드 | 가시성을 제어하는 것 |
|---|---|
mask-mode: alpha를 사용하는 일반 SVG 이미지 | 소스 불투명도: 불투명 아트워크가 요소를 드러냄 |
기본 match-source를 사용하는 일반 이미지 | 알파 해석 |
기본 설정의 SVG <mask> 참조 | 휘도 해석 |
명시적 mask-mode: luminance | 밝기와 불투명도의 조합 |
mask-mode 참조는 이 소스별 기본값을 정의합니다. 알파 해석에서 불투명한 검정과 흰색은 모두 요소를 드러냅니다. 휘도 해석에서는 불투명한 흰색이 드러내고 검정은 숨깁니다. 중간값은 부분적인 가시성을 만들 수 있습니다.
mask-type 참조에 따르면 mask-type은 SVG의 <mask> 요소에 적용되며 기본은 휘도입니다. 일반 아이콘 span에 추가해도 이미지 마스크의 해석은 바뀌지 않습니다. 동작을 지정해야 한다면 마스킹되는 요소에 mask-mode를 사용하세요.
책갈피 예제는 일반 외부 SVG 이미지를 사용하며 알파를 명시적으로 선택합니다. 지원 브라우저에서 사용하는 속성을 테스트하세요. 넓은 마스킹 기능 지원이 모든 모드와 소스 조합의 지원을 입증하지는 않습니다.
사각형, 누락 아이콘, 채워진 구멍 진단하기
유용한 실패 사례 테스트는 bookmark.svg 사본 뒤에 전체 크기의 불투명 흰색 사각형을 넣는 것입니다. 알파 해석에서는 이 사본이 전체 마스크 영역을 드러냅니다. 사각형을 흰색에서 검정으로 바꿔도 두 색상 모두 불투명하므로 실루엣이 복원되지 않습니다.
요소 색상을 조정하지 말고 소스에서 원치 않는 배경을 제거하세요. 수정한 사본과 비교할 수 있도록 원본 파일을 보관하세요.
| 증상 | 먼저 확인할 사항 |
|---|---|
| 책갈피 대신 단색 사각형이 나타남 | 소스의 전체 크기 불투명 배경 |
| 마름모 구멍이 채워짐 | 실제 투명 도형 대신 흰색 덮개가 있는지 |
| 아무것도 나타나지 않음 | 요소 치수, 칠한 배경, URL, 실패한 리소스 요청 |
| 여러 사본이 나타남 | 마스크 반복 설정 |
| 상자 안에서 아이콘이 너무 작음 | 소스 viewBox 여백과 마스크 크기 설정 |
| 아이콘이 희미함 | 소스 불투명도 또는 의도하지 않은 휘도 해석 |
이 테스트들을 별도로 유지하세요. 이미지 요청이 성공해도 소스의 투명도가 올바르다는 뜻은 아니며 투명도가 올바르다고 요소에 누락된 너비나 높이가 생기지는 않습니다.
컴포넌트 크기에서 결과 판단하기
책갈피를 확대하여 윤곽을 살펴본 뒤 실제 인터페이스 크기로 되돌리세요. 마름모 구멍, 아래 홈, 아이콘과 라벨 사이 공간을 확인하세요. 확대 버전은 결함을 찾고 작은 버전은 디자인이 유용한지 알려 줍니다.
대비되는 페이지 배경 두 개와 아이콘 색상 두 개를 시도하세요. 구멍은 모든 경우에 페이지 색상을 보여야 합니다. 계속 흰색이라면 소스 구조로 돌아가세요.
아이콘군에서는 같은 CSS 크기로 인접 심벌을 비교하세요. viewBox마다 빈 공간의 양이 달라 같은 상자라도 고르지 않게 보일 수 있습니다. UI 키트 아이콘 준비 안내는 일관성 작업을 다룹니다.
소스에 필요할 때만 래스터 실루엣 복원하기
투명한 PNG는 이미 CSS 마스크가 될 수 있습니다. 마스킹에 SVG 변환은 필수가 아닙니다. 기존의 깨끗한 벡터 소스가 있다면 유지하세요.
유용한 아이콘이 거친 래스터 이미지로만 남았다면 PerfectVector의 PNG에서 SVG로 변환 작업 흐름으로 편집 가능한 후보를 준비할 수 있습니다. 모티프 부분을 자르고 벡터 미리보기에서 배경 영역과 사라진 구멍을 살펴본 뒤 SVG를 다운로드하세요. 파일을 마스크에 사용하고 컴포넌트 크기 확인을 반복하세요.
책갈피에서는 원래의 산호색 줄을 걱정하기 전에 바깥 홈과 마름모 구멍을 판단하세요. 단색 마스크 칠이 어차피 줄의 색상을 흡수합니다. 복잡한 여러 색상 일러스트레이션에는 다른 처리가 필요할 수 있습니다. 모든 세부 요소를 추적하지 말고 실루엣을 의도적으로 선택하세요.
이미지 벡터화 개요는 소스 복원을 더 넓게 설명합니다. 벡터 파일도 이 CSS 작업 흐름에 맞는 유용한 모양과 적절한 투명도가 필요합니다.
FAQ
SVG 마스크는 원래 색상을 유지하나요? 마스크는 가시성을 제어합니다. 단색 배경 예제에서는 요소가 색상 하나를 제공하므로 소스의 개별 색상은 유지되지 않습니다.
아이콘이 단색 사각형이 되는 이유는 무엇인가요? 마스크 소스에 전체 크기의 불투명 배경이 있는지 확인하세요. 알파 해석에서는 불투명 흰색과 검정 모두 요소를 드러냅니다.
SVG 마스크는 항상 휘도 마스크인가요? 아닙니다. 일반 SVG 이미지는 match-source에서 보통 알파를 사용합니다. SVG mask 요소는 해석을 바꾸지 않으면 기본적으로 휘도를 사용합니다.
투명한 PNG를 SVG로 변환해야 하나요? 아닙니다. PNG도 마스크 이미지를 제공할 수 있습니다. 래스터 소스에서 적합한 실루엣을 복원하거나 편집해야 할 때 벡터화는 선택 사항입니다.
Sources
- MDN — mask-image — 이미지 소스, 로딩 실패, 로컬 서버 요구 사항, 가시성.
- MDN — mask-mode — 알파, 휘도, 소스별 기본값.
- MDN — mask-type — SVG mask 요소 해석.
- MDN — mask-size — contain 크기 맞춤과 이미지 비율.
- web.dev — CSS mask-image로 이미지에 효과 적용하기 — 이미지 마스크, 크기 설정, 반복.
아이콘 하나로 시작하여 실루엣, 구멍, 최종 UI 크기를 확인하세요. 래스터 소스 복원이 필요하다면 SVG 후보 파일을 준비하고 투명도를 살펴본 뒤 인터페이스가 사용할 CSS 칠로 테스트하세요.
