CSS 로 SVG 애니메이션 만들기(1)

개념

SVG 란 'Scalable Vector Graphic' 의 약자로 확장 가능한 이미지 형식을 말한다. SVG는 픽셀로 이루어진 것이 아니라, 수학적으로 점을 그리고 연결해 이미지를 표현한 확장 가능한 이미지 형식이다. 확장 가능하다는 것은 이미지를 확대 및 축소하더라도 그림의 선명도가 유지되고 파일의 크기가 변하지 않는다는 것이다. 따라서 SVG 그림은 다양한 크기에서 고품질의 이미지를 제공할 수 있다는 장점이 있다.

 

픽셀로 만든 이미지 형식을 '래스터; Raster 혹은 비트맵; Bitmap 이미지' 라 하며 JPEG, PNG, BMP 등의 형식이 있다. 래스터 방식은 이미지를 작은 사각형인 픽셀로 구성하여 표현하는 방식이다. 각 픽셀은 색상과 밝기 정보를 가지고 있으며, 이 픽셀들이 모여 이미지를 형성한다.

 

SVG는 벡터이미지의 한 종류로 벡터이미지를 마크업 랭귀지로 구현한 것이다. HTML과 동일한 형식의 랭귀지로 디자이너와 개발자 모두에게 공통적으로 사용되는 형식이다.

 

[ Simplified SVG Markup ]

<svg viewBox="0 0 50 50" width="100" height="50" class="demo">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

 

SVG 는 HTML과 마찬가지로 DOM 을 가지고 있다. 이 특성으로 SVG 요소(elements)를 CSS로 스타일링과 이동 및 변형을 할 수 있다. 이것을 애니메이션이라고 하고, 그 애니메이션 만들기를 배워본다.

 

SVG 이미지 가져오기

이미지 만들기는 다른 챕터에서 다루기로 하고, 만들어진 SVG 이미지를 가져오는 것을 시작으로 하자. 참고로 이미지 제작 소프트웨어를 그래픽 에디터라 하며, 우리는 무료인 Inkscape 와 Figma Graphic Editor 를 사용한다. *Adobe는 풀스택 개발자가 사용하기엔 너무 비싸다.

 

SVG 무료 이미지를 제공하는 사이트는 주로 Freepik, unDraw, heroicons 를 사용한다.

하기 내용은 유튜브 "How to animate SVG with CSS - Live Blogger - 내용을 참조한다.

 

SVG 이미지 찾기 및 다운로드

https://undraw.co/search 사이트에서 'soccer' 로 'junior scccer' 이미지를 찾아 다운로드 한다.

 

https://undraw.co/search

 

다운로드 SVG 이미지 코드 확인하기

다운로드 받은 이미지를 크롬 브라우저에서 열고, 개발자 도구의 'Elements' 탭에서 이미지의 마크업 코드를 볼 수 있다.

이 상태로는 각 요소의 구별이 어렵워, 요소를 움직임 단위로 그룹짓고 이름 붙이는 작업(네이밍; Naming) 이 필요하다.

 

 

( 2부로 )

---

HTML과 CSS의 애니메이션

하기 작품은 순수히 HTML 태그와 CSS 만으로 만들어진 이미지이다. 매우 인상적이다. 이 작품을 보고 놀라운 경험과 감동을 받아 도전해 보고는 싶으나 Full Stack 개발의 범위가 너무 방대해져, 도전은 추후로 미룬다. 

 

Moustached Nanny by  Julia Miocene

 

by Julia Miocene