JSX, TSX를 SVG로 변환하기

React Native에서 SVG를 컴포넌트화하여 사용하는 경우가 많은데 이를 위해 SVG -> JSX/TSX로 변환하는 컨버터는 쉽게 찾을 수 있다.

 

그러나 그 반대의 경우인 JSX/TSX -> SVG로 변환하고자 할 땐 어떻게 해야 할까? 이 경우엔 컨버터나 방법을 찾기 어려웠는데 쉬운 방법이 있다.

 

바로 JSX/TSX 컴포넌트에서 return 값만을 빼내어 각 컴포넌트들을 svg 태그로 변환해주고

svg 태그에 xmlns="https://www.w3.org/2000/svg" 어트리뷰트를 추가해주면 된다.

xmlns를 추가해주지 않으면 보통 웹브라우저에선 svg 파일로 인식하지 않고 ‘This XML file does not appear to have any style information associated with it. The document tree is shown below.’ 에러를 내며 깨진다.

 

 

예시를 통해 살펴보자.

import * as React from "react"
import Svg, { Path } from "react-native-svg"

function SvgComponent(props) {
  return (
    <Svg
      style={{
        flex: 1
      }}
      {...props}
    >
      <Path d="M10 10H110V110H10z" stroke="red" fill="#00f" />
    </Svg>
  )
}

export default SvgComponent

 

위와 같은 컴포넌트가 있다면 아래와 같이 바꿔주면 된다.

<svg
  style="flex: 1" 
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="M10 10H110V110H10z" stroke="red" fill="#00f" />
</svg>

 

설명을 덧붙이자면 Svg -> svg, Path -> path로, xmlns="http://www.w3.org/2000/svg" 추가한다.

JSX의 문법(style={{ flex:1 }} 등)은 html의 문법에 맞게 수정한다.

 

이렇게 수정 후 svg 파일로 저장하면 원하는 svg 이미지 파일로 사용할 수 있다.

 

일부 복잡한 svg의 경우 호환되지 않는 경우가 있으니 이 경우엔 해당 컴포넌트에 해당하는 svg 태그를 직접 찾아서 변환해주면 된다.