Android 프로젝트에 Vector Image(SVG) 추가하기

안드로이드 프로젝트에는 이미지를 설명하는 XML 파일로 벡터 그래픽을 추가할 수 있습니다.

 

장점

• 이미지 파일 사이즈를 줄여, APK 크기가 작아짐
• 같은 파일로 화질 손실 없이 크기를 조정할 수 있음

고려사항

• 처음 로드시 래스터 이미지보다 CPU 사이클이 더많이 소모될수 있음
  • 나중에는 둘 간의 메모리 사용과 성능이 비슷해짐
  • 최대 200x200 에로 제한하는 것을 추천 (로딩이 오래걸릴수 있음)
• 하나 이상의 색상을 지원하지만, 아이콘을 검은색(#ff000000)으로 지정하는 것을 추천
  • vector Drawable 에 색조(android:tint 및 android:tintMode 속성)를 추가할 수 있음

 

 

 

제플린 디자인 가이드에서 이미지를 선택하면, 오른쪽 Assets에 SVG 항목이 보입니다.

다운로드를 합니다.

 

 

안드로이드 스튜디오에서 File - New - Vector Asset 메뉴를 선택합니다.

 

 

Asset Studio에서 AssetType을 Local file(SVG, PSD) 를 선택,

Path 항목에서 추가할 svg 파일을 가져옵니다.

Size 확인후에 이상이 없으면 Next 버튼을 클릭합니다.

 

 

어떤 경로에 저장되는지 확인하고 Finish 버튼을 클릭합니다.

 

 

안드로이드 프로젝트에서 위의 저장된 경로에 해당 파일이 저장이 되었는지 확인합니다.

(svg 파일이 xml 로 변환되어 저장됩니다.)

 

이제 실제 코드에 적용해보겠습니다.

 

<androidx.appcompat.widget.AppCompatImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@id/button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginBottom="16dp"
    android:src="@drawable/icon_user_plus"/>

 

만약 지원 라이브러리를 사용한다면 app:srcCompat="@drawable/icon_user_plus" 사용해도 됩니다.

 

 

 

벡터 이미지를 사용하면 사이즈가 얼마나 줄어드는지 확인해 보겠습니다.

 

 

 

위의 비교를 봤을때 대략 1/3정도로 크기가 작아지는 것을 보실수 있습니다.

 

 

전체 소스 코드는 아래 Github 링크를 확인해 주세요.

GitHub - rcbuilders/RemindSampleApp: https://heeeju4lov.tistory.com/ 블로그에서 Android + Kotlin 강좌에서 사용함.