피그마 SVG 파일 추출시 컴포넌트상에서 다른 이미지 생성

피그마에서 svg파일로 추출해서 프로젝트에 넣어서 사용하고 있었다 그러던 중 문제가 발생하였다 

직접 파일을 볼때는 정상 작동 하였지만 React 코드 상에서 불러올때는 다른파일 이미지가 불러와 지는 것이다.

 

이유는 정말 참신했다

피그마에서 svg파일을 export할시에 svg파일에 있는 pattern의 id값이 각 svg의 고유값이 아닌 전부다 pattern0을 띄우고 있기 떄문이었다.

 

// svg 파일중에 있는 코드

<rect width="252" height="60" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
	<use xlink:href="#image0_7_16" transform="translate(0 -0.0163934) scale(0.00273224 0.0114754)"/>
</pattern>
<image id="image0_7_16" width="366" height="90" xlink:href="대충 base64로된 이미지"/>

rect라는 태그의 fill이 pattern0을 가르키고 있다 여기서 지정하는 pattern0은 바로 밑에있는  pattern 태그를 뜻한다 이 pattern에서 이미지를 불러오게 된다 

 

하지만 이게 페이지 단에 업로드가 되면 문제가 된다. 피그마에서 image가 있는 모든 파일들을 svg로 export할때 모든 pattern의 id가 pattern0이 되어 버리는 것이다.

 

이는 첫번째 업로드된 pattern0을 모든 rect 태그가 참조하게 되고 모든 이미지가 이 처음 업로드된 pattern0을 가진 이미지로 바뀌는 것이다.

 

따라서 각 svg 파일에 있는 pattern id값을 고유값으로 수정해서 이를 해결하였다.