Cách dễ nhất để sử dụng SVG trong Android?


165

Tôi đã tìm thấy vô số thư viện để sử dụng svg trong Android và tránh việc tạo ra các độ phân giải khác nhau và thả các tệp cho mỗi độ phân giải, điều này trở nên rất khó chịu khi ứng dụng có nhiều biểu tượng hoặc hình ảnh.

Bất cứ ai cũng có thể tốt bụng đưa ra quy trình từng bước đơn giản nhất để sử dụng thư viện để sử dụng SVG trong Android, tôi chắc chắn điều này cũng sẽ giúp được nhiều người khác.

Ngoài ra, tôi sử dụng Android Studio và Illustrator để tạo biểu tượng và hình ảnh của mình.



Video ngắn về cách nhập svg trong studio android: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali

Câu trả lời:


336

Đầu tiên bạn cần nhập svgtệp bằng cách làm theo các bước đơn giản.

  1. Nhấp chuột phải vào drawable
  2. Bấm mới
  3. Chọn tài sản Vector

Nếu hình ảnh có sẵn trong máy tính của bạn thì chọn svgtệp cục bộ . Sau đó, chọn đường dẫn hình ảnh và một tùy chọn để thay đổi kích thước của hình ảnh cũng có sẵn ở bên phải hộp thoại nếu bạn muốn. bằng cách này, svghình ảnh được nhập vào dự án của bạn Sau đó để sử dụng hình ảnh này, hãy sử dụng quy trình tương tự

@drawable/yourimagename

5
Câu trả lời ngắn gọn và hữu ích, không phải đau đầu khi bạn nhập các tệp svg bên ngoài vào dự án.
CodeToLife

2
chính xác những gì tôi đang tìm kiếm :)
Mohamed Nageh

5
các Nextnút sẽ luôn bị tắt. bất cứ ý tưởng tại sao?
mrid

Vì vậy, làm thế nào để chúng ta thay đổi màu sắc của svg?
Oniya Daniel

Hoạt động như một lá bùa. Đẹp!
sud007

19

CẬP NHẬT: KHÔNG sử dụng câu trả lời cũ này, tốt hơn nên sử dụng câu trả lời này: https://stackoverflow.com/a/39266840/4031815

Ok sau vài giờ nghiên cứu tôi thấy svg-android khá dễ sử dụng, vì vậy tôi sẽ rời khỏi đây từng bước hướng dẫn:

  1. tải lib từ: https://code.google.com.vn/p/svg-android/doads/list Phiên bản mới nhất tại thời điểm viết bài này là:svg-android-1.1.jar

  2. Đặt bình trong libdir.

  3. Lưu tệp * .svg của bạn trong res/drawablethư mục (Trong phần minh họa dễ dàng như nhấn Save as và chọn svg)

  4. Mã sau đây trong hoạt động của bạn bằng thư viện 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());



Bạn có thể giảm mã soạn sẵn như thế này

Rất dễ dàng Tôi đã tạo một lớp đơn giản để chứa mã quá khứ và giảm mã soạn sẵn, như thế này:

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

Bây giờ tôi có thể gọi nó như thế này trong hoạt động:

    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
Bạn nên xem xét đánh dấu câu trả lời của riêng bạn là được chấp nhận thay vì câu trả lời trước đó
Cliff Burton

1
Khi tôi cố gắng thêm các tệp SVG, tôi nhận được thông báo lỗi, Lỗi: Tên tệp phải kết thúc bằng .xml hoặc .png
Sujay UN

1
Tại sao imageView staticvậy? Tôi thấy một lá cờ đỏ hugh ở đây. 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 không tham chiếu có chứa thunderImageView
DSchmidt

@DSchmidt đó chỉ là một con trỏ đến hình ảnh. Nếu đó là mã của tôi, tôi sẽ làm cho cả lớp tĩnh với một phương thức gọi là LoadSVG. và như bạn có thể thấy, không có điểm nào tải dữ liệu vào các biến riêng tư không thể truy cập được.
Nasreddine Galfout


5

Thay vì thêm các thư viện làm tăng kích thước apk của bạn, tôi sẽ đề nghị bạn chuyển đổi Svg thành drawable bằng cách sử dụng http://inloop.github.io/svg2android/ . và thêm vectorDrawables.useSupportLibrary = truevào lớp


3

Hãy thử Plugin SVG2VectorDrawable. Chuyển đến Preferences-> Plugins-> Duyệt Plugins và cài đặt SVG2VectorDrawable. Tuyệt vời để chuyển đổi tập tin sag sang vector drawable. Khi bạn đã cài đặt, bạn sẽ tìm thấy một biểu tượng cho phần này trong phần thanh công cụ ở bên phải biểu tượng trợ giúp (?).


Không hoạt động đối với tôi - đường dẫn tệp SVG thậm chí không được tải lên plugin. Câu trả lời tốt nhất ở trên đơn giản hơn nhiều, và hoàn thành công việc.
DaveNOTDavid

Plugin tuyệt vời - nhanh chóng chuyển đổi nhiều Svg's thành vector drawables!
Morten Holmgaard

2
  1. bạn cần chuyển đổi SVG sang XML để sử dụng trong dự án Android.

1.1 bạn có thể làm điều này với trang web này: http://inloop.github.io/svg2android/ nhưng nó không hỗ trợ tất cả các tính năng của SVG như một số độ dốc.

1.2 bạn có thể chuyển đổi qua studio android nhưng nó có thể sử dụng một số tính năng chỉ hỗ trợ API 24 và cao hơn là cuase đã làm hỏng ứng dụng của bạn trong các thiết bị cũ hơn.

và thêm vectorDrawables.useSupportLibrary = truevào tập tin gradle và sử dụng như thế này:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. sử dụng thư viện này https://github.com/MegatronKing/SVG-Android hỗ trợ các tính năng này: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

thêm mã này vào lớp ứng dụng:

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

và sử dụng SVG như thế này:

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

Tại sao nên sử dụng trình tải SVG khi bạn có cách tiếp cận thẳng của @ Pallavi? Có bất kỳ lợi thế để sử dụng một bộ tải?
Taslim Oseni

@Taslim các tính năng được hỗ trợ nhiều hơn cách thông thường. bạn có thể xem các tính năng được hỗ trợ và xem.
sajad abbasi

0

1) Nhấp chuột phải vào thư mục drawable sau đó chuyển sang new rồi chuyển đến tài sản vector 2) thay đổi loại tài sản từ clip art sang local 3) duyệt tập tin của bạn 4) cho kích thước 5) sau đó nhấp vào tiếp theo sau đó thực hiện Svg có thể sử dụng của bạn sẽ được tạo trong drawable danh mục

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.