SVG 이미지는 픽셀 단위로 이루어진 비트맵 방식의 PNG와 다르게 벡터 이미지 방식을 사용하고 있다.
장점은 크기를 자유롭게 조정하여도 이미지 깨짐이 발생하지 않는다는 것이다.
휴대폰은 기종별로 다양한 해상도를 갖고 있으며, 개발자들은 이에 대응할 수 있어야 한다.
PNG 파일 하나를 이용해서 해상도별로 크기를 조정해가면서 사용할 경우 이미지 깨짐이 발생할 수 있고,
그렇다고 PNG 파일을 해상도별로 나누어 사용하기에는 소모 비용이 너무 크다.
이 때 사용할 수 있는 것이 바로 SVG 이미지이다.
플러터에서는 SVG를 쉽게 사용할 수 있도록 제공하는 플러그인이 존재한다.
flutter_svg 라는 플러그인인데, 아래의 순서대로 따라해보도록 하자.
위와 같이 pubspec.yaml 파일을 열고 flutter_svg: 0.17.4 를 추가해준다.
실제로 사용할 이미지를 추가해준다.
경로는 원하는 곳에 넣어도 상관없다.
위에서 추가한 파일을 pubspec.yaml에도 적어준다.
flutter pub get 명령으로 해당 내용을 반영해준다.
이제 flutter_svg 플러그인을 사용하기 위해 위와 같이 import 해준다.
위와 같이 SvgPicture 객체를 사용하여 SVG 이미지를 뿌려줄 수 있다.
width, height 속성을 이용하여 크기를 자유롭게 변경할 수 있으며,
SVG 벡터 이미지이므로 이미지 깨짐이 없다.
아주 깔끔하게 출력되었다.
참고로 SvgPicture.network() 함수를 통해 외부 네트워크에 있는 이미지를 표시할 수도 있다.
앱 내에서 아이콘이 차지하는 비중이 상당히 높기 때문에 SVG 파일을 이용하면,
이미지 용량도 절약할 수 있고 사이즈에 구애 받지 않기 때문에 더 효율적인 작업이 가능하다.
단, 아이콘이 아닌 복잡한 형태의 이미지는 PNG를 사용하는 것이 낫다.
단순하지 않은 이미지는 오히려 PNG 이미지보다 용량이 더 커질 수 있고, 속도에도 영향을 미칠 수 있기 때문이다.