[HTML/CSS] SVG 이미지 마스크로 사용하기

이미지와 같이 어떤 이미지를 내가 원하는 만큼만 원하는 색으로 칠하고 싶을 땐
svg 이미지를 코드로 가져와 마스크로 사용하면 된다.

⭐ 위 이미지를 보면
노란색의 사각형 박스를 별 모양의 svg 이미지가 가리고 있는 형태이다.
여기서 별 모양의 svg 가 마스크 역할을 하는 것이다.

1. SVG 이미지 코드 가져오기

디자인 팀이 있는 회사거나 본인이 피그마를 사용할 줄 아는 사람이라면
피그마에서 이미지를 가져와 저장하고, vscode와 같은 ide에서 열어 svg 코드를 가져올 수 있을 것이다.

이런 과정이 어렵거나 귀찮다면 svg 사이트에서 가져오는 방법도 있다.
나는 SVG Repo 라는 사이트에서 가져와서 사용하였다.

하단 왼쪽의 COPY SVG 버튼을 누르면 svg 코드가 복사된다.

2. html 코드 만들기

위에서 가져온 svg 코드를 IDE에 붙여넣고 정리하면 다음과 같이 나온다.

<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" fill="#000000">
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
  <g id="SVGRepo_iconCarrier">
    <path fill="#231F20"
      d="M62.799,23.737c-0.47-1.399-1.681-2.419-3.139-2.642l-16.969-2.593L35.069,2.265 C34.419,0.881,33.03,0,31.504,0c-1.527,0-2.915,0.881-3.565,2.265l-7.623,16.238L3.347,21.096c-1.458,0.223-2.669,1.242-3.138,2.642 c-0.469,1.4-0.115,2.942,0.916,4l12.392,12.707l-2.935,17.977c-0.242,1.488,0.389,2.984,1.62,3.854 c1.23,0.87,2.854,0.958,4.177,0.228l15.126-8.365l15.126,8.365c0.597,0.33,1.254,0.492,1.908,0.492c0.796,0,1.592-0.242,2.269-0.72 c1.231-0.869,1.861-2.365,1.619-3.854l-2.935-17.977l12.393-12.707C62.914,26.68,63.268,25.138,62.799,23.737z">
    </path>
  </g>
</svg>

(1) 이미지 크기, 색상 조정

위 그대로 저장하고 페이지를 열어보면 이미지가 화면 전체를 차지해버림..
크기를 본인이 원하는 만큼으로 지정하여 수정한다.
<svg 옆에 width 와 height 를 설정해준다.

<svg width="300" height="300" version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     ... 생략

색상을 조정하려면 svg 태그 내의 fill 속성을 본인이 원하는 색으로 바꿔주면 된다.

(2) 마스크 넣기

위 이미지를 마스크로 이용하기 위해 <svg> 태그 안에 <mask> 태그를 넣어줘야한다.

그리고 그 안에 다시 svg 코드를 넣어줘야 하는데 이땐 svg 코드 전체를 넣어줄 필요는 없고 svg 태그 내의 path 태그만 복사해서 붙여넣기 해주면된다.

결국 <svg> 태그 안에 <mask> 태그 안에 <path> 태그가 생기는 셈이다.
(따라서 <svg> 태그 안에 <path> 태그가 총 두개 생길것임)

마지막으로 mask 태그에는 id를 넣어주도록 하자.
(노란색 사각형이 차지할 부분을 나중에 선언해주기 위해서...)

<svg width="300" height="300" version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" fill="#000000">
 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
 <g id="SVGRepo_iconCarrier"> 
   <path fill="#231F20" d="M62.799,23.737c-0.47-1.399-1.681-2.419-3.139-2.642l-16.969-2.593L35.069,2.265 C34.419,0.881,33.03,0,31.504,0c-1.527,0-2.915,0.881-3.565,2.265l-7.623,16.238L3.347,21.096c-1.458,0.223-2.669,1.242-3.138,2.642 c-0.469,1.4-0.115,2.942,0.916,4l12.392,12.707l-2.935,17.977c-0.242,1.488,0.389,2.984,1.62,3.854 c1.23,0.87,2.854,0.958,4.177,0.228l15.126-8.365l15.126,8.365c0.597,0.33,1.254,0.492,1.908,0.492c0.796,0,1.592-0.242,2.269-0.72 c1.231-0.869,1.861-2.365,1.619-3.854l-2.935-17.977l12.393-12.707C62.914,26.68,63.268,25.138,62.799,23.737z"></path> 
 </g>
 <!-- 이곳이 추가된 <mask> 태그 부분 -->
 <mask id="star_mask">
   <rect width="100%" height="100%" fill="black"/>
   <path fill="white" d="M62.799,23.737c-0.47-1.399-1.681-2.419-3.139-2.642l-16.969-2.593L35.069,2.265 C34.419,0.881,33.03,0,31.504,0c-1.527,0-2.915,0.881-3.565,2.265l-7.623,16.238L3.347,21.096c-1.458,0.223-2.669,1.242-3.138,2.642 c-0.469,1.4-0.115,2.942,0.916,4l12.392,12.707l-2.935,17.977c-0.242,1.488,0.389,2.984,1.62,3.854 c1.23,0.87,2.854,0.958,4.177,0.228l15.126-8.365l15.126,8.365c0.597,0.33,1.254,0.492,1.908,0.492c0.796,0,1.592-0.242,2.269-0.72 c1.231-0.869,1.861-2.365,1.619-3.854l-2.935-17.977l12.393-12.707C62.914,26.68,63.268,25.138,62.799,23.737z"></path> 
 </mask>
 <rect width="100%" height="60%" fill="#f5cd00" mask="url(#f_mask)" y="40%"/>
