¿La forma más fácil de usar SVG en Android?

165

He encontrado una gran cantidad de bibliotecas para usar svg en Android y evitar la creación frustrante de diferentes resoluciones y la caída de archivos para cada resolución, esto se vuelve muy molesto cuando la aplicación tiene muchos iconos o imágenes.

¿Alguien puede ser tan amable de dar un proceso paso a paso de la biblioteca más simple de usar para usar SVG en Android? Estoy seguro de que esto también ayudará a muchos otros.

También uso Android Studio e Illustrator para generar mis iconos e imágenes.

CommonSenseCode
fuente
Video corto sobre cómo importar svg en android studio: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali

Respuestas:

337

Primero necesita importar svgarchivos siguiendo simples pasos.

  1. Haga clic derecho en dibujable
  2. Haga clic en nuevo
  3. Seleccionar activo de vector

Si la imagen está disponible en su computadora, seleccione el svgarchivo local . Después de eso, seleccione la ruta de la imagen y, si lo desea, también está disponible una opción para cambiar el tamaño de la imagen en el lado derecho del cuadro de diálogo. de esta manera, la svgimagen se importa en su proyecto Después de eso, para usar esta imagen, utilice el mismo procedimiento

@drawable/yourimagename
Pallavi Jain
fuente
55
Respuesta breve y útil, sin dolor de cabeza cuando importa archivos svg externos para proyectar.
CodeToLife
2
exactamente lo que estaba buscando :)
Mohamed Nageh
55
El Nextbotón siempre está deshabilitado. alguna idea de por qué?
mrid
Entonces, ¿cómo cambiamos el color del svg?
Oniya Daniel
Funciona de maravilla. ¡Agradable!
sud007
19

ACTUALIZACIÓN: NO use esta respuesta anterior, mejor use esto: https://stackoverflow.com/a/39266840/4031815

Ok, después de algunas horas de investigación, encontré que svg-android es bastante fácil de usar, así que dejo aquí las instrucciones paso a paso:

  1. descargue lib de: https://code.google.com/p/svg-android/downloads/list La última versión al momento de escribir esto es:svg-android-1.1.jar

  2. Poner jar en libdir.

  3. Guarde su archivo * .svg en res/drawabledir (en Illustrator es tan fácil como presionar Guardar como y seleccionar svg)

  4. Codifique lo siguiente en su actividad utilizando la biblioteca 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());
    



Puede reducir el código repetitivo como este

Muy fácil, hice una clase simple para contener código pasado y reducir el código repetitivo, como este:

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

Ahora puedo llamarlo así en actividad:

    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
fuente
3
Debería considerar marcar su propia respuesta como aceptada en lugar de la anterior
Cliff Burton el
1
Cuando intento agregar archivos SVG, recibo un error que dice: Error: el nombre del archivo debe terminar con .xml o .png
Sujay UN
1
¿Por qué es imageView static? Veo una gran bandera roja de bichos aquí. 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 hace referencia contiene thunderImageView
DSchmidt
@DSchmidt que es solo un puntero a la vista de imagen. Si fuera mi código, haría que toda la clase sea estática con un método llamado LoadSVG. y como puede ver, no tiene sentido cargar datos en variables privadas a las que no se puede acceder.
Nasreddine Galfout
14

Android Studio es compatible con SVG desde 1.4 en adelante

Aquí hay un video sobre cómo importar .

Pradeep Mahdevu
fuente
Esta es la mejor respuesta. ¡Android Studio lo hace súper fácil!
dustinrwh
5

En lugar de agregar bibliotecas que aumenten el tamaño de tu apk, te sugeriré que conviertas Svg a dibujable usando http://inloop.github.io/svg2android/ . y agregue vectorDrawables.useSupportLibrary = trueen gradle,

Sanny Nagveker
fuente
3

Pruebe el complemento SVG2VectorDrawable. Vaya a Preferencias-> Complementos-> Examinar complementos e instale SVG2VectorDrawable. Ideal para convertir archivos caídos a vectores dibujables. Una vez que haya instalado, encontrará un icono para esto en la sección de la barra de herramientas a la derecha del icono de ayuda (?).

Rahul Thakur
fuente
No funciona para mí: la ruta del archivo SVG ni siquiera se carga en el complemento. La mejor respuesta anterior es mucho más simple y hace el trabajo.
DaveNOTDavid el
Gran complemento: ¡convirtió rápidamente muchos svg en vectores dibujables!
Morten Holmgaard el
2
  1. necesitas convertir SVG a XML para usar en un proyecto de Android.

1.1 puede hacer esto con este sitio: http://inloop.github.io/svg2android/ pero no admite todas las características de SVG como algunos gradientes.

1.2 puede convertir a través de Android Studio, pero puede usar algunas características que solo son compatibles con API 24 y superior que pueden bloquear su aplicación en dispositivos más antiguos.

y agregue el vectorDrawables.useSupportLibrary = truearchivo gradle y use así:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. use esta biblioteca https://github.com/MegatronKing/SVG-Android que admite estas características: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

agregue este código en la clase de aplicación:

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

y usa el SVG así:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_red"/>
sajad abbasi
fuente
¿Por qué usar un cargador SVG cuando tienes el enfoque directo de @ Pallavi? ¿Hay alguna ventaja de usar un cargador?
Taslim Oseni
@Taslim las funciones compatibles es más que la forma habitual. puedes ver las funciones compatibles y ver.
sajad abbasi
0

1) Haga clic con el botón derecho en el directorio dibujable, luego vaya a nuevo y luego a los activos vectoriales 2) cambie el tipo de activo de clip art a local 3) explore su archivo 4) dé el tamaño 5) luego haga clic en siguiente y listo Su svg utilizable se generará en dibujable directorio

Syed Ovais Hussain
fuente