xcode에서 svg 이용할 때 주의할 점

        VStack(alignment: .leading, spacing: .zero) {
            // 대충 코드
        }
        .background(alignment: .bottom) {
                TrabbleImage.backMaterial.swiftUIImage
                    .resizable()
                    .scaledToFill()
                    .ignoresSafeArea(edges: .top)
        }

 

Vstack 배경으로 Image가 들어가야 해서 위와 같은 코드를 작성했는데,

아래와 같은 이슈가 발생했다.

문제: 기기별로 잘 보면 동그라미 밑에 배경의 공간이 다른 것을 확인할 수 있다.

하지만 코드를 다음과 같이 수정하면

        VStack(alignment: .leading, spacing: .zero) {
            // 대충 코드
        }
        .background(alignment: .bottom) {
                Color.red
        }

모두 똑같은 높이의 배경을 가졌다.

 

그래서 Image가 문제라는 것을 확인...!

 

팀원 분이 방법을 알려주셔서 png로 1x, 2x, 3x를 넣으니 괜찮아졌다.

하지만 svg가 용량도 적고 깨지지도 않고 사용에 용이해서 svg를 사용하고 싶었다.

 

 

그래서 글을 찾아보니 이런 블로그를 확인할 수 있었다.

https://hyunndyblog.tistory.com/183

 

Resizing의 Preserve Vector Data를 체크해주면, 벡터 이미지를 저장해서 다양한 크기로 사용할때 효과적이라는 것을 알게되었고 실제로 해보니 성공했다.

 

앞으로 svg 쓸 때는 이 두 항목을 check하도록 하자.

출처

 https://kka7.tistory.com/381

Xcode에서 벡터 이미지 사용하기