🙄 SVG란?
SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다.
SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고
백터 이미지를 표현하기 위한 포맷으로 w3c에서 만든 이미지 표준 값이다.
SVG는 벡터 기반의 그래픽을 XML 형식으로 정의해서 사용할 수 있다
SVG를 사용하는 이유는?
png, jpg와 같은 픽셀 이미지와 다르게 SVG를 사용하는 이유는 무엇일까?
- SVG 이미지는 확대 축소 시에도 고품질의 이미지를 제공하며
- 파일 형태로 했을 때 용량이 적어 로딩 시간이 줄어들며
- css를 통해 다양한 효과를 줄 수 있음
단점의 경우 SVG의 경우 IE 하위 버전에서 지원이 되지 않으며,
단순한 내용이 아닌 복잡한 SVG를 구현하게 된다면, 오히려 속도가 느려질 수 있는 위험이 있다.
하지만, 내가 SVG를 사용해야겠다고 생각하게 된 것은
이미 많은 사람들이 SVG를 활용하여 다양한 효과를 가지는 웹페이지를 만들어내고 있기 때문이다.
역동적인 웹 페이지를 구성하길 원하거나, 고화질의 이미지를 제공하고 싶다면
SVG에 대해 관심을 가질 필요가 있다.
😁 SVG를 사용해보자
SVG 호출하기
html 태그 중 <svg> 태그를 사용하면 svg파일을 불러올 수 있는 준비가 된다.
svg를 사용할 크기는 width와 height 속성으로 지정할 수 있다.
그다음 viewBox속성을 이용하면 svg 요소의 기준점과 배율을 정할 수 있다.
viewBox는 총 4개의 숫자를 가지고 있다.
viewBox = min-x, min-y, width, height
밑의 코드로 width 525px, height 160px 구역으로 만든 뒤
viewBox속성으로 X축 0에서 525px, y축 0에서부터 높이가 160인 viewBox를 설정해줍니다.
즉 1 배율의 svg 요소를 보여줄 SVG구역이 만들어진 것이다.
<svg width=525 height=160 viewBox="0 0 525 160">
</svg>
SVG에 TEXT 그려주기
<svg> 내부에 <text> 속성을 이용하면 SVG 안에 TEXT를 써넣을 수 있다.
<text>가 SVG 어느 좌표에 있을지를 작성해 줘야 한다.
X좌표는 0 높이는 가운데 정렬을 위해 y좌표 50%를 지정해준다.
CSS 코드
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
body {
width: 100%;
height: 100%;
background: #16345A;
padding: 0;
margin: 0;
}
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
}HTML 코드
<svg width=525 height=160 viewBox="0 0 525 160">
<text>ORDINARY CODE</text>
</svg>결과 화면
기존 Text로 작성한 것과 화면상에서는 동일하다.
하지만 이제 SVG에서 제공하는 효과, Animation 효과를 활용해보자.
SVG에 TEXT에 효과 넣어주기
fill
text 컬러 넣기 위해서 사용하는 속성은 fill이다.
SVG에서 색상을 추가하기 위해서는 기존 font에서 color 속성이 아닌 fill을 이용해야
SVG text에 컬러를 넣는 게 가능하다.
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
fill:#F1C164;
}
stroke
svg에서 text에 외곽선을 그리기 위한 속성은 stroke를 이용하면 된다.
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
stroke:#F1C164;
}
stroke-width
svg 내 stroke에서는 여러 가지 효과를 주는 게 가능하다.
stroke-width의 경우 외곽선의 두께를 조절할 수 있다.
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
stroke:#F1C164;
stroke-width: 3px;
}
stroke-dasharray
skroke-dasharray를 이용하면 그려진 외곽선의 점선 두께와 두께 사이의 간격을 지정할 수 있다.
하나의 숫자를 지정하면 해당 픽셀의 선과 해당 픽셀만큼 간격이 띄워진다.
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
stroke:#F1C164;
stroke-width: 3px;
stroke-dasharray: 5px;
}
stroke-dasharray에서 2가지 숫자를 지정하면
첫 번째 숫자로 외곽선의 길이를 정할 수 있고 두 번째 숫자로 다음 외곽선 사이의 간격을 설정할 수 있다.
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
stroke:#F1C164;
stroke-width: 3px;
stroke-dasharray: 5px 20px;
}
stroke-dashoffset
stroke-dashoffset을 이용하면 점선의 시작 간격을 지정할 수 있다.
각각 dashoffset 숫자 설정에 따라 dash 외곽선이 다른 위치에서 지정되는 것을 볼 수 있다.
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
stroke:#F1C164;
stroke-width: 3px;
stroke-dasharray: 60px;
stroke-dashoffset: 0;
}
💡 svg stroke기능을 이용해 tex가 그려지는 효과 만들기
text가 그려지는 효과를 하기 위해서
stroke-dasharray와 sotroke-dashoffset기능을 활용해서 만들 수 있다.
방법은 text 내 stroke-dasharray 길이를 text 전체를 감싸는 길이를 지정한 뒤,
storke-dashoffset을 dasharray와 같은 숫자로 지정하여 처음에 아무런 선이 보이 않도록 한다.
그다음 animation 효과를 주어 stroke-dashoffset를 0으로 만들어 모든 선이 표시되도록 만드는 원리이다.
css 코드
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
stroke:#F1C164;
stroke-width: 3px;
stroke-dasharray: 326px;
animation: stroke 3s linear;
}
@keyframes stroke {
0% {
stroke-dashoffset: 326px;
}
100% {
stroke-dashoffset: 0px;
}
}결과 화면
응용하기
위의 코드의 경우 모든 글자가 한 번에 작성되고, 검은 글씨가 보이는 상태이다.
이제 아무것도 그려지지 않은 화면에
한 글자 씩 작성되는 코드로 활용해서 바꿔보겠다.
최종 코드
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
body {
width: 100%;
height: 100%;
background: #16345A;
padding: 0;
margin: 0;
}
.text-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg text {
font-family: 'Staatliches', cursive;
font-size: 6em;
fill:transparent;
stroke-dasharray: 326px;
animation: stroke 1s linear;
animation-fill-mode: forwards;
}
svg text:nth-child(1) {
animation-delay: 0s;
}
svg text:nth-child(2) {
animation-delay: 0.5s;
}
svg text:nth-child(3) {
animation-delay: 1s;
}
svg text:nth-child(4) {
animation-delay: 1.5s;
}
svg text:nth-child(5) {
animation-delay: 2s;
}
svg text:nth-child(6) {
animation-delay: 2.5s;
}
svg text:nth-child(7) {
animation-delay: 3s;
}
svg text:nth-child(8) {
animation-delay: 3.5s;
}
svg text:nth-child(9) {
animation-delay: 4s;
}
svg text:nth-child(10) {
animation-delay: 4.5s;
}
svg text:nth-child(11) {
animation-delay: 5s;
}
svg text:nth-child(12) {
animation-delay: 5.5s;
}
@keyframes stroke {
0% {
stroke:#F1C164;
stroke-width: 3px;
stroke-dashoffset: 326px;
}
70% {
fill: transparent;
}
98% {
stroke:#F1C164;
stroke-width: 3px;
}
100% {
fill: #F1C164;
stroke-dashoffset: 0px;
}
}
</style>
</head>
<body>
<div class="text-box">
<div class="text-wrap">
<svg width=525 height=160 viewBox="0 0 525 160">
<text x="0" y="50%">O</text>
<text x="45" y="50%">R</text>
<text x="90" y="50%">D</text>
<text x="135" y="50%">I</text>
<text x="155" y="50%">N</text>
<text x="199" y="50%">A</text>
<text x="240" y="50%">R</text>
<text x="285" y="50%">Y</text>
<text x="350" y="50%">C</text>
<text x="395" y="50%">O</text>
<text x="440" y="50%">D</text>
<text x="485" y="50%">E</text>
</svg>
</div>
</div>
</body>
</html>
최종 화면
'FrontEnd > css' 카테고리의 다른 글
| css로 만드는 체크박스 ON/OFF 스위치 버튼 디자인 예제(라이트모드/다크모드) (2) | 2021.03.04 |
|---|---|
| [css/svg] css와 svg, ::after&::before를 활용한 버튼 hover효과를 만들기 (0) | 2021.01.06 |
| [css] css를 이용해서 텍스트를 디자인 해보자(웹 폰트 사용, 폰트 꾸미기,text-shadow, text-decoration) (0) | 2020.12.29 |
| [css/layout] css layout 방법 - 2️⃣ grid (0) | 2020.12.18 |
| [css/layout] CSS Layout 방법 - 1️⃣ flexbox (0) | 2020.12.12 |