Coding Memo
SVG 파일, XML로 변환해서 Icon으로 사용 본문
xml 화면을 구성 시에 사용자의 단말 해상도에 따라, hdpi, mdpi, xdpi, ... 로 분류되고, 각 리소스에서 이미지등의 asset 파일이 로드가 된다.
만약 이미지 A의 해상도가 100*100으로 고정되어 있다고 할 때, 태블릿 같이 비교적 해상도가 큰 디스플레이와 휴대폰 같이 비교적 해상도가 작은 디스플레이에서 같은 크기로 표시가되면 사용자 입장에서 매우 불편할 것이다.
즉, 각 해상도에 따라 각각의 다른 해상도의 이미지를 준비해야 한다는 것이다.
이 방법은 매우 불편하다.
바로 Vector 이미지를 이용하는 것이다.
Vector 이미지를 이용하면 하나의 파일로 다양한 크기의 같은 이미지를 얻을 수 있다. 크기를 늘리고 줄이는데 있어서 Vector를 이용해 표현한 이미지이기 때문에 깨지는 현상이 발생하지 않는다. 이 기능은 안드로이드 자체에서도 제공해주고 있다!
아래 예시는 icon을 벡터로 사용하는 방법을 다루고 있다.
예시로 간단한 아이콘을 Vector 이미지로 xml 을 만들어 사용해보겠다.
이용할 이미지는 아래와 같다.
위 이미지는 기본적으로 확장자가 png인 파일이고 해상도도 360*360이다. 이 이미지를 여러가지 해상도의 화면에서 각 해상도에 맞게 크기를 표현해보자.
먼저 위의 이미지를 SVG 파일로 만들어 주어야한다.
PNG, JPG, JPEG 등의 여러가지 확장자의 이미지를 SVG 확장자로 변경해주는 여러가지 사이트들이 있으니 그곳에서 변환했다.
(SVG는 Scalable Vector Graphics 의 약자로 말 그대로 크기 조절 가능한 벡터 이미지이다.)
SVG 파일을 XML로 변환하는 방법
1. 안드로이드 프로젝트의 drawable에서 우클릭 -> New -> Vector Asset
2. Configure Vector Asset 화면
여기서는 안드로이드에서 제공하는 기본 벡터 이미지를 선택할 수도 있다. (Clip Art의 이미지를 클릭해 선택하면 되고, 클라우드, 더하기, 쓰기, 알림, 알람 등의 다양하고 유용한 아이콘이 있으니 참고하자.)
SVG를 xml로 변환시킬 것이므로 "Local file(SVG, PSD)"를 선택하고 xml로 변환할 SVG 파일 또는 PSD 파일을 직접 선택해주자. (위에서 언급은 안했지만 PSD 파일도 xml 파일로 변환시킬 수 있는 기능을 제공해준다.)
3. 파일 이름(Name), 사이즈(Size, dp 단위), 투명도(Opacity)를 지정할 수 있다.
참고: 벡터 이미지기 때문에 (당연한 거지만) 배경은 없다!
4. Next를 누르면 "Confirm Icon Path"가 나타나는데, 저장할 경로를 지정해주기만 하면 된다. -> Finish
5. Component에 추가 방법
app:srcCompat에 직접 해당 이미지를 지정해주면 된다. (android:src가 아니다!)
app:srcCompat="@drawable/ic_tts_sound"SVG, XML 파일 비교
SVG
| <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="360.000000pt" height="360.000000pt" viewBox="0 0 360.000000 360.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,360.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M2602 3020 c-28 -27 -28 -65 1 -93 311 -313 481 -785 438 -1217 -7 -63 -19 -148 -27 -189 -54 -260 -201 -543 -385 -738 -56 -59 -62 -91 -24 -121 35 -28 56 -19 123 53 367 392 515 939 402 1480 -61 292 -236 618 -428 798 -57 53 -69 56 -100 27z"/> <path d="M1658 2883 c-68 -65 -170 -163 -228 -218 -57 -55 -143 -137 -190 -182 l-86 -83 -336 0 c-277 0 -338 -2 -347 -14 -9 -11 -12 -165 -12 -594 1 -319 3 -587 7 -596 5 -14 42 -16 345 -16 l339 0 113 -110 c63 -60 123 -118 134 -127 11 -10 100 -94 198 -188 97 -93 183 -174 191 -178 8 -4 23 -3 34 3 20 11 20 18 20 1203 0 915 -3 1196 -12 1205 -25 25 -52 8 -170 -105z"/> <path d="M2387 2742 c-24 -27 -21 -65 9 -97 152 -164 235 -314 291 -526 25 -95 27 -120 27 -279 0 -151 -3 -187 -23 -265 -50 -193 -141 -366 -264 -504 -62 -69 -72 -105 -39 -134 31 -29 58 -20 112 35 155 160 277 400 321 632 26 137 26 340 0 473 -44 223 -141 425 -282 588 -85 99 -118 115 -152 77z"/> <path d="M2182 2444 c-30 -21 -29 -64 4 -95 69 -64 151 -209 181 -319 27 -97 25 -290 -4 -390 -28 -95 -92 -214 -154 -284 -27 -30 -49 -63 -49 -73 0 -25 36 -63 60 -63 65 0 204 208 262 390 20 65 23 95 23 230 0 134 -3 165 -23 229 -45 142 -112 260 -200 354 -39 40 -65 46 -100 21z"/> </g> </svg> |
XML
| <vector android:height="50dp" android:viewportHeight="360" android:viewportWidth="360" android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#000000" android:pathData="M260.2,58c-2.8,2.7 -2.8,6.5 0.1,9.3 31.1,31.3 48.1,78.5 43.8,121.7 -0.7,6.3 -1.9,14.8 -2.7,18.9 -5.4,26 -20.1,54.3 -38.5,73.8 -5.6,5.9 -6.2,9.1 -2.4,12.1 3.5,2.8 5.6,1.9 12.3,-5.3 36.7,-39.2 51.5,-93.9 40.2,-148 -6.1,-29.2 -23.6,-61.8 -42.8,-79.8 -5.7,-5.3 -6.9,-5.6 -10,-2.7z" android:strokeColor="#00000000"/> <path android:fillColor="#000000" android:pathData="M165.8,71.7c-6.8,6.5 -17,16.3 -22.8,21.8 -5.7,5.5 -14.3,13.7 -19,18.2l-8.6,8.3 -33.6,-0c-27.7,-0 -33.8,0.2 -34.7,1.4 -0.9,1.1 -1.2,16.5 -1.2,59.4 0.1,31.9 0.3,58.7 0.7,59.6 0.5,1.4 4.2,1.6 34.5,1.6l33.9,-0 11.3,11c6.3,6 12.3,11.8 13.4,12.7 1.1,1 10,9.4 19.8,18.8 9.7,9.3 18.3,17.4 19.1,17.8 0.8,0.4 2.3,0.3 3.4,-0.3 2,-1.1 2,-1.8 2,-120.3 0,-91.5 -0.3,-119.6 -1.2,-120.5 -2.5,-2.5 -5.2,-0.8 -17,10.5z" android:strokeColor="#00000000"/> <path android:fillColor="#000000" android:pathData="M238.7,85.8c-2.4,2.7 -2.1,6.5 0.9,9.7 15.2,16.4 23.5,31.4 29.1,52.6 2.5,9.5 2.7,12 2.7,27.9 0,15.1 -0.3,18.7 -2.3,26.5 -5,19.3 -14.1,36.6 -26.4,50.4 -6.2,6.9 -7.2,10.5 -3.9,13.4 3.1,2.9 5.8,2 11.2,-3.5 15.5,-16 27.7,-40 32.1,-63.2 2.6,-13.7 2.6,-34 0,-47.3 -4.4,-22.3 -14.1,-42.5 -28.2,-58.8 -8.5,-9.9 -11.8,-11.5 -15.2,-7.7z" android:strokeColor="#00000000"/> <path android:fillColor="#000000" android:pathData="M218.2,115.6c-3,2.1 -2.9,6.4 0.4,9.5 6.9,6.4 15.1,20.9 18.1,31.9 2.7,9.7 2.5,29 -0.4,39 -2.8,9.5 -9.2,21.4 -15.4,28.4 -2.7,3 -4.9,6.3 -4.9,7.3 0,2.5 3.6,6.3 6,6.3 6.5,-0 20.4,-20.8 26.2,-39 2,-6.5 2.3,-9.5 2.3,-23 0,-13.4 -0.3,-16.5 -2.3,-22.9 -4.5,-14.2 -11.2,-26 -20,-35.4 -3.9,-4 -6.5,-4.6 -10,-2.1z" android:strokeColor="#00000000"/> </vector> |
워낙 간단한 이미지라 차이가 커보이지는 않아 보인다.
결국은 이미지의 좌표에 대한 색상 정보와 경계 정보등을 담고 있는 거는 비슷하다.
총 4가지 색상 영역이 있으므로 4가지 path 태그가 존재하는 것 같다.
아래와 같이 아이콘으로 사용할 수 있다.
'Android' 카테고리의 다른 글
| 안드로이드 스튜디오 github 연동 (0) | 2021.08.30 |
|---|