Cara termudah untuk menggunakan SVG di Android?


165

Saya telah menemukan banyak sekali perpustakaan untuk menggunakan svg di Android dan menghindari pembuatan resolusi berbeda yang membuat frustrasi dan menjatuhkan file untuk setiap resolusi, ini menjadi sangat mengganggu ketika aplikasi memiliki banyak ikon atau gambar.

Adakah yang bisa membantu memberikan langkah demi langkah proses yang paling sederhana untuk menggunakan perpustakaan untuk menggunakan SVG di Android, saya yakin ini akan membantu banyak orang lain juga.

Saya juga menggunakan Android Studio dan Illustrator untuk menghasilkan ikon dan gambar saya.



Video singkat tentang cara mengimpor svg di android studio: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali

Jawaban:


337

Pertama, Anda perlu mengimpor svgfile dengan mengikuti langkah-langkah sederhana.

  1. Klik kanan pada drawable
  2. Klik baru
  3. Pilih Aset Vektor

Jika gambar tersedia di komputer Anda, lalu pilih svgfile lokal . Setelah itu pilih jalur gambar dan opsi untuk mengubah ukuran gambar juga tersedia di sisi kanan dialog jika Anda mau. dengan cara ini svggambar diimpor di proyek Anda. Setelah itu untuk menggunakan gambar ini gunakan prosedur yang sama

@drawable/yourimagename

5
Jawaban singkat dan bermanfaat, tanpa sakit kepala ketika Anda mengimpor file svg eksternal ke proyek.
CodeToLife

2
persis apa yang saya cari :)
Mohamed Nageh

5
yang Nexttombol selalu dinonaktifkan. ada yang tahu kenapa?
mrid

Jadi, bagaimana kita mengubah warna svg?
Oniya Daniel

Bekerja seperti pesona. Bagus!
sud007

19

UPDATE: JANGAN gunakan jawaban lama ini, lebih baik gunakan ini: https://stackoverflow.com/a/39266840/4031815

Ok setelah beberapa jam penelitian saya menemukan svg-android cukup mudah digunakan, jadi saya akan pergi di sini petunjuk langkah demi langkah:

  1. unduh lib dari: https://code.google.com/p/svg-android/downloads/list Versi terbaru pada saat penulisan ini adalah:svg-android-1.1.jar

  2. Masukkan toples ke dalam libdir.

  3. Simpan file * .svg Anda di res/drawabledir (Di ilustrator semudah menekan Simpan sebagai dan pilih svg)

  4. Kode berikut ini dalam aktivitas Anda menggunakan perpustakaan svg:

    ImageView imageView = (ImageView) findViewById(R.id.imgView);
    SVG svg = SVGParser.getSVGFromResource(getResources(), R.drawable.example);
    //The following is needed because of image accelaration in some devices such as samsung
    imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    imageView.setImageDrawable(svg.createPictureDrawable());



Anda dapat mengurangi kode boilerplate seperti ini

Sangat mudah saya membuat kelas sederhana untuk berisi kode masa lalu dan mengurangi kode boilerplate, seperti ini:

import android.app.Activity;
import android.view.View;
import android.widget.ImageView;

import com.larvalabs.svgandroid.SVG;
import com.larvalabs.svgandroid.SVGParser;

public class SvgImage {

    private static ImageView imageView;
    private Activity activity;
    private SVG svg;
    private int xmlLayoutId;
    private int drawableId;


    public SvgImage(Activity activity, int layoutId, int drawableId) {
        imageView = (ImageView) activity.findViewById(layoutId);
        svg = SVGParser.getSVGFromResource(activity.getResources(), drawableId);
        //Needed because of image accelaration in some devices such as samsung
        imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imageView.setImageDrawable(svg.createPictureDrawable());
    }
}

Sekarang saya bisa menyebutnya seperti ini dalam aktivitas:

    SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain);
    SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder);
    SvgImage oceanSVG = new SvgImage(MainActivity.this, R.id.oceanImageView, R.drawable.ocean);
    SvgImage fireSVG = new SvgImage(MainActivity.this, R.id.fireImageView, R.drawable.fire);
    SvgImage windSVG = new SvgImage(MainActivity.this, R.id.windImageView,R.drawable.wind);
    SvgImage universeSVG = new SvgImage(MainActivity.this, R.id.universeImageView,R.drawable.universe);

3
Anda harus mempertimbangkan menandai jawaban Anda sendiri sebagai diterima alih-alih yang sebelumnya
Cliff Burton

1
Ketika saya mencoba untuk menambahkan file SVG saya mendapatkan pesan kesalahan, Kesalahan: Nama file harus diakhiri dengan .xml atau .png
Sujay UN

1
Kenapa begitu imageView static? Saya melihat bendera bug merah hugh di sini. SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain); SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder); rainSVG tidak referensi mengandung thunderImageView
DSchmidt

@ DSchmidt itu hanya sebuah pointer ke imageview. Jika itu kode saya, saya akan membuat seluruh kelas statis dengan satu metode yang disebut LoadSVG. dan seperti yang Anda lihat tidak ada titik memuat data ke variabel pribadi yang tidak dapat diakses.
Nasreddine Galfout



3

Coba Plugin SVG2VectorDrawable. Pergi ke Preferences-> Plugins-> Browse Plugins dan instal SVG2VectorDrawable. Bagus untuk mengonversi file sag ke gambar vektor. Setelah Anda menginstal Anda akan menemukan ikon untuk ini di bagian toolbar tepat di sebelah kanan ikon help (?).


Tidak berfungsi untuk saya - jalur file SVG bahkan tidak bisa diunggah ke plugin. Jawaban terbaik di atas jauh lebih sederhana, dan menyelesaikan pekerjaan.
DaveNOTDavid

Plugin hebat - dengan cepat mengkonversi banyak svg ke drawable vektor!
Morten Holmgaard

2
  1. Anda perlu mengonversi SVG ke XML untuk digunakan dalam proyek android.

1.1 Anda dapat melakukan ini dengan situs ini: http://inloop.github.io/svg2android/ tetapi tidak mendukung semua fitur SVG seperti beberapa gradien.

1.2 Anda dapat mengonversi melalui android studio tetapi mungkin menggunakan beberapa fitur yang hanya mendukung API 24 dan lebih tinggi yang dapat menyebabkan crash aplikasi Anda di perangkat yang lebih lama.

dan tambahkan vectorDrawables.useSupportLibrary = truefile gradle dan gunakan seperti ini:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. gunakan perpustakaan ini https://github.com/MegatronKing/SVG-Android yang mendukung fitur-fitur ini: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

tambahkan kode ini di kelas aplikasi:

public void onCreate() {
    SVGLoader.load(this)
}

dan gunakan SVG seperti ini:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_red"/>

Mengapa menggunakan loader SVG ketika Anda memiliki pendekatan lurus ke depan @ Pallavi? Apakah ada keuntungan menggunakan loader?
Taslim Oseni

@Taslim fitur yang didukung lebih dari cara biasa. Anda dapat melihat fitur yang didukung dan melihat.
sajad abbasi

0

1) Klik kanan pada direktori yang dapat digambar kemudian pergi ke yang baru kemudian pergi ke aset vektor 2) mengubah jenis aset dari clip art ke lokal 3) menelusuri file Anda 4) memberikan ukuran 5) kemudian klik berikutnya kemudian dilakukan svg Anda dapat digunakan akan dihasilkan dalam drawable direktori

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.