[Flutter] SVG파일 사용하기 (feat.검정색으로 나오는 에러)

Flutter에서 .svg 파일을 사용하기 위해서는 flutter_svg 패키지가 필요하다.

flutter pub add flutter_svg

https://pub.dev/packages/flutter_svg

설치 후 아래와 같이 사용할 수 있다.

// asset을 사용하는 경우
SvgPicture.asset(
    iconPath, // 파일 경로
    width: 20,
    height: 20,
)

// 네트워크를 사용하는 경우
SvgPicture.network(
    svgUrl, // 파일 주소
    width: 20,
    height: 20,
)

asset으로 불러와서 사용했는데, 다음과 같이 기존 그림과 달리 검정색으로 뒤덮인 채 띄워지는 현상이 있었다.

알아보니 flutter_svg 패키지는 .svg 파일 내 스타일을 적용할 때, '내부 스타일 시트'를 이용하면 인식하지 못하기 때문에 '인라인 스타일'을 사용해야한다.

기존 svg의 코드를 살펴보면 아래와 같이 스타일 시트가 따로 정의되어 있는 모습을 볼 수 있다.

이제 저걸 인라인 스타일로 바꿔줘야 하는데, 어떻게 .svg 파일 마다 수작업을 할 수 있을까
파일 수가 많으면 절대 못 한다.

우리는 프로그램 하나를 이용할 것이다.

https://github.com/RazrFalcon/svgcleaner

svgcleaner라고 하는 프로그램이다.
.svg 파일의 장점 중 하나가 용량이 작다는 것인데, 이 프로그램을 이용하여 용량을 극한까지 줄일 수 있다.
단, 내부 코드가 변경되기 때문에 나중에 코드를 만질 일이 있다면 이 프로그램을 사용하는 건 조금 생각해보자.

용량을 줄이는 작업이기 때문에 코드 라인 수도 줄게 되는데, 이 과정에서 스타일 적용법이 '인라인 스타일'로 바뀐다.

사용법

1. 파일 선택 (다중 선택 가능)
2. 내보내기 경로 지정
3. 작업 실행

사용 후

이제 다시 .svg 파일을 사용하면 원래 이미지 대로 띄워질 것이다.

요약

1. 기존 패키지로는 읽지 못하는 스타일 코드가 있을 수 있음
2. svg 용량 줄이는 프로그램 사용하면 알아서 코드 바뀜

참고 링크

• https://github.com/dnfield/flutter_svg/issues/166
• https://stackoverflow.com/questions/55909016/svg-picture-is-returning-black-image-in-flutter-inspite-of-giving-a-color-image
• https://github.com/RazrFalcon/svgcleaner