AndroidでSVGを使用する最も簡単な方法は?


165

Androidでsvgを使用して、解像度ごとに異なる解像度を作成したり、ファイルをドロップしたりするのを防ぐために、無数のライブラリーを見つけました。アプリに多くのアイコンや画像がある場合、これは非常に煩わしくなります。

誰でも、AndroidでSVGを使用するための最も簡単に使用できるライブラリのステップバイステップのプロセスを提供することを親切にできますか?これは他の多くの人にも役立つと確信しています。

また、アイコンと画像の生成にはAndroid StudioとIllustratorを使用しています。



Androidスタジオでsvgをインポートする方法の短いビデオ:youtube.com/watch
v=

回答:


337

まず、svg簡単な手順に従ってファイルをインポートする必要があります。

  1. ドローアブルを右クリック
  2. 新規をクリック
  3. ベクターアセットを選択

コンピュータで画像が利用できる場合は、ローカルsvgファイルを選択します。その後、必要に応じて、画像のパスを選択し、画像のサイズを変更するオプションもダイアログの右側にあります。このようにして、svg画像がプロジェクトにインポートされます。その後、この画像を使用するために同じ手順を使用します

@drawable/yourimagename

5
プロジェクトに外部svgファイルをインポートするときに頭痛のない、短くて便利な答え。
CodeToLife 2017年

2
まさに私が探していたもの:)
Mohamed Nageh

5
Nextボタンは常に無効になっています。なぜですか?
mrid

それでは、svgの色をどのように変更しますか?
Oniya Daniel

魅力のように機能します。いいね!
sud007

19

更新:この古い答えを使用しないでください、これを使用してくださいhttps : //stackoverflow.com/a/39266840/4031815

数時間の調査の結果、svg-androidは非常に使いやすいことがわかったので、次の手順に進みます。

  1. libをダウンロード:https : //code.google.com/p/svg-android/downloads/list これを書いている時点での最新バージョンは次のとおりです。svg-android-1.1.jar

  2. jarをlibdirに置きます。

  3. * .svgファイルをres/drawabledirに保存します(illustratorでは、[Save as]を押してsvgを選択するのと同じくらい簡単です)

  4. 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());
    



このように定型コードを減らすことができます

次のように、過去のコードを含み、定型コードを削減する単純なクラスを作成しました。

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

これで、アクティビティで次のように呼び出すことができます。

    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
以前の回答の代わりに自分の回答を承認済みとしてマークすることを検討する必要があります
Cliff Burton

1
SVGファイルを追加しようとすると、「エラー:ファイル名は.xmlまたは.pngで終わる必要がある」というエラーが表示されます
Sujay UN

1
なんでimageView static?ここに赤のバグフラグが表示されます。 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はthunderImageViewを含む参照を参照してください
DSchmidt

@DSchmidtは、imageviewへの単なるポインタです。それが私のコードであれば、LoadSVGと呼ばれる1つのメソッドでクラス全体を静的にします。ご覧のとおり、アクセスできないプライベート変数にデータをロードしても意味がありません。
Nasreddine Galfout


5

apkサイズを増やすライブラリを追加するのではなく、http: //inloop.github.io/svg2android/を使用してSvgをドローアブルに変換することをお勧めします。vectorDrawables.useSupportLibrary = trueグラドルを追加し、


3

SVG2VectorDrawableプラグインをお試しください。Preferences-> Plugins-> Browse Pluginsに移動し、SVG2VectorDrawableをインストールします。SAGファイルをベクタードローアブルに変換するのに最適です。インストールが完了すると、ヘルプのアイコン(?)の右側のツールバーセクションにこのアイコンが表示されます。


私には機能しません-SVGファイルパスはプラグインにアップロードされません。上記の最良の答えははるかに単純であり、仕事を成し遂げます。
DaveNOTDavid 2018

優れたプラグイン-多くのsvgをベクトルドローアブルにすばやく変換しました!
Morten Holmgaard

2
  1. Androidプロジェクトで使用するには、SVGをXMLに変換する必要があります。

1.1このサイトhttp://inloop.github.io/svg2android/でこれを行うことができますが 、一部のグラデーションのようにSVGのすべての機能をサポートしているわけではありません。

1.2 Android Studio経由で変換できますが、古いデバイスでアプリをクラッシュさせるAPI 24以降のみをサポートするいくつかの機能を使用する場合があります。

そしてvectorDrawables.useSupportLibrary = truegradleファイルを追加して次のように使用します:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. これらの機能をサポートするこのライブラリhttps://github.com/MegatronKing/SVG-Androidを使用してくださいhttps : //github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

このコードをアプリケーションクラスに追加します。

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

次のようにSVGを使用します。

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

@Pallaviの単純明快なアプローチがあるのに、なぜSVGローダーを使用するのですか?ローダーを使用する利点はありますか?
Taslim Oseni

@Taslimがサポートする機能は、通常の方法よりも優れています。あなたはサポートされている機能を見て、見ることができます。
sajad abbasi 2018年

0

1)ドローアブルディレクトリを右クリックして、新規に移動してベクターアセットに移動します2)アセットタイプをクリップアートからローカルに変更します3)ファイルを参照します4)サイズを指定します5)次にクリックして完了しますディレクトリ

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.