[SVG] svg 백그라운드로 사용하기

 

 

 

 

1. SVG 아이콘을 저장한다.

 

https://heroicons.com/

Heroicons

 

 

2. SVG를 압축한다. (좌측 Paste markup에 붙여넣는다.)

 

https://jakearchibald.github.io/svgomg/

SVGOMG - SVGO's Missing GUI

 

 

3. 백그라운드 이미지로 사용하려면 Data URI로 변경해야 한다.

 

https://yoksel.github.io/url-encoder/

URL-encoder for SVG

 

 

 

4. 색상 변경하기

 

 

위 코드에서 fill이 색상, stroke가 선 색상이다. 

 

퍼센트 인코딩(URL에 문자를 표현하는 문자 인코딩 방법. 해시 마크(#)는 URI fragment 식별자와 혼동될 수 있기 때문에 바꿔주는 것이 좋다.)으로 인해  # 대신 %23으로  써져 있다. %23 뒤로는 색상표랑 똑같기 때문에 바꿔주면 된다.

 

 

 

 

5. 외부에서 색상 변경하기

 

외부에서 svg background fill값을 변경하려면 filter를 쓴다.

아래는 filter: brightness(0) 을 써서 검정색으로 변경한것이다.

 

 

 

 

 

 

---

참고 : https://nykim.work/95

SVG 아이콘 백그라운드 이미지로 활용하기

 

https://css-tricks.com/almanac/properties/f/filter/

filter