React 에서 사용하기위한 SVG, Illustractor 에서 올바르게 생성하기 : Compound path

위와 같이 일러스트레이터에서 만든 path 들의 모음이 있다.

이를 VSCode 로 복붙해보면..

이렇게 각각의 path 태그로 연결이 된다.

하지만 이렇게 path 값이 분리되어있으면 사용하기 불편하다.

path 안에 d 값을 하나의 변수로 저장해서 사용하는것이 용이하기때문이다. 따라서 이때는

일러스트레이서 Compound path 로 만들어줘야한다.

 

Compound path 를 만드는 방법은 전체 path 들을 선택후 단축키 Cmd + 8 이다.

이제 다시 VSCode 에서 복붙하면...

위와 같이 하나의 path 태그안에 d 속성값으로 들어가있는것을 볼수있다.

여기서 style 안에 0 0 512 512 값을 viewBox 로 사용하고

d 안에 값을 path 값으로 사용하면 된다.