웹에서 SVG 포멧 사용하기

애니메이션 Big Hero 6 로고에 쓰인 서체에 영감을 받아 직접 레터링을 해보았습니다.

레터링이라 하기 우스운 수준이지만… (직접 그려 스켄 떠서 작업하다가 잘 안돼서 베이스 폰트에 내가 구현하고자 하는 글꼴의 특징을 넣어 수정했기에)

어찌 됐든 완성된 문자로고를 PNG 파일로 사용하다가 SVG로 적용해 보기로 했습니다.

Adobe Illustrator에서의 SVG 포맷 저장은 정말 간단합니다.
다른 이름으로 저장에서 SVG 선택 후 지정하여 저장하기만 하면 되니까요.

하지만, 이렇게 해서 저장된 SVG 포맷은 찌꺼기가 있고
최적화가 되어 있질 않아서 별도의 작업을 해줘야 합니다.

SVG 최적화 방법은 다음 포스트에 잘 나와있습니다.
Useful SVGO[ptimization] Tools

저는 이 중에서 Drag’n’Drop GUI 프로그램을 이용하여 최적화 작업을 진행했습니다.

Illustrator에서 Artboard를 사용할 경우 Artboard 마다 따로 저장되긴 하지만
한 파일 안에 모든 Artboard가 들어가 있어서 직접 메모장을 열어서 해당 부분을 지워줘야 합니다.

따라서 SVG파일로 만들 때 Artboard를 사용한다면,
Artboard 대신 새로운 Ai 파일을 만들어 그곳에서 SVG로 저장하는 것이 좋을 것 같습니다.

PNG와 SVG의 용량차이가 보이시나요?

PNG로고와 SVG로고파일의 용량 차이가 심합니다.
대신, 그 만큼 직접 베터로 그려주는 것이기에 CPU 연산을 많이 잡아먹을 것 같습니다. (특히 모바일에서…)