SVG
는 Scalable Vector Ghrapics
의 약자로, 웹 친화적인 Vector 파일 형식이다. 픽셀을 기반으로 하는 래스터 파일(JPEG, PNG 등···)과 달리, 벡터 파일은 점과 점 사이의 수학 방정식에 기반해 이미지를 저장한다.
SVG
는 용량이 작고, 파일의 크기에 관계없이 높은 해상도를 유지할 수 있다. 또한, XML 코드로 작성되므로 텍스트 정보를 모양이 아닌 텍스트로 저장한다. 이는 검색엔진이 SVG
그래픽을 키워드로 읽어낼 수 있도록 하기 때문에 웹 사이트의 검색 순위를 높이는데 큰 도움이 된다.
다만, 세밀한 표현이 필요하거나, 사실감 있는 그림 등을 다루는 복잡한 작업에는 적합하지 않기 때문에 아이콘이나 로고 등을 만드는 데에 주로 사용된다.
SVG
는 애니메이션을 지원하기 때문에 더욱 역동적인 웹 페이지를 구성할 때에도 자주 활용된다. 오늘은 이 애니메이션 효과를 활용하여 텍스트가 그려지는 효과를 구현해보고자 한다.
HTML 태그 중 <svg>
를 호출하면 SVG 그래픽을 담을 수 있는 공간이 마련된다. width
와 height
속성을 활용하여 해당 공간의 크기를 지정할 수 있고, viewBox
속성을 활용해서 svg
요소의 기준점과 배율을 지정할 수 있다.
앞서 말했듯, viewBox
속성은 svg
요소의 기준점과 배율을 지정하는 속성으로, 화면의 크기가 달라졌을 때 자동으로 svg
요소의 크기를 조절한다. 만약 viewBox
를 사용하지 않는다면, 화면의 크기가 달라졌을 때 svg
요소의 크기가 고정이 되므로, 반응형 웹을 설계하고자 한다면 viewBox
는 필수적으로 사용되어야 할 속성이다.
viewBox
속성의 값은 총 4가지로, min-x
, min-y
, width
, height
순이다.
min-x
, min-y
는 svg
요소를 보여줄 구역의 왼쪽 상단 꼭지점을 가리키고, width
, height
는 말 그대로 해당 구역의 크기를 의미한다.
<svg viewBox="0 0 550 160"></svg>
따라서, 위의 코드는 svg
구역이 (0, 0)
에서 시작하고, 너비가 550px
, 높이가 160px
임을 뜻한다.
SVG
에는 <rect>
, <circle>
, <line>
등과 같이 모양을 표현하기 위해 기본적으로 제공되는 몇 가지 요소가 존재한다. 해당 포스팅에서는 텍스트를 표현하기 때문에 <text>
요소를 사용할 것이다.
<svg viewBox="0 0 550 160">
<text>HI, I'M SEONGMIN</text>
</svg>
text
태그에 사용할 수 있는 몇가지 속성을 알아보도록 하자.
먼저 텍스트의 색상과 테두리 색상을 설정할 때는 color
속성 대신 fill
과 stroke
속성을 사용하고, 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
외곽선이 시작되는 위치가 결정된다.
keyframes
와 stroke-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
svg 태그에 대해서 처음 알았네요.. 도움되는 글 감사합니다^^