[Xcode] SVG 활용과 “clip: empty path.” 에러 해결하기

SVG 활용과 “clip: empty path.” 경고 해결하기

---

 

Xcode 프로젝트에서 사용할 수 있는 벡터 이미지는 PDF와 SVG가 있다.

종류	사용조건	파일 크기
PDF	Xcode 6, iOS 8, Mac OS 10.9 이후	작음
SVG	Xcode 12, iOS 13, iPad OS 13, Mac OS 10.15	가장 작음

출처 : https://kka7.tistory.com/381

 

그리고 프로젝트의 Assets에 벡터 이미지(SVG파일)를 추가해서 사용할 때, 함께 확인해 주면 좋은 설정들이 있다.

 

1️⃣ Attributes inspector의 [Resizing - Preserve Vector Data] 옵션

해당 옵션은 벡터 이미지를 생성하는 시점을 “빌드 타임”으로 할 것인지, “런타임”으로 할 것인지 선택하는 옵션이다.

옵션을 활성화하면 “런타임”에 이미지를 생성하게 되는데, 이는 앱에서 보이는 이미지가 어떤 크기에서도 선명하게 보이게 해준다.

말 그대로, 벡터 데이터를 보존하고 있기 때문에, 사용자의 디스플레이 환경을 반응형으로 인식해서 처리해 줄 수 있게 된다는 것으로 이해된다.

에셋 카탈로그에서 PDF 또는 SVG를 사용할 때 Xcode는 기본적으로 빌드 타임에 이러한 파일에서 고정된 크기의 에셋을 생성합니다. '벡터 데이터 보존' 확인란을 선택하면 런타임에 벡터 데이터를 사용하여 에셋의 크기를 조정하므로 어떤 크기에서도 부드러운 스케일링과 선명한 이미지를 얻을 수 있습니다.

출처 : https://developer.apple.com/forums/thread/694526

 

 

그렇다면 무조건 옵션을 활성화해야 하지 않을까?

우선 “런타임”에 이미지 스케일링을 처리하게 되는 것이므로, 앱의 성능에 영향을 끼칠 수 있을 것 같다.

(그런데 아직까지는 직접 체감이 될 정도로 성능이 저하되는 경험은 해본 적이 없다.)

그리고 용량이 커지는 문제도 발생할 수 있다는 정보 글이 여러 개 있는데, 이것도 잘 모르겠다.

직접 확인해 보기 위해, 현재 프로젝트에서 사용 중인 SVG 파일 4개에 대해 옵션을 활성화/비활성화하였을 때

각각 App 파일의 용량을 확인해 봤는데, 전후 차이가 없었기 때문이다.

(DerivedData 폴더 아래에 생기는 그 .app 파일)

 

파일이 몇 개 안 되어서 전후 차이가 거의 없는 것일 수도 있고, 테스트 방법이 잘못된 것일 수도 있겠지만..

아무튼 나한테는 딱히 차이가 없기 때문에 현재는 습관적으로 체크를 하고 넘어가고 있는 옵션이다.

 

 

2️⃣ [Scales] 옵션 - “Single Scale” 선택

벡터 이미지 자체가 해상도에 영향을 받는 개념이 아니기 때문에, 레티나 디스플레이에 대한 대응(@1x, @2x, @3x)을 할 필요가 없다.

따라서, 앱의 용량 최적화를 위해 Scales 옵션값을 Single Scale로 지정해 주어서 단일 이미지로 설정을 해놓는 것이 좋다.

옵션을 활성화하면 이미지 Asset이 단일화되는 것을 확인할 수 있다.

 

 

---

🐞 경고 메시지 [clip: empty path]

SVG 파일들을 Assets에 추가하고, 위의 옵션들을 체크한 뒤에 이미지를 View에 추가해 주었다.

그리고 Run을 하는데, 다음과 같은 경고 메시지가 표출되기 시작했다.

[clip: empty path.]

이미지는 View에 정상적으로 보였는데, 그 이미지가 포함되어 있는 View가 Appear 될 때마다 메시지가 반복해서 표출되었다.

그래서 디버깅 로그들을 보기가 힘들어져서 그냥 무시하고 넘어갈 수는 없었다.

그래서 원인을 찾아보았는데, 원인은 SVG 파일 자체에 있었다.

 

---

SVG 파일은 xml 형식으로 이루어져 있다.

그래서 텍스트 에디터로 파일을 열어보면, 아래처럼 xml 형식의 문서를 만날 수 있다.

그렇다는 것은, SVG 파일의 문법이 존재한다는 것이다.

내가 만난 에러는 “clip”과 “path” 어쩌구였으니, SVG 문법이 정리되어 있는 페이지를 찾아서 원인을 찾아보았다.

 

mozilla : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

<clipPath> - SVG: Scalable Vector Graphics | MDN

위 URL은 웹 표준을 정의하는 모질라의 공식 사이트이고, 그 사이트에서 <clipPath> 태그의 문서를 찾을 수 있었다.

 

해석해 보자면,

“clipPath로 지정해 놓은 영역에는 페인트를 적용할 수 있고, 그 바깥의 영역에는 적용하지 않게 해 준다.” 정도로 이해할 수 있을 것 같다.

위 문서의 샘플 이미지를 보면 바로 이해가 된다.

 

하트 모양의 영역을 <clipPath>로 지정해 주면, 그 아래에 붉은색 원을 색칠하도록 지정해 주었을 때 위처럼 하트 바깥으로는 색이 칠해지지 않는다는 것이다.

 

그럼 내 이미지는 어떤 것이 잘못되었길래, [clip: empty path] 라는 경고 메시지가 계속 표시된 걸까?

 

이유는 단순했는데, SVG 문법을 처음 접해보아서 이유를 찾는데 꽤나 애를 먹었다.

내가 사용한 이미지는 여러 개의 <clipPath>를 정의해 놓고 사용하고 있었다.

그런데 위 이미지에서, id=”ClipPath” 속성값을 갖고 있는

태그 하위에는 <rect>, 또는 <circle> 등 clipPath의 영역을 지정해 주는 태그가 빠져있었다.

 

저 부분이 의심되어서 다음처럼 통째로 주석 처리하고 다시 프로젝트를 run 해보았더니,

경고 메시지가 깔끔하게 사라졌었다.

그런데, 저 영역을 왜 <rect> 값도 비워놓고 지정해 놓은 것인지 의도를 알 수가 없었다.

SVG 이미지의 원작자가 내가 아니기도 하고, 저 영역을 통째로 주석처리 하여도 눈에 보이는 변화가 없었기 때문이다.

 

그런데, “overflow” 라던지, “Fill” 이라던지 하는 속성값들을 보아하니 왠지

이미지의 크기가 변경되었을 때의 영역 처리에 관한 부분으로 보여, 주석으로 덮어놓고 가기에는 약간 불안했다.

 

그래서 임시방편으로 바로 위의 <clipPath> 태그에 지정되어 있는 <rect>를 그대로 복사해서 붙여 넣고 다시 run 테스트를 해보았다.

마찬가지로 경고 메시지는 출력되지 않았고, 우선 눈에 보이는 이미지에도 어떠한 영향을 주지는 않는 것으로 확인하였다.

 

결론 : Xcode에서 SVG 파일 자체의 문제를 경고 표시해주기도 한다.