[HTML/CSS] SVG를 활용한 텍스트 애니메이션

seongminn·2022년 6월 8일
1

HTML/CSS

목록 보기
1/1
post-thumbnail

📌 SVG

SVGScalable Vector Ghrapics의 약자로, 웹 친화적인 Vector 파일 형식이다. 픽셀을 기반으로 하는 래스터 파일(JPEG, PNG 등···)과 달리, 벡터 파일은 점과 점 사이의 수학 방정식에 기반해 이미지를 저장한다.

SVG용량이 작고, 파일의 크기에 관계없이 높은 해상도를 유지할 수 있다. 또한, XML 코드로 작성되므로 텍스트 정보를 모양이 아닌 텍스트로 저장한다. 이는 검색엔진이 SVG 그래픽을 키워드로 읽어낼 수 있도록 하기 때문에 웹 사이트의 검색 순위를 높이는데 큰 도움이 된다.

다만, 세밀한 표현이 필요하거나, 사실감 있는 그림 등을 다루는 복잡한 작업에는 적합하지 않기 때문에 아이콘이나 로고 등을 만드는 데에 주로 사용된다.

SVG는 애니메이션을 지원하기 때문에 더욱 역동적인 웹 페이지를 구성할 때에도 자주 활용된다. 오늘은 이 애니메이션 효과를 활용하여 텍스트가 그려지는 효과를 구현해보고자 한다.

SVG Tag

HTML 태그 중 <svg>를 호출하면 SVG 그래픽을 담을 수 있는 공간이 마련된다. widthheight 속성을 활용하여 해당 공간의 크기를 지정할 수 있고, viewBox 속성을 활용해서 svg 요소의 기준점과 배율을 지정할 수 있다.

viewBox

앞서 말했듯, viewBox 속성은 svg 요소의 기준점과 배율을 지정하는 속성으로, 화면의 크기가 달라졌을 때 자동으로 svg 요소의 크기를 조절한다. 만약 viewBox를 사용하지 않는다면, 화면의 크기가 달라졌을 때 svg 요소의 크기가 고정이 되므로, 반응형 웹을 설계하고자 한다면 viewBox는 필수적으로 사용되어야 할 속성이다.

viewBox 속성의 값은 총 4가지로, min-x, min-y, width, height 순이다.
min-x, min-ysvg 요소를 보여줄 구역의 왼쪽 상단 꼭지점을 가리키고, width, height는 말 그대로 해당 구역의 크기를 의미한다.

<svg viewBox="0 0 550 160"></svg>

따라서, 위의 코드는 svg 구역이 (0, 0)에서 시작하고, 너비가 550px, 높이가 160px임을 뜻한다.

Text 그리기

SVG에는 <rect>, <circle>, <line> 등과 같이 모양을 표현하기 위해 기본적으로 제공되는 몇 가지 요소가 존재한다. 해당 포스팅에서는 텍스트를 표현하기 때문에 <text> 요소를 사용할 것이다.

<svg viewBox="0 0 550 160">
  <text>HI, I'M SEONGMIN</text>
</svg>

text 태그에 사용할 수 있는 몇가지 속성을 알아보도록 하자.

먼저 텍스트의 색상과 테두리 색상을 설정할 때는 color 속성 대신 fillstroke 속성을 사용하고, stroke-width를 활용하여 테두리의 굵기를 설정할 수 있다.

svg text {
  fill: black;
  stroke: #facab1;
  stroke-width: 1px;
}

stroke-dasharray는 테두리 점선의 간격을 조정할 수 있다.

svg text {
  fill: black;
  stroke-width: 1px;
  stroke: #facab1;
  stroke-dasharray: 1px;
}

이 때, stroke-dasharray 속성에 두 개의 값을 넣으면 점선과 여백의 길이를 각각 지정할 수 있다.

다음으로, stroke-offset 속성이 있다. 해당 속성에 지정되는 값에 따라 dash 외곽선이 시작되는 위치가 결정된다.

텍스트 애니메이션

keyframesstroke-offset, stroke-dasharray 속성을 활용한다.

먼저, 텍스트 전체를 감싸는 만큼의 값을 stroke-dasharray에 지정한다. 그리고 stroke-offset에도 같은 값을 지정하여 dash 외곽선이 보이지 않도록 해준다. 이후, keyframes 애니메이션을 활용하여 stroke-offset의 값을 0으로 만들면 시간이 지남에 따라 모든 선이 나타나는 결과를 얻을 수 있다.

svg text {
  font-family: "Staatliches", cursive;
  font-size: 4em;
  stroke-width: 1px;
  stroke: #10132c;
  stroke-dasharray: 326px;
  animation: stroke 3s linear;
}

@keyframes stroke {
  0% {
    stroke-dashoffset: 326px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

최종 결과

끝 !

--

참고 사이트

🙇🏻‍♂️ https://ordinary-code.tistory.com/25
🙇🏻‍♂️ https://www.adobe.com/kr/creativecloud/file-types/image/vector/svg-file.html

profile
돌멩이도 개발 할 수 있다

2개의 댓글

comment-user-thumbnail
2022년 6월 8일

svg 태그에 대해서 처음 알았네요.. 도움되는 글 감사합니다^^

1개의 답글