버그 잡이

XCode에서 SVG 파일 사용하기 #PDF vs SVG 본문

IOS

XCode에서 SVG 파일 사용하기 #PDF vs SVG

버그잡이 2020. 11. 12. 21:26

https://www.avanderlee.com/xcode/svg-image-assets/

 

SVG Assets in Xcode for Single Scale Images - SwiftLee

SVG Image Assets allow you to use Singe Scale icons and symbols. Stop wasting time by generating @1x, @2x, and @3x images by using SVG assets instead.

www.avanderlee.com

위 글을 번역한 글입니다.

직역이 아닌 이해한 것을 바탕으로 작성했기 때문에 원문과는 차이가 있을 수 있습니다.

 


XCode 12부터 SVG 파일 사용이 가능합니다

XCode12부터 SVG 이미지 파일을 지원합니다.

XCode12이전에는 single scale resource를 사용하기 위해서는 PDF 파일을 이용해야 했습니다.

single scale resource를 이용하면 1x, 2x, 3x 각각의 파일을 설정할 필요 없이 하나의 파일만 추가하면 됩니다.

 

SVG(Scalable Vector Graphic)는 무엇인가?

2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식입니다.

백터 이미지는 특성상 확대를 해도 픽셀이 깨지지 않기 때문에 웹 사이트, 모바일 등에서 많이 사용됩니다.

 

언제 SVG 파일을 사용해야 하는가?

SVG 파일은 모든 에셋의 대체제로 볼 수는 없습니다.

많은 디테일이 있는 Rich한 이미지 파일은 individual scale로 정의 되어야 합니다.

하지만 로고, 아이콘 등의 자산을 가지고 있다면 당신은 SVG 파일을 찾아보게 될 것 입니다.

 

지원되는 플랫폼

  • macOS 10.15

  • iOS 13

  • iPadOS

이후 버전

 

SFSymbols 를 대체제로 생각해보자

SVG로 파일들을 바꾸기 전에 SFSymbol을 대체제로 고려해봅시다.

SVG와 지원 플랫폼이 같고

이를 활용하면 app bundle의 용량을 줄일 수 있습니다.

(관련해서는 아래 링크를 참조 https://www.avanderlee.com/swift/sf-symbols-guide/)

 

XCode에서 SVG 파일 사용법

 

PDF vs SVG

PDF 파일은 Xcode 6, iOS 8, OS X 10.9 부터 지원이 됩니다.

반면 SVG는 iOS 13, iPadOS 13, or macOS 10.15 부터 지원이 됩니다.

둘다 벡터 방식입니다.

SVG와 PDF 파일의 결과는 이미지 종류와, 자료의 디테일, export 구성에 따라 달라지기 떄문에 무엇이 더 좋다고 말하기 힘듭니다.

단, 대부분의 경우에서 SVG가 PDF보다 사이즈가 작습니다.

또, 웹 개발에 있어서 SVG가 많이 사용되고 이에 최적화 되어 있는 것을 찾을 수 있습니다.

 

 

반응형
Comments