Android Asset Studio로 SVG를 XML로 변환시 텍스트가 렌더링 되지 않는다면..?

SVG 리소스를 사용하려는 이유

벡터 드로어블을 사용하기 이전에는 각 화면 밀도에 맞는 비트맵 리소스를 제공해왔으나 APK에 포함되는 리소스의 크기도 크고 밀도별 리소스를 관리하는 것도 귀찮다.

안드로이드 APK의 사이즈를 줄이기 위해 비트맵 대신 벡터 드로어블을 사용하는 노력을 할 수 있다.

안드로이드 스튜디오에 포함된 Vector Asset Studio 도구는 SVG(Scalable Vector Graphic)와 PSD(Adobe Photoshop Document) 파일을 벡터 드로어블 리소스로 프로젝트에 가져올 수 있도록 도와준다. 자세한 내용은 다중 밀도 벡터 그래픽 추가 공식 문서를 참조하자.

Text가 렌더링 되지 않는다!

다음과 같은 SVG 형식의 아이콘이 있고,

Asset Studio로 위 SVG 아이콘을 안드로이드 벡터 드로어블로 변환한다면 어떻게 될까?

‘M’ 이라는 글자가 제대로 렌더링 되지 않으며,  문제내용을 확인해보니 <text> 태그가 지원되지 않는다고 나온다. 

텍스트가 렌더링 되지 않는 이유

위의 svg 파일의 코드는 다음과 같다.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
    <g fill="none" fill-rule="evenodd">
        <path .../>
        <text ...>
            <tspan ...>M</tspan>
        </text>
        <path .../>
        <path .../>
    </g>
</svg>

<text> 태그가 포함된 것을 확인 할 수 있다. 

VectorDrawable은 text를 제외한 Tiny SVG 1.2의 모든 기능만을 지원하기 때문에 벡터 드로어블로 변환이 되지 않던 것이다.(참고 링크)

해결방법

크게 두가지 해결방법이 있다.

1. 디자이너에게 수정 요청
2. 개발자가 직접 변경

디자이너에게 부탁하기

Photoshop

포토샵(Photoshop)을 사용한다면 Convert to Shape 기능을 사용할 수 있다.

간단하게 변환 되는 것을 확인할 수 있다.

Sketch

디자이너가 스케치(Sketch)를 사용한다면,
텍스트 레이어를 선택하고 Layer > Convert to Outlines 를 클릭하거나 또는 cmd + opt + O 를 누르면 텍스트가 outline으로 변환된다. 

디자이너? 내가 직접한다!

개발자가 직접 리소스를 변경하는 것을 허용할 디자이너는 없을 것이다. 디자이너에게 무례한 행동이 될 수 있으니 이 방법은 가급적 사용하지 않기 바란다.

“우리 회사는 디자이너도 없고, 나 혼자 다해야 하는데 어떡해요?” 

이런 분들이 있을 수 있기에 간단한 대안을 살펴본다.

1.  https://cloudconvert.com/ 에 접속한다. 
2. Select File 을 선택하여 변경 할 svg 파일을 선택한다.
3. 변환 옵션을 Convert to SVG(svg to svg)로 설정한다
4. (중요) 옵션 버튼을 눌러서 Text To Path를 활성화 시킨다.
5. 변환한다.

이렇게 cloudconvert에서 제공하는 서비스를 이용하여, text를 path로 변경한 뒤 벡터 드로어블로 변환 가능한 svg 파일을 생성할 수 있다.

후원하기