Najłatwiejszy sposób korzystania z SVG w systemie Android?


165

Znalazłem niezliczone biblioteki, aby używać SVG w Androidzie i uniknąć frustrującego tworzenia różnych rozdzielczości i upuszczania plików dla każdej rozdzielczości, staje się to bardzo denerwujące, gdy aplikacja ma wiele ikon lub obrazów.

Czy ktokolwiek może być tak miły, aby przedstawić krok po kroku proces najprostszej w użyciu biblioteki do korzystania z SVG w systemie Android, jestem pewien, że pomoże to również wielu innym.

Do generowania ikon i obrazów używam także Android Studio i Illustrator.



Krótki film o tym, jak zaimportować
plik SVG

Odpowiedzi:


337

Najpierw musisz zaimportować svgpliki, wykonując proste czynności.

  1. Kliknij prawym przyciskiem myszy na drawable
  2. Kliknij nowy
  3. Wybierz Zasób wektorowy

Jeśli obraz jest dostępny na twoim komputerze, wybierz svgplik lokalny . Następnie wybierz ścieżkę obrazu, a opcja zmiany rozmiaru obrazu jest również dostępna po prawej stronie okna dialogowego, jeśli chcesz. w ten sposób svgobraz zostanie zaimportowany do twojego projektu Następnie użyj tej samej procedury do wykorzystania tego obrazu

@drawable/yourimagename

5
Krótka i przydatna odpowiedź, bez bólu głowy podczas importowania zewnętrznych plików SVG do projektu.
CodeToLife

2
dokładnie to, czego szukałem :)
Mohamed Nageh

5
Nextprzycisk jest zawsze wyłączona. jakiś pomysł, dlaczego?
mrid

Jak więc zmienić kolor svg?
Oniya Daniel

Działa jak marzenie. Miły!
sud007

19

AKTUALIZACJA: NIE używaj tej starej odpowiedzi, lepiej użyj tego: https://stackoverflow.com/a/39266840/4031815

Ok, po kilku godzinach badań stwierdziłem, że svg-android jest dość łatwy w użyciu, więc zostawiam tutaj instrukcje krok po kroku:

  1. pobierz lib z: https://code.google.com/p/svg-android/downloads/list Najnowsza wersja w momencie pisania to:svg-android-1.1.jar

  2. Włóż słoik w libreż.

  3. Zapisz swój plik * .svg w katalogu res/drawable(w programie Illustrator wystarczy nacisnąć przycisk Zapisz jako i wybrać plik svg)

  4. W swojej aktywności zakoduj następujące elementy za pomocą biblioteki 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());



Możesz zredukować standardowy kod w ten sposób

Bardzo łatwo stworzyłem prostą klasę zawierającą poprzedni kod i redukującą standardowy kod, na przykład:

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());
    }
}

Teraz mogę to tak nazwać w działaniu:

    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
Powinieneś rozważyć oznaczenie własnej odpowiedzi jako zaakceptowanej zamiast poprzedniej
Cliff Burton,

1
Kiedy próbuję dodać pliki SVG,
pojawia

1
Dlaczego tak jest imageView static? Widzę tu czerwoną flagę błędu. 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 nie zawiera odniesienia do thunderImageView
DSchmidt

@DSchmidt to tylko wskaźnik do widoku obrazu. Gdyby to był mój kod, uczyniłbym całą klasę statyczną za pomocą jednej metody o nazwie LoadSVG. i jak widać nie ma sensu ładować danych do prywatnych zmiennych, do których nie można uzyskać dostępu.
Nasreddine Galfout



3

Wypróbuj wtyczkę SVG2VectorDrawable. Przejdź do Preferencje-> Wtyczki-> Przeglądaj wtyczki i zainstaluj SVG2VectorDrawable. Doskonały do ​​konwersji plików sag do grafiki wektorowej. Po zainstalowaniu znajdziesz odpowiednią ikonę w sekcji paska narzędzi po prawej stronie ikony pomocy (?).


Nie działa dla mnie - ścieżka pliku SVG nawet nie jest ładowana do wtyczki. Najlepsza odpowiedź powyżej jest znacznie prostsza i zapewnia wykonanie zadania.
DaveNOTDavid

Świetna wtyczka - szybko przekonwertuj wiele plików SVG na obiekty wektorowe!
Morten Holmgaard

2
  1. musisz przekonwertować SVG na XML, aby użyć go w projekcie Android.

1.1 możesz to zrobić za pomocą tej strony: http://inloop.github.io/svg2android/, ale nie obsługuje ona wszystkich funkcji SVG, takich jak niektóre gradienty.

1.2 możesz konwertować przez Android Studio, ale może korzystać z niektórych funkcji, które obsługują tylko API 24 i nowsze, co może spowodować awarię aplikacji na starszych urządzeniach.

i dodaj vectorDrawables.useSupportLibrary = trueplik gradle i użyj w ten sposób:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. użyj tej biblioteki https://github.com/MegatronKing/SVG-Android, która obsługuje te funkcje: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

dodaj ten kod w klasie aplikacji:

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

i użyj SVG w ten sposób:

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

Po co używać programu ładującego SVG, skoro masz proste podejście @ Pallavi? Czy jest jakaś korzyść z używania ładowarki?
Taslim Oseni

@Taslim obsługiwane funkcje to coś więcej niż zwykły sposób. możesz zobaczyć obsługiwane funkcje i zobaczyć.
sajad abbasi

0

1) Kliknij prawym przyciskiem myszy na katalog do rysowania, a następnie przejdź do nowego, a następnie przejdź do zasobów wektorowych 2) zmień typ zasobu z obiektu clipart na lokalny 3) przeglądaj plik 4) podaj rozmiar 5) następnie kliknij przycisk Dalej, a następnie gotowe. informator

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.