svg 색상 변경

svg 파일에 들어가면 이미지가 svg 태그랑 path 태그로 이루어져 있다.

svg 에서 변경 방법

svg에 직접 색상을 바꾸고 싶으면 path태그에 style="fill: 색상 값;" 또는 fill="색상 값” 이렇게 넣어주면 된다.

 

style

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<path style="fill:rgb(44, 130, 242);"  d="...."/>
</svg>

 

fill

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<path fill="yellow”  d="...."/>
</svg>

 

 

css 에서 변경 방법

css 로 색상을 바꾸고 싶으면 filter로 값을 주면 된다.

아래 링크를 통해 쉽게 원하는 색상에 대한 값을 구 할 수 있다.

CSS filter generator to convert from black to target hex color

 

<div class="grade">
  <img src="/public/image/star-solid.svg" alt="star" />
</div>

 

.grade {
        filter: invert(70%) sepia(98%) saturate(975%) hue-rotate(351deg)
        brightness(101%) contrast(101%);
}