일러스트에서 svg를 html 형식으로 저장하기

일러스트에서 SVG을 출력시켜서 CSS 조작을 통한 에니메이션을 만들고 싶을때,

해당 SVG가 id와 class로 구조화 되어있으면 매우 편리하다.

감사하게도 일러스트에서는 그러한 저장 옵션을 지원해주고 있다.

https://codingwithspike.wordpress.com/2016/05/01/css-styling-illustrator-svgs/

위의 링크에서 id와 class를 일러스트에서 설정하고 출력하는 방법이 자세히 소개되어 있다.

주의할 점은 class의 이름은 우리가 직접 설정할 수 없다고 한다.

(아마 버전업이나 업데이트 되면서 바뀐듯 하다.)

나는 출력할때 형식은 아래와 같이 하였다.

그리고 그것의 코드를 복붙하여 CSS 와 SVG 태그의 영역만 나누어 사용해 주고 나머지는 CSS로 조작하는 방법을 택했다.

이외에도 SVG를 컨트롤 하는 라이브러리도 많지만 라이브러리를 많이 쓰는것을 별로 지양하지 않아 그냥 CSS를 통한 애니메이션 처리를 하면 될거 같다.