SVG 다루기(색상변경, 크기조정, keyframe 애니메이션)

📚 Today I Learned

svg 이미지 다루기

• 색상변경
• 크기조정
• keyframe 애니메이션

🎨색상변경

1. style or fill 속성 사용

<div class="red">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path fill="red" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"/>
    </svg>
  </div>

<path> 태그에 style="fill:___" 속성을 사용하거나, 더 간단하게 fill="___" 속성을 사용하여 svg 이미지의 색상을 제어할 수 있다. 색상은 rgb형태, hex 값, 또는 색상의 이름을 직접 정의할 수도 있다.

style="fill:rgb(42,169,224)"
fill="#689edf"
fill="green"

 

2. css로 변경하기

html

<div class="img-box">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path class="green" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"/>
    </svg>
  </div>

css

.img-box .green {
  fill: green;
}

<path>에 class를 주고 css로 색상을 변경할 수 있다.

 

📏크기조정

<div class="size-up">
    <svg class="orange" width="100" height="100" viewBox="0 0 24 24">
      <path fill="orange" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"/>
    </svg>
  </div>

svg 태그 내부에 width와 height 속성을 명시하면 쉽게 크기를 조정할 수 있다.
단, svg의 크기를 조정할때는 width와 height뿐 아니라 viewbox 속성도 주의해야 한다.

viewbox

<svg class="orange" width="100" height="100" viewBox="0 0 24 24"

viewbox는 svg 내부 요소의 좌표 영역과 비율, 뷰포트 내에서 이미지를 보여줄 위치를 설정하는 속성이고, min-x , min-y , width , height를 순서대로 받는다.

• min-x , min-y : 왼쪽 위를 기준점으로 하는 뷰박스의 좌표
• width , height : 뷰박스의 가로세로 크기

해당 svg의 크기(viewport)와 viewbox가 동일하다면 원래 크기와 동일한 요소가 보인다.
반면 viewport가 viewbox보다 작다면(viewport < viewbox) 축소되어 보이고,
viewport가 viewbox보다 크다면(viewport > viewbox) 확대되어 보인다.

 

🎬keyframe 애니메이션

html

<div class="stars">
    <svg width="75" height="72" viewBox="0 0 75 72" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22 3.23607L25.9883 15.5106L26.2128 16.2016H26.9393H39.8456L29.4042 23.7877L28.8164 24.2148L29.0409 24.9058L33.0292 37.1803L22.5878 29.5942L22 29.1672L21.4122 29.5942L10.9708 37.1803L14.9591 24.9058L15.1836 24.2148L14.5958 23.7877L4.15444 16.2016H17.0607H17.7872L18.0117 15.5106L22 3.23607Z" stroke="black" stroke-width="2"/>
        <path d="M58.3214 25.4489L56.8777 34.2414L56.76 34.9584L57.4055 35.2919L65.3216 39.3819L56.5133 40.726L55.795 40.8356L55.6773 41.5525L54.2337 50.345L50.2335 42.3832L49.9073 41.734L49.1891 41.8436L40.3808 43.1876L46.7168 36.9229L47.2335 36.412L46.9073 35.7628L42.9071 27.801L50.8232 31.891L51.4687 32.2245L51.9853 31.7137L58.3214 25.4489Z" stroke="black" stroke-width="2"/>
        <path d="M27.5897 50.2071L30.456 54.3513L30.8693 54.9488L31.5653 54.7404L36.3924 53.295L33.3368 57.3017L32.8962 57.8794L33.3095 58.4769L36.1758 62.6211L31.421 60.9532L30.7355 60.7127L30.2949 61.2904L27.2393 65.297L27.3563 60.2595L27.3731 59.5332L26.6875 59.2927L21.9327 57.6247L26.7598 56.1793L27.4559 55.9709L27.4727 55.2446L27.5897 50.2071Z" stroke="black" stroke-width="2"/>
    </svg>
  </div>

css

.stars path {
            stroke-dasharray: 136;
            stroke-dashoffset: 0;
            animation: pathAni 5s linear infinite;
        }

        @keyframes pathAni {
            0% {
                stroke-dashoffset: 136;
            }
            50% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -136;
            }
        }

1. stroke-dasharray로 svg에 간격 주기

stroke-dasharray는 선을 대쉬 형태로 만든다.

path의 길이가 100이고 dasharray가 50이라면 이 그림은 절반만 보이게 된다. 따라서 svg를 모두 보이게 하기 위해 dasharray를 path의 전체 길이와 같은 값을 준다.
같은 값을 구하는 방법은 다음과 같다.

<script type="text/javascript">
  	path = document.querySelector('path').getTotalLength();
	console.log(path);
	//172.18614196777344
</script>

2. stroke-dashoffset으로 svg를 나타낼 지점 정하기

stroke-dashoffset은 이 svg가 어느 지점에서부터 시작할지 정해주는 속성이다.

dashoffset이 50일때

dashoffset이 90일때

3. 애니메이션 넣기

@keyframes pathAni {
            0% {
                stroke-dashoffset: 136; 
                /* 136지점부터 보여줌 (안보임) */
            }
            50% {
                stroke-dashoffset: 0;
                /* 0부터 보여줌 (모두 보임) */
            }
            100% {
                stroke-dashoffset: -136;
                /* -136부터 보여줌 (반대로 그려짐) */
            }
        }

 

---

📝
svg를 예전에 공부했을때는 꽤 어려웠었는데 지금은 그때 느꼈던 것만큼 아주 어렵지는 않은 것 같다. 그래도 이렇게 배운 부분을 잘 정리해두니 조금 더 이해가 잘 되는 것 같다.