SVG 애니메이션

SVG

• Scalable Vector Graphics의 약자로, 웹에서 벡터 그래픽을 그리기 위해 사용되는 XML 기반의 태그입니다. 
• HTML 안에서 사용될 수 있으며, 해상도에 상관없이 깨지지 않는 장점이 있어 아이콘, 로고, 차트, 도형 등을 표현할 때 유용합니다.
• svg를 이용할 때의 장점
  • 해상도에 독립적이다.
    • 픽셀로 그리는 게 아니라 수학적인 벡터 좌표로 그려져서 고해상도 디스플레이에서도 깨지지 않습니다.
    • 로고, 아이콘, 일러스트 등에 딱 좋아요.
  • CSS 및 JavaScript로 조작 가능
    • SVG 내부 요소는 DOM 요소처럼 접근 가능해서 스타일 변경, 애니메이션, 이벤트 처리 가능합니다.
  • 애니메이션 및 인터랙티브 요소 구현이 가능합니다.
    • <animate>, <animateTransform> 같은 SVG 자체 애니메이션 지원합니다.
    • JavaScript나 CSS와 결합하면 다이내믹한 UI 제작 가능합니다.
  • 검색 엔진 및 접근성 측면에서도 유리
    • 텍스트를 포함할 수 있어서 검색 가능하고, 스크린 리더로도 읽을 수 있습니다.
• svg를 이용할 때의 단점
  • 복잡한 이미지는 비효율적입니다.
    • 사진처럼 디테일이 많고 복잡한 이미지를 SVG로 표현하면 오히려 파일 크기가 커지고 성능이 떨어질 수 있습니다. 이런 경우는 png, webp, jpeg를 사용하는 것이 더 좋습니다.
  • 브라우저 렌더링 부담
    • SVG에 복잡한 필터나 많은 요소가 들어가면 브라우저 렌더링 성능 저하가 발생할 수 있습니다.
    • 특히, 모바일에서 부하가 클 수 있습니다.
  • 보안 이슈
    • SVG 내부에 JavaScript 삽입이 가능하기 때문에, 외부 SVG 파일을 직접 임포트 할 경우 XSS(크로스 사이트 스크립팅) 공격 가능성이 있습니다.
    • 안전한 콘텐츠만 삽입하거나 <img> 태그로만 표시하는 방식 추천합니다.

animate

• SVG 속성 값을 시간에 따라 변화시키는 태그
• 속성
  • attributeName : 애니메이션 할 속성 이름 (ex: fill, x, r)
  • from, to : 시작 값과 끝 값
  • dur : 애니메이션 지속 시간 (s, ms)
  • repeatCount : 반복 횟수 ("indefinite"는 무한 반복)
  • begin : 언제 애니메이션 시작할지 ("0s", "click", "mouseover" 등)

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

animateTransform

• transform 속성(회전, 이동, 확대 등)에 애니메이션 적용
• 속성
  • attributeName="transform" 고정
  • type: 어떤 종류의 변형? (translate, rotate, scale, skewX, skewY)
  • from, to: 변형 시작값과 끝값
  • dur : 애니메이션 지속 시간 (s, ms)
  • repeatCount : 반복 횟수 ("indefinite"는 무한 반복)
  • begin : 언제 애니메이션 시작할지 ("0s", "click", "mouseover" 등)

animateMotion

• 경로(path)를 따라 요소를 움직이게 함
• 속성
  • path: 이동 경로 지정 (M, L, C 등의 path 명령어 사용) 또는 mpath으로 참조 가능
  • dur: 시간
  • repeatCount: 반복 여부
  • rotate="auto": 경로의 방향에 따라 자동 회전

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
   	id="path1"
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite">
     <mpath href="#path1" />  
  	</animateMotion>
  </circle>
</svg>

샘플 예제

  <svg width="360" viewBox="0 0 240 240">
      <defs>
        <path
          id="path1"
          d="M180.3,103.7C193.9,145.6,69.7,179.9,60,137C46.3,95.1,170.5,60.7,180.3,103.7z"
        />
        <path
          id="path2"
          d="M113.5,89.1c79.8-2.3,101.5,66.1,14.4,66.8C48.1,158.4,26.4,90,113.5,89.1z"
        />
        <path
          id="path3"
          d="M169.1,123.5c-11.9,44-126.5,79.8-98.2-6.9C82.8,72.6,197.4,36.8,169.1,123.5z"
        />
        <path
          id="path4"
          d="M59.8,136.3C46.2,94.4,170.4,60.1,180.1,103C193.8,144.9,69.6,179.3,59.8,136.3z"
        />
        <path
          id="path5"
          d="M126.6,150.9c-79.8,2.3-101.5-66.1-14.4-66.8C192,81.6,213.7,150,126.6,150.9z"
        />
        <path
          id="path6"
          d="M71,116.5c11.9-44,126.5-79.8,98.2,6.9C157.3,167.4,42.7,203.2,71,116.5z"
        />
      </defs>
      <path
        fill="none"
        stroke="#7d93b1"
        stroke-width="5"
        d="M160,120c0,22.1-17.9,40-40,40s-40-17.9-40-40"
      />
      <g fill="#7d93b1">
        <circle r="9">
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path1" />
          </animateMotion>
        </circle>
        <circle r="8">
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path2" />
          </animateMotion>
        </circle>
        <circle r="5">
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path3" />
          </animateMotion>
        </circle>
        <circle r="9">
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path4" />
          </animateMotion>
        </circle>
        <circle r="7">
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path5" />
          </animateMotion>
        </circle>
        <circle r="6">
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path6" />
          </animateMotion>
        </circle>
      </g>
      <path
        fill="#fff"
        stroke="#7d93b1"
        stroke-width="5"
        d="M80,120c0-22.1,17.9-40,40-40s40,17.9,40,40"
      />
    </svg>