Convert image to SVG

이미지를 벡터타입으로 변환해서 WPF에서 이용하기

이미지를 WPF Xaml에서 Geometry, Path Data등으로 지정하여 사용하고 싶을 때가 있다.

이런 경우 이미지는 로고 등으로 단순하고, 단일 색상으로 이루어져있어야 좋다

구글링을 하며 여러 방법으로 이를 시도해보았다.

1. Microsoft Expression Design 4 이용하기

MS에서 무료로 다운로드 받아 설치/사용이 가능하다.

Import image 메뉴로 새문서에 원하는 이미지를 불러들인 후, Object - Image - Auto Trace Image... 메뉴를 이용하여, 이미지의 외각선을 딴다. 그 후 해당 오브젝트에 우클릭하여(또는 메뉴에서) Export를 선택하고, Format을 SVG나 XAML... 등으로 선택해서 export 시킨 후 해당 파일을 Visual Studio에서 불러낸다.

xaml 또는 SVG 파일 내용 중 <Path>의 d 또는 data 부분을 얻을 수 있다. (여러줄이라면, 끝에 Z를 빼고 이어 붙인다. 물론 마지막 Z는 필요)

2.  온라인에서 간단히 할 수 있다. (https://www.vectorizer.io/)

위에 접속하여 이미지를 upload하고 step별로 적절하게 지정해주면, SVG파일이 만들어지고 이를 다운로드 할 수 있다.

이렇게 얻어진 SVG는 1번에서 처럼 열어서 path부분을 연결해주면, 한줄짜리 path data를 얻어낼 수 있다.

이미지

Path Data

LogoData="M 1475 5097 c-55 -22 -74 -37 -99 -80 -32 -54 -40 -104 -27 -153 6 -22 142 -266 302 -544 160 -278 305 -530 322 -560 l32 -55 -40 24 c-22 13 -154 89 -292 169 -272 156 -307 169 -387 142 -144 -47 -183 -245 -69 -341 16 -13 154 -96 306 -184 l278 -160 -839 -5 -838 -5 -36 -24 c-50 -35 -80 -84 -86 -141 -7 -71 5 -116 40 -156 65 -74 0 -68 925 -74 l831 -5 -591 -340 c-334 -192 -606 -355 -627 -376 -69 -67 -77 -179 -19 -259 50 -69 146 -98 228 -69 17 6 285 157 594 336 601 347 622 359 614 346 -2 -4 -73 -127 -157 -272 -84 -146 -159 -279 -166 -297 -49 -117 37 -259 164 -272 88 -8 152 26 203 107 l29 45 0 457 0 457 -38 74 c-47 93 -65 168 -65 278 0 273 203 517 478 575 88 18 142 18 230 0 275 -58 478 -302 478 -575 0 -110 -18 -185 -65 -278 l-38 -74 0 -456 0 -456 176 -305 c97 -168 188 -319 202 -335 35 -37 97 -66 145 -66 72 0 149 48 185 115 23 45 20 131 -8 185 -12 25 -158 279 -323 565 -165 286 -302 524 -305 529 -3 5 -1 7 4 4 5 -3 137 -79 294 -169 l285 -164 67 0 c57 0 72 4 110 30 104 73 118 213 30 307 -14 15 -152 101 -308 190 l-282 163 831 5 c925 6 860 0 925 74 35 40 47 85 40 156 -6 57 -36 106 -86 141 l-36 24 -838 5 -839 5 597 344 c352 203 610 358 630 379 88 91 58 254 -58 313 -32 17 -55 20 -102 17 -59 -4 -77 -13 -656 -347 -327 -189 -599 -346 -603 -348 -12 -7 -6 4 160 291 163 281 173 303 173 358 0 110 -89 197 -202 198 -111 0 -133 -25 -329 -364 l-164 -285 -5 443 -5 442 -28 42 c-76 115 -258 115 -334 0 l-28 -42 -5 -442 -5 -443 -320 556 c-176 306 -333 569 -349 585 -53 54 -140 72 -211 45 z M 2445 3425 c-76 -31 -135 -91 -163 -168 -38 -100 -22 -206 43 -292 l35 -45 0 -1460 0 -1460 200 0 200 0 0 1460 0 1460 35 45 c93 122 83 289 -24 396 -86 87 -211 111 -326 64 z"

적용 모습