</svg>

(3) 컬러 넣기

정확히는 컬러가 들어간 사각형을 넣을 차례다.
<mask> 태그가 끝난 그 다음 줄에 <rect> 코드를 넣어주면 된다.

총 다섯가지 속성을 설정해주자.

• width="100%"
  컬러가 svg 이미지 너비 전체를 차지해야하니깐 100% 로 설정해준다.
• height="원하는 비율 %"
  원하는 비율만큼의 퍼센트를 넣어주면 된다.
  50%를 넣으면 반만큼 차지할 것이고,
  33%를 넣으면 1/3 만큼만 차지할 것이다.
  ex) height="60%"
• fill="#색상헥스코드"
  컬러 사각형이니깐 컬러를 넣어야하겠지?
  난 노란색을 넣어보았다.
  ex) fill="#f5cd00"
• mask="url(#마스크ID)"
  위에서 <mask> 태그에 설정한 id를 여기에 넣어주면 된다.
  넣을 떈 url 안에 넣어주자.
  ex) mask="url(#star_mask)"
• (선택) y="100-height + %"
  height를 설정했다면 그만큼 컬러가 이미지를 채우게 될텐데
  y속성을 설정하지 않으면 위쪽 끝에서부터 컬러가 이미지를 채울 것이다.
  만약 위가 아니라 아래 끝에서부터 컬러가 이미지를 채우게 하고 싶다면
  y 속성에 100에서 height 퍼센트를 뺀 만큼 넣어주면 된다.
  예를 들어, height를 30% 로 설정했다면 y는 70%를 넣어주면 되는 것!
  ex) y="40%"

<rect width="100%" height="60%" y="40%" fill="#f5cd00" mask="url(#star_mask)"/>

끝

프로젝트에서 사람 이미지를 가지고 특정 퍼센트만큼 컬러로 채워야하는 일이 생겨서 찾아본 방법이다.
유용하게 쓰시길~

전체 코드

<svg width="300" height="300" version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" fill="#000000">
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
  <g id="SVGRepo_iconCarrier"> 
    <path fill="#231F20" d="M62.799,23.737c-0.47-1.399-1.681-2.419-3.139-2.642l-16.969-2.593L35.069,2.265 C34.419,0.881,33.03,0,31.504,0c-1.527,0-2.915,0.881-3.565,2.265l-7.623,16.238L3.347,21.096c-1.458,0.223-2.669,1.242-3.138,2.642 c-0.469,1.4-0.115,2.942,0.916,4l12.392,12.707l-2.935,17.977c-0.242,1.488,0.389,2.984,1.62,3.854 c1.23,0.87,2.854,0.958,4.177,0.228l15.126-8.365l15.126,8.365c0.597,0.33,1.254,0.492,1.908,0.492c0.796,0,1.592-0.242,2.269-0.72 c1.231-0.869,1.861-2.365,1.619-3.854l-2.935-17.977l12.393-12.707C62.914,26.68,63.268,25.138,62.799,23.737z"></path> 
  </g>
  <mask id="star_mask">
    <rect width="100%" height="100%" fill="black"/>
    <path fill="white" d="M62.799,23.737c-0.47-1.399-1.681-2.419-3.139-2.642l-16.969-2.593L35.069,2.265 C34.419,0.881,33.03,0,31.504,0c-1.527,0-2.915,0.881-3.565,2.265l-7.623,16.238L3.347,21.096c-1.458,0.223-2.669,1.242-3.138,2.642 c-0.469,1.4-0.115,2.942,0.916,4l12.392,12.707l-2.935,17.977c-0.242,1.488,0.389,2.984,1.62,3.854 c1.23,0.87,2.854,0.958,4.177,0.228l15.126-8.365l15.126,8.365c0.597,0.33,1.254,0.492,1.908,0.492c0.796,0,1.592-0.242,2.269-0.72 c1.231-0.869,1.861-2.365,1.619-3.854l-2.935-17.977l12.393-12.707C62.914,26.68,63.268,25.138,62.799,23.737z"></path> 
  </mask>
  <rect width="100%" height="60%" y="40%" fill="#f5cd00" mask="url(#star_mask)"/>
</svg>