SVG
-
[react][typeScript][styled-component] hover시 svg 이미지 색깔 바꾸기프론트엔드 개발자가 될거야./css 라이브러리 2023. 2. 8. 15:32
이미지는 png, jpg, svg 등 여러 확장자를 가진다. 나는 그동안 png를 많이 썼는데 header의 icon 이미지를 hover 했을 때 hover 이벤트로 색상을 변경해 주어야 할 때 png를 쓰면 color를 변경할 수 없어서 이미지를 바꿔줘야하는데 이 방법은 매우 비효율적이라는 생각이 들었다. 예를들어 이런 상황이다. 바이낸스의 헤더 그래서 header의 이미지 중 hover 이벤트로 색상을 변경해주어야 하는 이미지는 svg로 바꾸어 주었다. SVG ? svg 파일은 픽셀로 이루어진 png 파일과는 다르게 라인과 곡선들로 이루어져 있다. 이런 점에서 파일을 확대하거나 줄였을때 이미지가 깨지지 않고 그대로 선명함을 유지한다. svg 파일은 값을 조작 할 수 있기 때문에 js를 이용해서 svg..