[안드로이드] 벡터파일(.svg)을 ImageView에 로드하는 방법 feat. Coil

장장 6~7시간의 삽질 끝에 벡터 파일(.svg 확장자)을 ImageView에 로드하는데에 성공했다.....

 

drawable에 저장된 벡터 이미지를 불러오는 것이 아니라 서버에서 내려주는 https://xxxxx.svg .svg 확장자로 된 url을 ImageView에 띄워줘야 했다.

평소에 이미지 로딩 라이브러리로 Glide를 주로 사용해 '당연히 Glide가 해주겠지'라는 생각에 Glide만 이것저것 고쳐보다 결국 Glide는 svg 파일 로딩을 지원하지 않는다는 것을 알았다.

Glide는 svg 파일을 지원하지 않지만 GlideApp을 이용해 벡터 파일 로딩이 가능하다고 한다.

그치만 본인의 경우에서는 GlideApp, GlideAppModule 버전에 따라 크래쉬가 계속 발생했고, 본인과 비슷한 오류를 겪는 이용자들도 꽤나 있는 것 같았다. Glide 공식문서도 참고했지만 결국 GlideApp으로 해결하지 못했다..

 

다른 방법으로 GlideToVectorYou라는 외부 라이브러리를 이용하는 것이다. 

GitHub - corouteam/GlideToVectorYou: Load SVGs in Android with Glide

해당 라이브러리를 사용하기 위해서는 의존성을 추가해야 한다.

implementation 'com.github.corouteam:GlideToVectorYou:v2.0.0'

회사 프로젝트에 적용을 하는지라 수많은 의존성이 추가되어 있는데 빌드 과정에서 어떤 다른 의존성과 ClassPath와 관련된 크래쉬가 계속 발생한다.
그리고 회사 프로젝트에 개인이 지원하는 오픈소스, 비교적 유명하지 않은(?) 외부 라이브러리를 써도 되나? 라는 의문이 들기도 해서 더 일반적인 방법은 없는지 궁금했다.

갑자기 라이브러리 지원이 중단되어서 우리 서비스가 벡터 이미지 로딩을 못하면 안되잖아요..?

---

결국 해결했다...
바로 Coil 인데 사용법도 매우매우 간단했다...

SVGs - Coil

build.gradle (app)

dependencies {
    ...
    implementation 'io.coil-kt:coil:1.2.0'
    implementation 'io.coil-kt:coil-svg:1.2.0'
}

build.gradle에 coil 의존성을 추가한다.

가장 최신 버전은 2.4.0 이지만 기존에 추가되어 있는 다른 의존성과 충돌이 일어나는지 1.1.0도 안되고 1.3.0도 안되고 어떤 이유에선지 다른 의존성과 계속 충돌하는 것으로 추측한다.

 

정확히 '1.2.0'의 버전에서만 가능했다.

// 로드하려는 위치에 추가
ImageView.loadImageFromUrl(url)

// loadImageFromUrl 메소드 추가
fun ImageView.loadImageFromUrl(imageUrl: String) {
        val imageLoader = ImageLoader.Builder(this.context)
            .componentRegistry { add(SvgDecoder(context))
            }
            .build()

        val imageRequest = ImageRequest.Builder(this.context)
            .crossfade(true)
            .crossfade(300)
            .data(imageUrl)
            .target(
                onSuccess = { result ->
                    val bitmap = (result as BitmapDrawable).bitmap
                    this.setImageBitmap(bitmap)
                },
                )
            .build()

        imageLoader.enqueue(imageRequest)
    }

 

정말 구글에서 검색되는 대부분의 방법을 모두 적용해 본 것 같지만 해결하지 못했고 Coil로 해결했다.

 

적용하며 발생했던 수많은 오류를 기록해 두지는 못했지만 저와 유사한 오류를 겪고 계신 분들이 계시다면 Coil 1.2.0 버전을 이용해 보시면 좋을 것 같습니다-!