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

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

플러터에서 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를 참고하라