SVG 란 무엇입니까?

Scalable Vector Graphics( SVG )은 2차원 기반 벡터 그래픽을 설명하기 위한 XML 기반 마크업 언어입니다. JPEG 또는 PNG , SVG 과 같은 고전적인 비트맵 이미지 형식과 비교하여 벡터 이미지는 품질 손실 없이 어떤 크기로도 렌더링할 수 있으며 그래픽 편집기 없이도 내부의 텍스트를 업데이트하여 쉽게 현지화할 수 있습니다.
SVG은 CSS(슬라이드)으로 스타일을 지정하고 애니메이션할 수 있습니다. 기본적으로 HTML 요소에 적용할 수 있는 변환 또는 전환 애니메이션은 SVG 요소에도 적용할 수 있습니다.

데모

시작하기

SVG을 HTML 코드에 직접 붙여넣습니다.

<!-- 
Tick SVG
-->
<svg class="tick-svg" xmlns="http://www.w3.org/2000/svg" width="367.805" height="367.805" viewBox="0 0 367.805 367.805">
  <g transform="translate(0 0)">
    <path class="container" data-name="Path 1" d="M183.9,0A183.9,183.9,0,1,1,0,183.9H0A183.379,183.379,0,0,1,182.856,0Q183.38,0,183.9,0Z" />
    <path class="tick" data-name="Path 2" d="M285.78,133.225,155.168,263.837l-73.143-72.62,29.78-29.257L155.168,204.8,256,103.968Z" />
  </g>
</svg>

<!-- 
Particles SVG
-->
<svg class="particles-svg" xmlns="http://www.w3.org/2000/svg" width="758" height="758" viewBox="0 0 758 758">
  <g transform="translate(195.501 195)">
    <g transform="translate(716.499 -482.5) rotate(90)">
      <rect data-name="particle 4" width="27" height="110" rx="13.5" transform="translate(388.961 274.552) rotate(-45)" class="particle" />
      <rect data-name="particle 3" width="27" height="110" rx="13.5" transform="translate(847.166 732.758) rotate(-45)" class="particle" />
      <rect data-name="particle 2" width="27" height="110" rx="13.5" transform="translate(408.052 810.539) rotate(-135)" class="particle" />
      <rect data-name="particle 1" width="27" height="110" rx="13.5" transform="translate(866.258 352.334) rotate(-135)" class="particle" />
      <rect data-name="particle 4" width="27" height="110" rx="13.5" transform="translate(653 154)" class="particle" />
      <rect data-name="particle 3" width="27" height="110" rx="13.5" transform="translate(653 802)" class="particle" />
      <rect data-name="particle 2" width="27" height="110" rx="13.5" transform="translate(287.5 546.5) rotate(-90)" class="particle" />
      <rect data-name="particle 1" width="27" height="110" rx="13.5" transform="translate(935.5 546.5) rotate(-90)" class="particle" />
    </g>
  </g>
</svg>

SVG 애니메이션

SVG 선택기를 사용하고 필요한 속성을 추가하여 CSS 을 애니메이션할 수 있습니다. 유념해야 할 한 가지 중요한 사항은 변환 원점(대부분의 경우 중앙으로)을 재설정하는 것입니다. 기본값은 왼쪽 상단인 0 0 입니다.

.svg-part-selector {
  transform-origin: center; /* or any other value */
}

먼저 키프레임 애니메이션을 추가합니다.

@keyframes zoom {
  0%,
  5% {
    transform: scale(0);
  }
  20%,
  80% {
    transform: scale(1);
  }
  95%,
  100% {
    transform: scale(0);
  }
}

@keyframes spin-zoom {
  0%,
  20% {
    transform: scale(0) rotateZ(0deg);
  }
  40%,
  60% {
    transform: scale(1) rotateZ(360deg);
  }
  80%,
  100% {
    transform: scale(0) rotateZ(0deg);
  }
}

@keyframes burst {
  0%,
  20% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    transform: scale(1);
    opacity: 0;
  }
  80%,
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

틱 애니메이션 및 스타일링

.tick-svg {
  width: 100px;
  height: 100px;
}

.container {
  fill: #3bb54a;
  transform-origin: center;
  animation: zoom 2s ease-in-out 0s infinite forwards;
}

.tick {
  fill: #ffffff;
  transform-origin: center;
  animation: spin-zoom 2s ease 0s infinite forwards;
}

파티클 애니메이션 및 스타일링

.particles-svg {
  width: 180px;
  height: 180px;
  position: absolute;
  z-index: -1;
  animation: burst 2s ease 0s infinite forwards;
}

.particle {
  fill: #fe0;
}

참조

CSS 트릭

A Guide to SVG Animations

MDN 웹 문서

SVG

유튜브

읽어 주셔서 감사합니다

저에게 연락하십시오:

Portfolio

GitHub