iOS13 시대의 SVG 표시 설정 방법

디자이너로부터 아이콘 소재로서 SVG가 납입될 기회가 나온 요즘.
WWDC2019의 Introducing SF Symbols 속에서 AVOID rasterizing! 라고 말할 정도이므로

iOS13 시대의 앱에서 SVG를 다루는 방법은 무엇이 최적인지 시행착오해 보았습니다.
(Xcode 11 beta3, Deployment Target = iOS 12.0)

전제: SVGKit 같은 라이브러리는 사용하지 않습니다.

SVG 크기



SVG는 확대해도 괜찮을 것입니다만,
SVG는 3x 이미지의 크기로 설정하십시오.
1x화상 사이즈로 하면, 2x화상, 3x화상이 들쭉날쭉하게 됩니다. (iOS12 이하에서)

디자이너에게 주문할 때 부탁하는 것이 이상적이지만,
"SVG는 확대해도 들쭉날쭉하지 않기 때문에 크기를 지정하는 것이 이상합니다!"
검색하면 무료 도구와 사이트를 찾을 수 있습니다.

SVG 파일 형식



기존대로 PDF로 변환하십시오.
디자이너에게 주문할 때 부탁하는 것이 이상적이지만,
(약)
검색하면 무료 도구와 사이트를 찾을 수 있습니다.

SVG 설정


  • Asset Catalog에 Image Set를 만듭니다.
  • Resizing Preserve Vector Data 에 체크한다.
  • Scales는 Individual Scales 로 설정한다.
  • SVG를 1x로 설정한다. (2x, 3x는 공란)

  • SVG는 코드로 표시하는 것.
    imageView.image = UIImage(named: "svgSample")
    

    Storyboard로 이미지를 설정한 것만으로는 들쭉날쭉하게 됩니다.



    비교



    왼쪽에서 iOS13, iOS12 (3x 사이즈 SVG 세트), iOS12 (1x 사이즈 SVG 세트)


    iOS13 이상만 Target으로 할 때



    SVG 사이즈는 신경쓰지 않아도 됩니다.
    PDF로 변환하세요.
    코드로 표시하십시오.
    1. Asset Catalog에 Image Set를 만듭니다.
    2. Resizing Preserve Vector Data 에 체크한다.
    3. Scales는 Single Scale 로 설정한다.
    4. SVG를 All로 설정합니다.

    2x, 3x는 공란으로 좋습니까? 라든지 3x 사이즈인데 1x로 세트하는거야? 라든지 신경 쓰지 않아도 된다.

    감상



    iOS13의 벡터 이미지 처리가 훌륭합니다.
    빨리 변환없이 SVG를 설정할 수 있도록 해주세요.
    iOS12 이하를 자르고 싶은 유혹이 ~

    Xcode 11 beta3을 바탕으로 만들고 있습니다. 나중에 변경될 수 있습니다.

    예고! (자신에게 압력)



    Xcode 12에서 Asset Catalogs에 SVG 지원이 추가되었습니다.
    기사 업데이트에 거지 기대.

    좋은 웹페이지 즐겨찾기