A maneira mais fácil de usar SVG no Android?


165

Eu encontrei uma infinidade de bibliotecas para usar o svg no Android e evitar a criação frustrante de diferentes resoluções e a queda de arquivos para cada resolução, isso se torna muito irritante quando o aplicativo tem muitos ícones ou imagens.

Alguém pode ser gentil em fornecer um processo passo a passo da biblioteca mais simples de usar para usar SVG no Android, tenho certeza de que isso também ajudará muitos outros.

Também uso o Android Studio e o Illustrator para gerar meus ícones e imagens.



Vídeo curto sobre como importar svg no android studio: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali 7/18

Respostas:


337

Primeiro você precisa importar svgarquivos seguindo etapas simples.

  1. Clique com o botão direito do mouse no drawable
  2. Clique em novo
  3. Selecionar ativo de vetor

Se a imagem estiver disponível no seu computador, selecione o svgarquivo local . Depois disso, selecione o caminho da imagem e uma opção para alterar o tamanho da imagem também estará disponível no lado direito da caixa de diálogo, se você desejar. dessa maneira, a svgimagem é importada no seu projeto. Depois disso, para usar esta imagem, use o mesmo procedimento

@drawable/yourimagename

5
Resposta curta e útil, sem dor de cabeça ao importar arquivos svg externos para o projeto.
CodeToLife

2
exatamente o que eu estava procurando :)
Mohamed Nageh 6/17

5
o Nextbotão está sempre desativado. alguma idéia do porquê?
mrid

Então, como mudamos a cor do svg?
Oniya Daniel 27/09/18

Funciona como um encanto. Agradável!
sud007 6/03/19

19

ATUALIZAÇÃO: NÃO use esta resposta antiga, é melhor usar isso: https://stackoverflow.com/a/39266840/4031815

Ok, depois de algumas horas de pesquisa, achei o svg-android bastante fácil de usar, por isso estou deixando aqui instruções passo a passo:

  1. faça o download da lib em: https://code.google.com/p/svg-android/downloads/list A versão mais recente no momento da redação deste documento é:svg-android-1.1.jar

  2. Coloque o jar no libdiretório

  3. Salve seu arquivo * .svg no res/drawablediretório (no ilustrador é tão fácil quanto pressionar Salvar como e selecionar svg)

  4. Codifique o seguinte em sua atividade usando a 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());



Você pode reduzir o código padrão como este

Muito fácil, criei uma classe simples para conter código passado e reduzir o código padrão, desta forma:

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

Agora eu posso chamar assim na atividade:

    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
Você deve considerar a marcar a sua própria resposta como aceite em vez da anterior
Cliff Burton

1
Quando eu tentar adicionar arquivos SVG que estou recebendo erro dizendo: Erro: O nome do arquivo deve terminar com .xml ou .png
Sujay da ONU

1
Por que imageView static? Eu vejo uma bandeira vermelha do hugh aqui. SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain); SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder); não rainSVG referência contêm thunderImageView
DSchmidt

@ DSchmidt que é apenas um ponteiro para a visualização de imagem. Se fosse o meu código, tornaria a classe inteira estática com um método chamado LoadSVG. e como você pode ver, não há motivo para carregar dados em variáveis ​​privadas que não podem ser acessadas.
Nasreddine Galfout 30/06



3

Experimente o plug-in SVG2VectorDrawable. Vá para Preferências-> Plugins-> Procurar Plugins e instale o SVG2VectorDrawable. Ótimo para converter arquivos sag em vetor drawable. Após a instalação, você encontrará um ícone para isso na seção da barra de ferramentas, à direita do ícone de ajuda (?).


Não funciona para mim - o caminho do arquivo SVG nem é carregado no plug-in. A melhor resposta acima é muito mais simples e faz o trabalho.
precisa saber é o seguinte

Ótimo plugin - converteu rapidamente muitos svg's em drawables vetoriais!
Morten Holmgaard 13/04/19

2
  1. você precisa converter SVG para XML para usar no projeto android.

1.1, você pode fazer isso com este site: http://inloop.github.io/svg2android/, mas ele não suporta todos os recursos do SVG, como alguns gradientes.

1.2, você pode converter através do android studio, mas ele pode usar alguns recursos que oferecem suporte apenas à API 24 e superior que suportam o aplicativo em dispositivos mais antigos.

e adicione vectorDrawables.useSupportLibrary = trueno arquivo gradle e use assim:

<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 suporta esses recursos: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

adicione este código na classe de aplicativo:

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

e use o SVG assim:

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

Por que usar um carregador SVG quando você tem a abordagem direta da @ Pallavi? Existe alguma vantagem em usar um carregador?
Taslim Oseni 29/11

@ Taslim, os recursos suportados são mais do que o habitual. você pode ver os recursos suportados e ver.
Sajad abbasi

0

1) Clique com o botão direito do mouse no diretório drawable, vá para new e vá para os ativos vetoriais 2) altere o tipo de ativo do clip-art para o local 3) procure seu arquivo 4) especifique o tamanho 5) clique em próximo e pronto Seu svg utilizável será gerado em drawable diretório

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.