Visio에서 만든 svg 파일을 react에서 불러들이기

1 목표

visio를 이용하여 만든 svg 파일을 react로 로드하여 각 element를 제어

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Microsoft Visio, SVG Export에서 생성되었습니다. 드로잉4.svg Page-1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
		xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="8.5in" height="11in" viewBox="0 0 612 792"
		xml:space="preserve" color-interpolation-filters="sRGB" class="st8">
	<v:documentProperties v:langID="1042" v:metric="true" v:viewMarkup="false">
		<v:userDefs>
			<v:ud v:nameU="msvNoAutoConnect" v:val="VT0(1):26"/>
		</v:userDefs>
	</v:documentProperties>

	<style type="text/css">
	<![CDATA[
		.st1 {fill:#ff5555;stroke:#800000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st2 {fill:#000000;font-family:맑은 고딕;font-size:1.00001em}
		.st3 {fill:#ffffff;font-family:맑은 고딕;font-size:1.00001em}
		.st4 {fill:#55ff55;stroke:#008000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st5 {fill:#008000;font-family:맑은 고딕;font-size:1.00001em}
		.st6 {fill:#5555ff;stroke:#000080;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st7 {fill:#000080;font-family:맑은 고딕;font-size:1.00001em}
		.st8 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
	]]>
	</style>

	<g v:mID="0" v:index="1" v:groupContext="foregroundPage">
		<title>페이지-1</title>
		<v:pageProperties v:drawingScale="0.0393701" v:pageScale="0.0393701" v:drawingUnits="24" v:shadowOffsetX="8.50394"
				v:shadowOffsetY="-8.50394"/>
		<g id="shape1-1" v:mID="1" v:groupContext="shape" transform="translate(141.732,-595.276)">
			<title>원형 조각</title>
			<v:custProps>
				<v:cp v:nameU="Row_1" v:lbl="mnimonic" v:type="0" v:langID="1042" v:val="VT4(AD101010)"/>
				<v:cp v:nameU="Row_2" v:lbl="script" v:type="0" v:langID="1042" v:val="VT4(onclick(){})"/>
				<v:cp v:nameU="Row_3" v:lbl="nextsvg" v:type="0" v:langID="1042" v:val="VT4(uniq)"/>
			</v:custProps>

2 문제점

visio에서 만든 svg 그림파일을 react로 로드할때 아래와 같은 에러 메세지가 출력

2.1 namespace tag 를 지원하지 않음

Compiled with problems:X

ERROR in ./src/asset/drawoing4.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   6 |   ...props
   7 | }, svgRef) {
>  8 |   return <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"

2.2 CDATA 과 관련된 오류

Compiled with problems:X

ERROR in ./src/asset/drawoing4.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
Error: Expected node, got `
		.st1 {fill:#ff5555;stroke:#800000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st2 {fill:#000000;font-family:맑은 고딕;font-size:1.00001em}
		.st3 {fill:#ffffff;font-family:맑은 고딕;font-size:1.00001em}
		.st4 {fill:#55ff55;stroke:#008000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st5 {fill:#008000;font-family:맑은 고딕;font-size:1.00001em}
		.st6 {fill:#5555ff;stroke:#000080;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st7 {fill:#000080;font-family:맑은 고딕;font-size:1.00001em}
		.st8 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
	`
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:12:11)
    at all (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
    at all (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
    at all (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at root (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:20:54)
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)

3 해결방법

3.1 namespace tag 관련 오류

react에서는 xxx

xxx 형식의 namespace 형식의 xml 문구는 오류로 잡는다. 아래와 같이 바꿔준다.

치환

as-is 문구	to-be 문구
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

4 같이 보기

• [[ ]]
• [[ ]]
• [[ ]]
• [[ ]]
• [[ ]]
• [[ ]]

5 참고

• 위키백과 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 위키낱말사전 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 다음사전 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 다음백과 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 네이버사전 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 네이버백과 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 나무위키 "Visio에서 만든 svg 파일을 react에서 불러들이기"
• 리브레 위키 "Visio에서 만든 svg 파일을 react에서 불러들이기"

[[분류: ]] [[분류: ]]