iOS13 시대의 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 설정
기존대로 PDF로 변환하십시오.
디자이너에게 주문할 때 부탁하는 것이 이상적이지만,
(약)
검색하면 무료 도구와 사이트를 찾을 수 있습니다.
SVG 설정
Image Set
를 만듭니다. Preserve Vector Data
에 체크한다. Individual Scales
로 설정한다. 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 지원이 추가되었습니다.
기사 업데이트에 거지 기대.
Reference
이 문제에 관하여(iOS13 시대의 SVG 표시 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Hackenbacker/items/a2a28aa57ec633f92529
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 지원이 추가되었습니다.
기사 업데이트에 거지 기대.
Reference
이 문제에 관하여(iOS13 시대의 SVG 표시 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Hackenbacker/items/a2a28aa57ec633f92529
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Xcode 12에서 Asset Catalogs에 SVG 지원이 추가되었습니다.
기사 업데이트에 거지 기대.
Reference
이 문제에 관하여(iOS13 시대의 SVG 표시 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Hackenbacker/items/a2a28aa57ec633f92529텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)