> For the complete documentation index, see [llms.txt](https://asamarsal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asamarsal.gitbook.io/notes/personal-documentation/mobile/flutter/menambahkan-file-aset-svg.md).

# Menambahkan file aset SVG

{% embed url="<https://pub.dev/packages/flutter_svg>" %}
Flutter SVG
{% endembed %}

Kunjungi link kumpulan SVG ini untuk mencari SVG contoh

{% embed url="<https://svgrepo.com>" %}

Jika anda ingin menambahkan asset file gambar berupa SVG agar gambar tidak pecah saat dilihat, maka anda harus menginstall library ini.

```
flutter pub add flutter_svg
```

Lalu untuk menggunakannya ada 3 cara, yaitu :&#x20;

```
import 'package:flutter_svg/flutter_svg.dart';

//[File berada di global (assets/icon/)]
//[Jangan lupa menginisialisasi di pubspec.yaml]
SizedBox(
  height: 40,
  width: 40,
  child: SvgPicture.asset(
    'assets/icons/break-eggs.svg',
  ),
),

//[File diambil dari link www.svgrepo.com]
SizedBox(
  height: 40,
  width: 40,
  child: SvgPicture.asset(
    'https://www.svgrepo.com/show/533814/honey.svg',
  ),
),
```

Atau jika ingin menggunakan file berbasis vector, Ubah terlebih dahulu dengan menggunakan :&#x20;

{% embed url="<https://pub.dev/packages/vector_graphics_compiler>" %}

Install librarynya terlebih dahulu

```
flutter pub add vector_graphics_compiler
```

```
dart run vector_graphics_compiler -i assets/example.svg -o assets/example.svg.vec
```

Lalu anda akan mendapatkan file baru dengan format nama example.svg.vec pada folder assets anda.