[iOS - swift] svg 이미지 포멧을 UIImage로 사용할 경우 주의할 점 (size, 사이즈, 크기)

배경지식 1) UIImage의 size 의미

• UIImage에서 size값이 프로퍼티로 있는데, 이 size값은 디바이스의 스케일 (UIScreen.main.scale)값을 구분하지 않은 값임을 주의

private let image = UIImage(named: "tree")!
let size = image.size

• 실제 사이즈는 다음과 같이 scale값을 곱해준 것

let scale = UIScreen.main.scale
print(image.size.width * scale, image.size.height * scale)

svg 이미지 포멧인 경우에서 이미지 사이즈는?

• 보통 Assets 폴더에 이미지를 넣는데, png로 넣으면 x1, x2, x3 다 넣을 수 있지만 svg형태로 벡터로 넣으면 scale하나로 지정
  • svg 형태의 벡터 이미지 사용 방법은 이전 포스팅 글 참고

일반 png 이미지	svg 이미지 (single scale)

• single scale을 사용하는 vector이지만, UIImage로 표현했을때 size가 scale을 고려하지 않은 값으로 출력되고 실제 사이즈는 디바이스의 스케일에 따라서 다른 값임
  • 아래 코드에서 image를 cgImage로 변환 후 height, width값을 출력해보는 이유는 실제 scale을 고려한 값을 알아보기 위함
  • cgImage로 표현했을때 scale을 고려한 값을 가져오는 이유는 cgImage와 UIImage 비교하는 포스팅 글 참고

private let image = UIImage(named: "tree")!
print(image.size, image.cgImage!.height, image.cgImage!.width) // (800.0, 800.0) 2400 2400

vector 이미지를 불러오는 로직 생각해보기

• Asset파일에서 vector 이미지에 관한 single scale과 vector data 설정을 아래처럼 시도하면, 이후에는 XCode내부에서 스케일을 자동으로 조절해준다는 의미

• 원본 .svg 이미지 사이즈가 (60*60)일때는 x3디바이스에서 (180*180)으로 표출되게하므로 UIImage 코드로 접근했을때는 (180*180)의 이미지를 얻게 되는 것
• 즉, .svg 이미지를 사용한다는 것은 원본 이미지 하나만 Xcode에 등록하고 스케일에 따라서 조절은 UIImage 코드로 접근하기 전, 혹은 접근할 때 결정되는 것