[Android] SVG 파일을 Asset으로 사용하는 방법

1. 개요

사이드 프로젝트를 진행할 때 Zeplin을 통해서 디자인을 받았었다.

하지만 요즘은 Figma가 대세인지 다들 Figma를 사용해서 SVG파일을 사용하는 방법까지 새로 배워 정리하고자 한다.

추가로 해커톤 때 어버버해서 정리도 해둘려고 한다.

2. 목록

1. Figma를 통해 svg를 가져오는 방법

2. Android Studio에서 svg 파일을 적용하는 방법

3. 본문

1. Figma를 통해 svg를 가져오는 방법

현재 진행중인 사이드 프로젝트의 디자인이다.

여기에서 클릭 후 png와 svg 둘 다 가능하지만 우리는 svg를 사용 할 것 이다.

(svg가 벡터 이미지여서 사이즈가 늘어나도 안깨진다.)

 

내가 저 화살표를 svg로 다운 받고 싶다면 클릭을 해보자.

클릭 후 정보가 나오고 우측 상단에 Commnet, Inspect, Export가 나온다. 우리는 Export를 눌러서 들어가자.

여기서 주의할 점은 Rectangle 17처럼 단순히 사각형을 가지고 오게 되면 가끔 "Export Failed"오루가 나온다.

이를 해결하기 위해서는 빨간 사각형에서 한개의 도형을 가지고 오는 것이 아니고 전체 집합을 가져와야 한다.

 

필자도 다운이 안되길래 설마하고 했는데 됐다. 삽질 피해서 개이득..

 

2. Android Studio에서 svg 파일을 적용하는 방법

이제 다운 받은 svg파일은 Android Studio에 저장해서 사용해보자.

먼저 drawable에서 우클릭 후 Vector Asset을 눌러준다.

 

다음으로 추가할 SVG를 선택한다. 

우리가 다운 받은 SVG를 눌러주면 알아서 인식해준다.

Finish를 눌러 추가가 된 모습이다.

다운 받은 SVG파일을 그냥 drawable에 넣어주면 오류가 나오니 참고하자.

2-1. 너무 긴 path로 인한 오류

이 부분은 해커톤을 하면서 처음 알게 되었다.

분명 레이아웃 상에서는 오류날만한 코드가 없었는데 계속 실행에 오류가 있어 계속 구글링을 해보았다.

해당 path가 정말 너무 길다. 필자는 그냥 적용이 될 줄 알았는데 해당 오류가 계속 나온다.

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.retrofit, PID: 14465
    android.view.InflateException: Binary XML file line #62 in com.example.retrofit:layout/fragment_home: Binary XML file line #62 in com.example.retrofit:layout/fragment_home: Error inflating class <unknown>
    Caused by: android.view.InflateException: Binary XML file line #62 in com.example.retrofit:layout/fragment_home: Error inflating class <unknown>
    Caused by: java.lang.reflect.InvocationTargetException

....

     Caused by: android.content.res.Resources$NotFoundException: Drawable com.example.retrofit:drawable/ic_appbar_title with resource ID #0x7f0700b7
     Caused by: android.content.res.Resources$NotFoundException: File res/drawable/ic_appbar_title.xml from drawable resource ID #0x7f0700b7
     
....

     Caused by: java.lang.IllegalArgumentException: R is not a valid verb. Failure occurred at position 2 of path: STRING_TOO_LARGE

여기서 중요한 것은 이 문장이다.

Caused by: java.lang.IllegalArgumentException: R is not a valid verb. Failure occurred at position 2 of path: STRING_TOO_LARGE

 

path가 너무 길어서 나오는 오류다.

가뜩이나 시간이 없는 해커톤에 처음 겪는 오류가 나와서 시간을 많이 먹었다.

StackOverFlow에서 해답을 찾을 수 있었지만 다른 기능 구현이 시급하여 png로 대체 후 구현을 했다.

밑의 링크를 통해 확인해보길 바란다.

 

https://stackoverflow.com/questions/61877282/long-svg-asset-file-error-r-is-not-a-valid-verb-failure-occurred-at-position

long SVG Asset file error : R is not a valid verb. Failure occurred at position 2 of path: STRING_TOO_LARGE

3. 마무리

SVG 파일은 해커톤 전에도 사용했지만 오류는 발견하기도 힘들었고 해결도 못했다.

그래도 무슨 오류인지 확인이 가능해 우승의 목적의 아닌 학습의 목적으로 이득을 본 것 같다.