[Flutter]SVG 활용을 위한 flutter_svg 사용방법, SVG 화질 저하 원인

SVG는 웹과 모바일 애플리케이션에서 많이 사용되는 이미지 포맷 중 하나다. 

XML기반의 벡터 이미지 포맷으로 크기 변환 시 화질이 저화되지 않는 장점을 가지고 있어서 많이 사용한다. 

하지만 flutter의 기본위젯으로 SVG파일을 직접적으로 지원하지 않지만,

flutter_svg라이브러리를 통해서 사용 할 수 있다. 

 

flutter_svg | Flutter package

 

기본구조 

final Widget svg = SvgPicture.asset(
  assetName,
);

 

 

사용방법

설치

 - 터미널 창에 설치 코드 입력

flutter pub add flutter_svg

 

assets 설정

 - assets 폴더 아래 내가 원하는 폴더를 만들어 준다.

 

해당 폴더 아래에SVG 파일을 추가 한다. 

 


- pubspec.yaml 에 assets 폴더를 사용할거라는 것을 명시, svg 폴더를 사용할 거기 때문에 assets/svg/를 입력해준다. 
svg뒤에 / 를 꼭 넣어줘야 한다.

사용

class SvgPracticePage extends StatelessWidget {
  const SvgPracticePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: SvgPicture.asset('assets/svg/alert-circle.svg')),
    );
  }
}

svg 파일이 추가된것을 확인 할 수 있다. 

 

 

크기 변경

 - height, width를 추가 해주면 svg 파일을 크기를 변경 할 수 있다. 

class SvgPracticePage extends StatelessWidget {
  const SvgPracticePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: SvgPicture.asset(
        'assets/svg/alert-circle.svg',
        height: 50,
        width: 50,
      )),
    );
  }
}

 

 

 

색상 변경 방법

class SvgPracticePage extends StatelessWidget {
  const SvgPracticePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: SvgPicture.asset(
        'assets/svg/alert-circle.svg',
        height: 50,
        width: 50,
        colorFilter: ColorFilter.mode(Colors.black, BlendMode.srcIn),
      )),
    );
  }
}

 

 colorFilter: ColorFilter.mode(Colors.black, BlendMode.srcIn) 를 사용하여

Color를 변경 할 수 있지만, 이는 조심히 사용해야한다. 

 

colorFilter를 사용했을 시, 화질 저하가 일어나니 이 사항을 꼭 참고해야한다. 

이것 때문에 고생을 조금 했다.