아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

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

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

2021. 11. 18. 14:19

 

 

 

 

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

 

https://heroicons.com/

 

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

heroicons.com

 

 

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

 

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

 

SVGOMG - SVGO's Missing GUI

 

jakearchibald.github.io

 

 

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

 

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

 

URL-encoder for SVG

 

yoksel.github.io

 

 

 

4. 색상 변경하기

 

 

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

 

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

 

 

 

 

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

 

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

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

 

 

 

 

 

 


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

 

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

프롤로그 시안 상에 얼핏 보기에는 비슷한 꺽쇄 아이콘이 여러 개가 있습니다. 하지만 자세히 살펴보면... 서로 색도 미묘하게 다르고 크기도 달라요..!! 이걸 표현하려면 총 세 개의 이미지가 필

nykim.work

 

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

 

filter

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur…

css-tricks.com

 

728x90
저작자표시 비영리 (새창열림)

'Web > Styles' 카테고리의 다른 글

[scss] BEM 방식으로 깊은 중첩 하기  (0) 2023.01.18
[CSS 방법론] BEM 방식  (0) 2022.11.28
[CSS] 배경 필터 backdrop-filter  (0) 2021.09.27
[CSS] !important를 대체할 :all  (0) 2021.05.31
[CSS] 국가별 기본 웹폰트  (0) 2021.04.29

티스토리툴바