Flutter web에서 SVG 이미지 표시 문제 해결하기

Flutter에서 SVG 이미지 표시 문제 해결하기

개발을 진행하다 보면 예상치 못한 에러가 발생하는 경우가 있습니다. 이번에는 Flutter에서 잘 나오던 SVG 이미지들이 갑자기 표시되지 않는 문제를 겪었습니다. 사용 중인 SVG 패키지는 websafe_svg입니다.

이 문제는 특정 상황에서만 발생했습니다. `flutter run -d chrome`을 터미널로 실행하거나 `flutter build web`으로 생성하여 웹 서버에 올릴 때는 정상적으로 SVG 이미지가 나타났습니다. 그러나 VS Code에서 디버그를 실행할 때만 'ImageCodecException: Failed to decode image data.'라는 에러 메시지와 함께 SVG 이미지가 보이지 않았습니다.

문제 해결 방법 찾기

Flutter 공식 이슈 트래커에도 이 문제에 대한 정보가 없었고, 구글 검색을 해도 원인을 찾을 수 없었습니다. 그런데 우연히 Flutter Reddit에서 해결법을 발견했습니다.(참고: Reddit thread)

Solution: Renderer 선택하기

'canvaskit'과 'html' 중 renderer를 선택할 수 있다고 합니다. 그런데 VS Code에서 디버그를 실행할 때 'canvaskit' renderer를 사용하며, 아마 이 renderer가 SVG를 지원하지 않아서 생기는 문제 같습니다.

해결 방법 적용하기

실행 시 옵션을 주어 renderer를 변경하는 방법도 있지만, 더 간단한 방법은 /web/index.html 파일 내 script 섹션에 window.flutterWebRenderer = 'html'; // or 'canvaskit' 를 추가하는 것입니다. 이렇게 하면 해당 문제가 깔끔하게 해결됩니다.