Le moyen le plus simple d'utiliser SVG sous Android?

165

J'ai trouvé une myriade de bibliothèques pour utiliser svg sous Android et éviter la création frustrante de différentes résolutions et la suppression de fichiers pour chaque résolution, cela devient très ennuyeux lorsque l'application a de nombreuses icônes ou images.

Quelqu'un peut-il être aussi gentil de donner un processus étape par étape de la bibliothèque la plus simple à utiliser pour utiliser SVG dans Android, je suis sûr que cela aidera beaucoup d'autres aussi.

J'utilise également Android Studio et Illustrator pour générer mes icônes et images.

CommonSenseCode
la source
Courte vidéo sur la façon d'importer des fichiers svg dans Android Studio: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali

Réponses:

337

Vous devez d'abord importer des svgfichiers en suivant des étapes simples.

  1. Faites un clic droit sur dessinable
  2. Cliquez sur nouveau
  3. Sélectionnez un élément vectoriel

Si l'image est disponible sur votre ordinateur, sélectionnez le svgfichier local . Après cela, sélectionnez le chemin de l'image et une option pour modifier la taille de l'image est également disponible sur le côté droit de la boîte de dialogue si vous le souhaitez. de cette façon l' svgimage est importée dans votre projet Après cela, pour utiliser cette image, utilisez la même procédure

@drawable/yourimagename
Pallavi Jain
la source
5
Réponse courte et utile, sans maux de tête lorsque vous importez des fichiers svg externes dans un projet.
CodeToLife
2
exactement ce que je cherchais :)
Mohamed Nageh
5
le Nextbouton est toujours désactivé. une idée pourquoi?
mrid
Alors, comment changer la couleur du svg?
Oniya Daniel le
Fonctionne comme un charme. Agréable!
sud007
19

MISE À JOUR: N'utilisez PAS cette ancienne réponse, mieux vaut utiliser ceci: https://stackoverflow.com/a/39266840/4031815

Ok, après quelques heures de recherche, j'ai trouvé svg-android assez facile à utiliser, donc je laisse ici les instructions étape par étape:

  1. télécharger la lib depuis: https://code.google.com/p/svg-android/downloads/list La dernière version au moment de la rédaction est la suivante:svg-android-1.1.jar

  2. Mettez le pot dans libdir.

  3. Enregistrez votre fichier * .svg dans le répertoire res/drawable(dans illustrator, il suffit d'appuyer sur Enregistrer sous et de sélectionner svg)

  4. Codez ce qui suit dans votre activité à l'aide de la bibliothèque 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());



Vous pouvez réduire le code standard comme celui-ci

Très facile, j'ai créé une classe simple pour contenir le code passé et réduire le code standard, comme ceci:

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

Maintenant, je peux l'appeler comme ça en activité:

    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);
CommonSenseCode
la source
3
Vous devriez envisager de marquer votre propre réponse comme acceptée au lieu de la précédente
Cliff Burton
1
Lorsque j'essaye d'ajouter des fichiers SVG, j'obtiens une erreur disant, Erreur: Le nom du fichier doit se terminer par .xml ou .png
Sujay UN
1
Pourquoi imageView static? Je vois un énorme drapeau de bogue rouge ici. 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 fait référence contient thunderImageView
DSchmidt
@DSchmidt qui est juste un pointeur vers l'image vue. Si c'était mon code, je rendrais toute la classe statique avec une méthode appelée LoadSVG. et comme vous pouvez le voir, il n'y a aucun point de chargement de données dans des variables privées qui ne sont pas accessibles.
Nasreddine Galfout
14

Android Studio prend en charge SVG à partir de la version 1.4

Voici une vidéo sur la façon d'importer .

Pradeep Mahdevu
la source
C'est la meilleure réponse. Android Studio vous facilite la tâche!
dustinrwh
5

Plutôt que d'ajouter des bibliothèques qui augmentent la taille de votre apk, je vais vous suggérer de convertir Svg en dessinable en utilisant http://inloop.github.io/svg2android/ . et ajoutez vectorDrawables.useSupportLibrary = truegradle,

Sanny Nagveker
la source
3

Essayez le plugin SVG2VectorDrawable. Allez dans Préférences-> Plugins-> Parcourir les plugins et installez SVG2VectorDrawable. Idéal pour convertir des fichiers d'affaissement en fichiers vectoriels. Une fois que vous avez installé, vous trouverez une icône pour cela dans la section de la barre d'outils juste à droite de l'icône d'aide (?).

Rahul Thakur
la source
Cela ne fonctionne pas pour moi - le chemin du fichier SVG n'est même pas téléchargé dans le plugin. La meilleure réponse ci-dessus est beaucoup plus simple et fait le travail.
DaveNOTDavid
Excellent plugin - convertit rapidement de nombreux svg en dessins vectoriels!
Morten Holmgaard
2
  1. vous devez convertir SVG en XML pour l'utiliser dans un projet Android.

1.1 vous pouvez le faire avec ce site: http://inloop.github.io/svg2android/ mais il ne supporte pas toutes les fonctionnalités de SVG comme certains dégradés.

1.2 vous pouvez convertir via Android Studio, mais il peut utiliser certaines fonctionnalités qui ne prennent en charge que l'API 24 et les versions ultérieures qui crashe votre application dans les appareils plus anciens.

et ajoutez le vectorDrawables.useSupportLibrary = truefichier gradle et utilisez comme ceci:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. utilisez cette bibliothèque https://github.com/MegatronKing/SVG-Android qui prend en charge ces fonctionnalités: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

ajoutez ce code dans la classe d'application:

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

et utilisez le SVG comme ceci:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_red"/>
sajad abbasi
la source
Pourquoi utiliser un chargeur SVG alors que vous avez l'approche simple de @ Pallavi? Y a-t-il un avantage à utiliser un chargeur?
Taslim Oseni
@Taslim les fonctionnalités prises en charge sont plus que la manière habituelle. vous pouvez voir les fonctionnalités prises en charge et voir.
sajad abbasi
0

1) Cliquez avec le bouton droit sur le répertoire dessinable puis allez à nouveau puis allez aux actifs vectoriels 2) changez le type d'actif de clipart en local 3) parcourez votre fichier 4) donnez la taille 5) puis cliquez sur suivant puis terminé Votre svg utilisable sera généré en dessinable annuaire

Syed Ovais Hussain
la source