Photoshop에서 SVG 내보내기를 할 때의 주의점

최근 Retina 디스플레이 대응 등을 목적으로 이미지, 아이콘, 제목 텍스트 등에 SVG를 사용하는 것이 증가하고 있습니다.
SVG를 작성할 때는 Illustrator를 사용하는 경우가 많습니다만, PSD로 작성된 디자인 캠프를 SVG 출력하고 싶은 경우도 있지요.
이번에는 Photoshop에서 PSD 파일을 조작하여 SVG 내보내기를 할 때 빠졌으므로 주의점을 공유합니다.

실례

Photoshop에서 이러한 제목을 SVG로 내보낼 때 ...

컬러 오버레이에 주의

문자색을 빨강에서 흰색으로 변경하려고, 「레이어 스타일」→「컬러 오버레이」기능으로 하얗게 채웠습니다.


그러면 스쿠쇼에서는 알기 어렵지만 미묘하게 원래의 붉은 색이 바깥쪽으로 튀어나오는 것처럼 보입니다.

내보내는 방법에 주의

게다가 보통 .jpg나 .png를 내보낼 때와 같이 "내보내기"→ "내보내기 형식"으로 저장하려고 하면 오른쪽 상단에 "글꼴이 예상대로 렌더링되지 않을 수 있습니다"라고 주의가 나옵니다.

실제로 이대로 내보낸 SVG 파일은 Safari에서 글꼴이 제대로 표시되지 않는 문제가 발생했습니다.
제대로 표시되지 않는 SVG 파일을 텍스트 편집기에서 열고 자세히 살펴보면 font-size나 font-family 등 글꼴로 정보가 기재되어 있는 대신 경로(path) 데이터가 없습니다.

해결 방법

해결 방법은 다음과 같습니다.
Photoshop에서 해당 레이어를 선택한 후, 「서식」→「셰이프로 변환」

이 조작을 실시한 후에 앞서와 같이 내보내기 조작을 실시하면, 「폰트가 예상대로 렌더링되지 않는 경우가 있습니다」의 주의서는 나오지 않고, 제대로 벡터 이미지로서 내보내기·저장을 할 수 있습니다.

텍스트 에디터로 확인해도, 방금 전과 달리 제대로 패스 데이터가 기록되고 있네요.

덧붙여 붉은 색이 흰 색의 바깥쪽에 미묘하게 튀어나와 버리고 있던 문제도, <style> 태그내의 fill(채우기 색)을 fill: #d20000; 로부터 fill: #fff; 에 재기록해 해결되었습니다!