[플러터] SVG(벡터 이미지) 불러오기

2021. 1. 27. 20:56·Flutter/Flutter Tech

SVG

디자이너와 협업을 하거나, 이미지를 공급받는 경우

흔히 아는 PNG, JPG 타입이 아닌 SVG 형식이라는 것을 본적이 있을 것이다.

SVG는 벡터 이미지의 일종으로 쉽게 코드의 형태로 된 이미지라고 말할 수 있다.

 

<svg id="ico_lock" xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
  <path id="ico_lock-2" data-name="ico_lock" d="M10.5,6H10V4A4,4,0,0,0,2,4V6H1.5A1.5,1.5,0,0,0,0,7.5v7A1.5,1.5,0,0,0,1.5,16h9A1.5,1.5,0,0,0,12,14.5v-7A1.5,1.5,0,0,0,10.5,6ZM3.333,4A2.667,2.667,0,0,1,8.667,4V6H3.333Zm0,0" fill="#a8a8a8"/>
</svg>

위처럼 이미지가 코드로 표현된다. 벡터 이미지에 대한 자세한 설명은 생략하겠다.

 

필자는 외부 디자이너에게 의뢰한 앱디자인을 어도비 XD파일로 제공받았는데

아이콘 파일들은 별도로 주지 않고, XD내에 첨부해주었다.

XD에서는 아래와 같이 이미지를 SVG 코드로 변환할 수 있다.

 

XD에서 이미지 오른쪽 클릭

Flutter SVG

 

flutter_svg | Flutter Package

An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files.

pub.dev

플러터에서 SVG 코드로 이미지를 생성하기 위해 상기 패키지를 사용한다.

여러가지 함수들을 제공하고 있으며 필요에 따라 사용하면 된다.

간단하게 SVG 코드를 이미지화 시켜보자.

 

  SvgPicture lockGrey = SvgPicture.string(
    // ico_lock
    '<svg viewBox="0.0 0.0 12.0 16.0" ><path  d="M 10.5 6 L 10.00000095367432 6 L 10.00000095367432 4 C 10.00000095367432 1.79394543170929 8.2060546875 0 6 0 C 3.7939453125 0 2 1.79394543170929 2 4 L 2 6 L 1.5 6 C 0.6733399033546448 6 0 6.672607898712158 0 7.5 L 0 14.50000095367432 C 0 15.32739353179932 0.6733399033546448 16 1.5 16 L 10.5 16 C 11.32666110992432 16 12 15.32739353179932 12 14.50000095367432 L 12 7.5 C 12 6.672607898712158 11.32666110992432 6 10.5 6 Z M 3.333374261856079 4 C 3.333374261856079 2.529297113418579 4.529297351837158 1.3333740234375 6 1.3333740234375 C 7.470703601837158 1.3333740234375 8.666626930236816 2.529297113418579 8.666626930236816 4 L 8.666626930236816 6 L 3.333374261856079 6 L 3.333374261856079 4 Z M 3.333374261856079 4" fill="#a8a8a8" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" /></svg>',
    width: 12.0,
    height: 16.0,
  );

 

SvgPicture.string을 사용하여 SVG 코드를 삽입하고 사이즈를 정의한다.

그리고 필요한 곳에서 간단하게 이를 호출하면된다.

주의할 점은 따옴표와 SVG코드를 한줄에 모두 적어야한다는 것이다.

 

IconButton(icon : lockGrey, onPressed:(){});

SvgPicture는 widget이므로 widget이 사용되는 모든 곳에서 간단하게 다음과 같이 사용하면 된다.

만약 다른 형태가 필요하다면 패키지의 ReadMe를 참고하라

저작자표시 비영리 변경금지 (새창열림)

'Flutter > Flutter Tech' 카테고리의 다른 글

[플러터] Device 설정 무시 글자 크기 고정하기  (0) 2021.02.28
[플러터] 위젯 반응형으로 개발하기  (2) 2021.01.30
[플러터] 스크린샷 금지하기  (2) 2021.01.21
[플러터] 뒤로가기 버튼/제스쳐 금지  (0) 2021.01.20
[플러터] Splash 화면 변경하기 (로딩 화면)  (0) 2021.01.20
'Flutter/Flutter Tech' 카테고리의 다른 글
  • [플러터] Device 설정 무시 글자 크기 고정하기
  • [플러터] 위젯 반응형으로 개발하기
  • [플러터] 스크린샷 금지하기
  • [플러터] 뒤로가기 버튼/제스쳐 금지
박유상의 개발블로그
박유상의 개발블로그
개발블로그
  • 박유상의 개발블로그
    박유상의 개발블로그
    박유상의 개발블로그
  • 전체
    오늘
    어제
    • 전체 (134)
      • Who am I (10)
        • Portfolio (4)
        • Reminiscence (5)
        • Oversea (1)
        • SiliconValley (0)
      • React (36)
        • React Basic (15)
        • React Tech (5)
        • JavaScript (7)
        • TypeScript (3)
        • CSS&HTML (3)
        • Firebase (3)
      • NodeJS (1)
        • NodeJS Basic (1)
      • Flutter (55)
        • Flutter Widget Design (5)
        • Flutter Widget Basic (8)
        • Flutter Tech (18)
        • Flutter Issue (7)
        • Flutter Web (6)
        • About Flutter (2)
        • Firebase (1)
        • Dev Env (1)
        • Dart (7)
      • Programming (31)
        • Web (1)
        • General (0)
        • Algorithm (25)
        • Python (1)
        • VS Code (2)
      • Django (0)
  • 블로그 메뉴

    • Who I AM
    • React
    • NodeJS
    • Flutter
    • Programming
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    알고리즘
    Flutter
    useState
    자바스크립트
    Redux
    리액트
    플러터
    github
    플러터 웹
    프로그래머스
    DART
    탐욕법
    useRef
    포트폴리오
    Python
    Firebase
    JavaScript
    링고리
    flutter web
    Lingory
    DP
    map
    react
    TypeScript
    웹
    파이썬
    HTML
    JSON
    CSS
    useTranslation
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
박유상의 개발블로그
[플러터] SVG(벡터 이미지) 불러오기
상단으로

티스토리툴바