Flutter: svg 파일 사용하기. flutter_svg 색 제대로 나오지 않는 문제

디자인 팀에서 이미지 리소스 만들어줄 때 svg 형식으로 받으면 하나의 파일로 여러 크기 대응되는 등 .jpg나 .png 파일에 비해 장점이 있다.

flutter_svg 패키지를 이용하면 다른 이미지 파일들처럼 간단하게 적용할 수 있는데,

import 'package:flutter_svg/svg.dart';


// 대략 아래와 같이 간단하게 사용할 수 있다.
Container(
  margin: const EdgeInsets.all(6.0),
  child: SvgPicture.asset(
    'assets/icons/somesvgfile.svg',
    height: 25.0
  ),
)

flutter_svg 패키지는 svg 포맷의 style을 지원하지 않기 때문에 가끔 svg 파일로 export 할 때 style 사용하도록 옵션을 주는 경우 (아마도 XD에서 기본 옵션이 사용하는 것인 듯) 이미지의 색이 제대로 나오지 않는 경우가 있다.

 

예를 들면

<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
    <rect data-name="사각형 4530" width="35" height="35" rx="7.5" style="fill:#f40000"/>
</svg>

 

이런 파일의 경우에 빨간 사각형이 나와야 하는데,

The <style> element is not implemented in this library

이런 메시지와 함께 색이 제대로 표현되지 않는다.

 

이런 경우에는 style 내의 프로퍼티들을 모두 분리해서 넣어주면 되는데, 아래와 같이 고치면 제대로 나온다.

<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
    <rect data-name="사각형 4530" width="35" height="35" rx="7.5" fill="#f40000"/>
</svg>

 

간단하지만, 손으로 하기는 무척 귀찮은 작업이니 고쳐야 하는 파일이 많다면 툴을 사용하는 것이 편하다.

나의 경우에는 https://github.com/RazrFalcon/svgcleaner 이것으로 아주 편하게 정리할 수 있었다.