[Flutter] 플러터 Svg 그림 넣기 / SVG 그림이 검정색으로 뜨는 오류 / SvgPicture.asset()

오늘은 플러터로 SVG 그림을 넣는 방법에 대해 알아보자.

SVG 파일 : 코드로 구성되어 있으며, 코드를 바꾸면 그림도 바뀐다. 일러스트레이터 등에서 SVG로 추출해낼 수 있다.

아래와 같이, 일러스트레이터 파일을 SVG로 저장하면 SVG 파일을 얻을 수 있다. 내보내기 형식에서 SVG를 선택해주면 아래와 같은 창이 뜬다. 

SVG 내보내기

그런데 여기서 주의할 점은 스타일을 프레젠테이션 속성으로 해야한다는 것이다. 그렇게 설정하지 않으면 플러터에서 SVG 파일을 그림으로 띄웠을 때 검정색으로 보이게 된다.  

하하하... 원래 햄버거인데 타버렸다...

그러므로 프레젠테이션 속성으로의 추출이 끝났다면, 라이브러리를 설치해야한다.

flutter_svg

이후 pubspec.yaml에서 사진의 위치를 설정해주는 것은 동일하다. 라이브러리와 사진 주소 모두 pubget까지 끝났다면 다음 코드를 넣어주자.

SvgPicture.asset("파일주소"),

그러면 SVG 파일이 정상적으로 뜰 것이다 !!

맛있는 도넛 :)