문제

• 피그마에서 정상적으로 export하여, 해당 경로로 호출했음에도 svg파일이 보이지 않는다.

해결 과정

• 디자인 용어에 대해 잘 몰라 구글에 검색을 뭐라고 해야 할 지 모르겠다.

1. 그래서 우선 chatGPT에게 svg파일 정보를 보내며 에러를 물었다.

   

   • 특별한 문제점이 보이지는 않지만, 이러이러한 원인으로 문제가 발생할 수 있다고 한다.

2. svg 미리보기를 해볼까?

   

   • 이 파일만 미리보기에서 에러가 발생한다. 역시, 나의 경로 import문제가 아니었다. 피그마의 svg파일에서 무언가 이상이 있던 것이다.

3. 이를 chatGPT에게 다시 또 물었다.

   

   • id에 유효하지 않는 문자열이 있는 문제라고 한다.

4. id값을 제거

   • id값을 제거하고 새로고침 하니 정상적으로 svg아이콘이 띄어졌다.

     

원인

• svg파일에 특수한 문자가 있어서 발생한 에러였다.
  •  backspace문자를 나타내는 코드 포인트이다. 디자인 과정에서 이러한 id값이 실수로 들어간 듯하다.

결론

• 내가 확실히 맞게 한 행동(정확한 export, import)이라고 생각이 들면, 파일 혹은 세팅에서 원인을 찾아보자.