1. SVG란?
XML 기반의 벡터 이미지 포맷을 말합니다.
1) 장점
- 확장성: 벡터 이미지이기 때문에 크기를 확대하거나 축소해도 품질이 저하되지 않습니다.
- 파일 크기: 복잡한 이미지에 비해 상대적으로 작은 파일 크기를 가집니다.
- 조작 가능성: CSS나 JavaScript를 이용해 스타일을 변경하거나 애니메이션 효과를 추가할 수 있습니다.
- 접근성: 텍스트 기반 형식이기 때문에 스크린 리더 등의 보조 기술이 쉽게 접근하고 이해할 수 있습니다.
- 웹 성능: 비트맵 이미지에 비해 파일 크기가 작아 웹 페이지의 로딩 시간을 줄일 수 있습니다.
2) 단점
- 복잡성: 비교적 간단한 아이콘 또는 로고 등에는 적합하지만, 복잡한 그래픽을 표현하는 데는 한계가 있을 수 있습니다.
- 렌더링 시간: 복잡한 SVG 이미지는 렌더링하는 데 시간이 오래 걸릴 수 있습니다.
- 브라우저 지원: 대부분의 최신 브라우저는 SVG를 지원하지만, 오래된 브라우저에서는 제대로 표현되지 않을 수 있습니다.
2. 사용한 패키지
3. pubspec.yaml 파일 수정
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
flutter_svg: ^2.0.9
assets:
- assets/images/flutter_logo.svg4. 사용 방법
1) 프로젝트 svg 이미지 불러오기
import 'package:flutter_svg/svg.dart';
SvgPicture.asset('assets/images/flutter_logo.svg') // 이미지 경로2) 인터넷 svg 이미지 불러오기
import 'package:flutter_svg/svg.dart';
SvgPicture.network(
'https://raw.githubusercontent.com/dnfield/flutter_svg/7d374d7107561cbd906d7c0ca26fef02cc01e7c8/example/assets/flutter_logo.svg?sanitize=true', // 이미지 경로
placeholderBuilder: (BuildContext context) => const CircularProgressIndicator(), // 이미지 로딩 중에 보여줄 위젯
) 3) semanticsLabel 설정
semanticsLabel란 음성 지원 기능을 사용하는 사용자들을 위해 이미지에 대한 설명을 추가할 수 있다.
import 'package:flutter_svg/svg.dart';
SvgPicture.asset(
'assets/images/flutter_logo.svg', // 이미지 경로
semanticsLabel:'Flutter Logo', // 음성 지원 기능을 사용하는 사용자들을 위해 이미지에 대한 설명을 추가
),4) colorFilter 설정
SvgPicture.asset(
assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.srcIn,
),
),5) colorFilter 종류
소스 이미지 : 대상 이미지가 그려지기 전 뒤에 있는 캔버스나 백그라운드 이미지
대상 이미지 : 내가 사용하고 싶은 svg 이미지
BlendMode.clear : 소스 이미지와 대상 이미지를 모두 지웁니다.
BlendMode.src : 소스 이미지를 그대로 사용합니다.
BlendMode.dst : 대상 이미지를 그대로 사용합니다.
BlendMode.srcOver : 소스 이미지가 대상 이미지 위에 그려집니다.
BlendMode.dstOver : 대상 이미지가 소스 이미지 위에 그려집니다.
BlendMode.srcIn : 소스 이미지와 대상 이미지가 교차하는 부분만 소스 이미지를 그립니다.
BlendMode.dstIn : 소스 이미지와 대상 이미지가 교차하는 부분만 대상 이미지를 그립니다.
BlendMode.srcOut : 소스 이미지 중 대상 이미지와 교차하지 않는 부분만 그립니다.
BlendMode.dstOut : 대상 이미지 중 소스 이미지와 교차하지 않는 부분만 그립니다.
BlendMode.srcATop : 소스 이미지와 대상 이미지가 교차하는 부분에는 소스 이미지를, 그렇지 않은 부분에는 대상 이미지를 그립니다.
BlendMode.dstATop : 소스 이미지와 대상 이미지가 교차하는 부분에는 대상 이미지를, 그렇지 않은 부분에는 소스 이미지를 그립니다.
BlendMode.xor : 소스 이미지와 대상 이미지가 교차하지 않는 부분만 그립니다.
BlendMode.plus : 소스 이미지와 대상 이미지를 합칩니다.
BlendMode.modulate : 소스 이미지와 대상 이미지의 색상을 곱합니다.
BlendMode.screen : 소스 이미지와 대상 이미지를 반전시킨 후 곱하고, 그 결과를 다시 반전시킵니다. 결과적으로 밝은 색상이 더욱 밝아집니다.
BlendMode.overlay : 소스 이미지와 대상 이미지를 겹치는 방식으로 결합합니다. 대상 이미지의 색상이 밝으면 소스 이미지가 밝아지고, 대상 이미지의 색상이 어두우면 소스 이미지가 어두워집니다.
BlendMode.darken : 소스 이미지와 대상 이미지 중 더 어두운 색상을 선택합니다.
BlendMode.lighten : 소스 이미지와 대상 이미지 중 더 밝은 색상을 선택합니다.
BlendMode.colorDodge : 대상 이미지의 색상을 소스 이미지의 색상으로 나눕니다, 결과적으로 이미지가 밝아집니다.
BlendMode.colorBurn : 대상 이미지의 색상을 소스 이미지의 색상으로 나눈 후 그 결과를 반전시킵니다. 결과적으로 이미지가 어두워집니다.
BlendMode.hardLight : 소스 이미지가 밝으면 colorDodge 효과를, 어두우면 colorBurn 효과를 적용합니다.
5. 전체 코드
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class SvgScreen extends StatelessWidget {
const SvgScreen({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Svg Screen'),
elevation: 0,
),
body: SafeArea(
child: Center(
child: GridView(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 20.0,
),
children: [
Column(
children: [
const Text('Default'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
),
),
],
),
Column(
children: [
const Text('Clear'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.clear,
),
),
),
],
),
Column(
children: [
const Text('Src'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.src,
),
),
),
],
),
Column(
children: [
const Text('Dst'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.dst,
),
),
),
],
),
Column(
children: [
const Text('SrcOver'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.srcOver,
),
),
),
],
),
Column(
children: [
const Text('DstOver'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.dstOver,
),
),
),
],
),
Column(
children: [
const Text('SrcIn'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.srcIn,
),
),
),
],
),
Column(
children: [
const Text('DstIn'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.dstIn,
),
),
),
],
),
Column(
children: [
const Text('SrcOut'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.srcOut,
),
),
),
],
),
Column(
children: [
const Text('DstOut'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.dstOut,
),
),
),
],
),
Column(
children: [
const Text('SrcATop'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.srcATop,
),
),
),
],
),
Column(
children: [
const Text('DstATop'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.dstATop,
),
),
),
],
),
Column(
children: [
const Text('Xor'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.xor,
),
),
),
],
),
Column(
children: [
const Text('Plus'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.plus,
),
),
),
],
),
Column(
children: [
const Text('Modulate'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.modulate,
),
),
),
],
),
Column(
children: [
const Text('Screen'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.screen,
),
),
),
],
),
Column(
children: [
const Text('Overlay'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.overlay,
),
),
),
],
),
Column(
children: [
const Text('Darken'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.darken,
),
),
),
],
),
Column(
children: [
const Text('Lighten'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.lighten,
),
),
),
],
),
Column(
children: [
const Text('ColorDodge'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.colorDodge,
),
),
),
],
),
Column(
children: [
const Text('ColorBurn'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.colorBurn,
),
),
),
],
),
Column(
children: [
const Text('HardLight'),
Flexible(
child: SvgPicture.asset(
'assets/images/flutter_logo.svg',
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.hardLight,
),
),
),
],
),
],
),
),
),
);
}
}6. 결과 화면
Flutter 개발자