[에러 기록] SyntaxError: unknown: Namespace tags are not supported by default

React 앱에서 SVG를 MUI SvgIcon에 넣어 SVG 아이콘이 필요한 곳에 사용 중이었는데, 새로운 아이콘을 만드는 과정에서 앱이 렌더링이 안되면서 해당 에러가 나타났다.

 

처음에는 MUI와 관련된 에러인가 했지만, 스택오버플로우에서 SVG와 JSX(React)가 충돌해 발생하는 에러라는 사실을 알게 됐다.

 

SVG는 XML(미리 태그가 지정되지 않은 마크업 언어)로 쓰여진 2차 벡터 그래픽 마크업 언어다. 이 때 namespace라는 건 XML을 사용하는 다른 언어들과 충돌하거나 혼동되지 않도록 이것이 SVG에 속한다고 명시해 주는 역할을 하는 요소다. 웹앱에서 SVG의 경우 이제 namespace를 사용하지 않아도 된다고 한다. 그런데 이 때 Figma에서 export한 SVG의 경우 간혹 가다 임의로 여러 namespace들이 붙어있는 경우가 있다.

 

이 때 예를 들어 namespace가 'xmlns:xlink'라면, JSX의 요소들은 모두 camel case여야 함으로 위 오류가 발생하는 거다. 만약 namespace를 사용해야 하는 상황이라면, 'xmlnsXlink'로 요소명을 바꿔 주면 간단히 해결된다

 

SVG를 프로젝트에 추가할 때 애초에 ImageOptim(https://imageoptim.com/mac)과 같은 이미지 최적화 프로그램에 넣은 뒤에 추가해주면 이런 불필요한 요소들이 모두 제거되는 장점이 있다.

 

참고 링크:

https://stackoverflow.com/questions/59820954/syntaxerror-unknown-namespace-tags-are-not-supported-by-default

https://mirabo.tistory.com/175

https://www.tcpschool.com/xml/xml_basic_namespace

코딩교육 티씨피스쿨

SVG 기본 정의 및 네임 스페이스(name space)

SyntaxError: unknown: Namespace tags are not supported by default