Android中使用SVG

2020-08-06 本文已影响0人因为我的心

一、前言：

1、 SVG是什么？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

2、 SVG有什么优势？

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

3、 SVG有什么缺点？

兼容不了4.0以下的版本。
它不可以被用来做自定义RatingBar（一个星星评分控件）的背景
SVG图是不支持硬件加速的（所以它不能用来做图片的占位图和错误图）；

二、Android中如何使用？

1、 Android 5.0之后

Google在Android 5.X中提供了两个新API支持SVG:

VectorDrawable 创建基于XML的SVG图形
AnimatedVectorDrawable 实现动画效果

2、VectorDrawable

①创建SVG的XML文件

image

②点击创建会出现下面的界面：
选择Android studio自带的图标，可以选择颜色，但是如果是本地的SVG图片，是不能在创建的时候更改图片颜色的

image

系统自带剪贴图：

image

创建完成之后，生成的xml文件如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

3、XML文件中属性说明

width，height 表示该SVG图形的具体大小，
viewportHeight，viewportWidth 表示SVG图形划分比例

如果将24dp划分为24份，如果在绘制图形时使用坐标(12,12)，则意味着该坐标位于该SVG图形正中间。
所以，如果width，height的比例与viewportHeight，viewportWidth的比例不一致，就会使图形发生压缩，形变。（此处参考文章：https://www.jianshu.com/p/5c81970ddf33）

path （X轴为横向向右的坐标轴，Y轴为竖向向下的坐标轴，（0，0）为中心点）

M M = moveto(X,Y) ：将画笔移动到（X,Y）坐标位置
L L = lineto(X,Y) ：画直线到（X,Y）坐标位置
H H = horizontal lineto(X)：画水平线到指定的X坐标位置
V V = vertical lineto(Y)：画垂直线到指定的Y坐标位置
C C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三阶贝赛尔曲线
S S = smooth curveto(X2,Y2,ENDX,ENDY)
Q Q = quadratic Belzier curve(X,Y,ENDX,ENDY)：二阶贝赛尔曲线
T T = smooth quadratic Belzier curveto(ENDX,ENDY)：映射
A A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z Z = closepath()：关闭路径

4、XML 使用

和一般的图片一样，直接src调用就可以

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <ImageView
        android:id="@+id/svg_img"
        android:src="@drawable/ic_arrow_back_black_24dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

5、不同主题更改颜色

package com.example.abc.svgtest;

import android.graphics.Color;
import android.support.graphics.drawable.VectorDrawableCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.svg_img);

        VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(),R.drawable.ic_arrow_back_black_24dp,getTheme());

        //需要更改的颜色
        vectorDrawableCompat.setTint(Color.GREEN);

        imageView.setImageDrawable(vectorDrawableCompat);
    }
}

或者可以在xml中更改颜色属性：
例如，下图是从本地选择的一张SVG图片

图片.png

对应的xml如下，可以看到每个有颜色的区域都有对应的色值，可自行更改；

<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#967245" android:pathData="M497.66,236.03c-3.58,-0.51 -6.14,-3.07 -6.14,-6.66 -1.54,-21.5 -6.14,-93.7 8.19,-106.5 3.58,-3.58 23.55,1.02 33.79,3.58 3.58,1.02 6.14,4.61 5.12,8.7 -10.24,54.78 -5.63,70.14 -3.07,96.77 0.51,4.61 -3.58,8.7 -8.19,8.19l-29.7,-4.1z"/>
    <path android:fillColor="#FFF278" android:pathData="M701.95,431.62c-17.92,-24.06 -23.55,-67.58 -26.11,-76.8 -38.91,-134.66 -162.82,-131.07 -162.82,-131.07S388.61,220.16 350.21,354.82c-2.56,8.7 -8.19,52.74 -26.11,76.8C266.24,508.93 107.01,823.81 422.4,950.78c16.9,6.66 31.74,12.8 53.76,7.68 12.29,-3.07 32.77,-3.58 37.38,-3.58 5.12,0 25.09,0.51 37.38,3.58 22.02,5.12 36.35,-0.51 53.76,-7.68 314.37,-126.98 155.14,-441.34 97.28,-519.17z"/>
    <path android:fillColor="#353942" android:pathData="M513.54,242.69c11.26,0 112.13,3.07 145.41,118.27 0.51,1.02 1.02,4.61 1.54,7.17 3.58,18.43 10.75,52.74 27.65,74.75 34.3,46.08 115.71,193.54 79.36,324.1 -20.99,74.75 -77.82,131.07 -169.98,168.45 -10.75,4.61 -20.48,8.19 -30.72,8.19 -4.1,0 -7.68,-0.51 -12.29,-1.54 -14.34,-3.58 -36.35,-4.1 -41.47,-4.1s-27.14,0.51 -41.47,4.1c-4.1,1.02 -8.19,1.54 -12.29,1.54 -10.75,0 -19.97,-3.58 -30.72,-8.19 -91.65,-36.86 -148.99,-93.7 -169.98,-168.45 -36.35,-130.56 44.54,-278.02 79.36,-324.1 16.9,-22.53 23.55,-56.83 27.65,-74.75 0.51,-3.07 1.02,-6.14 1.54,-7.17C399.36,245.76 500.22,242.69 511.49,242.69h2.05m0,-17.41h-1.02,-1.02c-11.26,0 -125.44,3.07 -162.3,131.07 -2.56,8.7 -8.19,52.74 -26.11,76.8C265.22,510.46 105.98,825.34 421.38,952.32c12.29,5.12 23.55,9.73 37.38,9.73 5.12,0 10.24,-0.51 15.87,-2.05 12.29,-3.07 32.77,-3.58 37.38,-3.58 5.12,0 25.09,0.51 37.38,3.58 5.63,1.54 11.26,2.05 15.87,2.05 13.82,0 25.09,-4.61 37.38,-9.73 314.88,-126.98 156.16,-441.86 98.3,-519.17 -17.92,-24.06 -23.55,-67.58 -26.11,-76.8 -35.84,-128 -149.5,-131.07 -161.28,-131.07z"/>
    <path android:fillColor="#353942" android:pathData="M510.46,139.78c2.56,0.51 5.63,1.02 9.73,1.54 -7.17,41.47 -5.12,59.9 -3.07,79.36l-8.7,-1.02c-2.56,-39.42 -1.02,-68.1 2.05,-79.87m-5.12,-17.92c-2.56,0 -4.61,0.51 -5.63,1.02 -14.34,13.31 -10.24,85.5 -8.19,106.5 0.51,3.58 3.07,6.14 6.14,6.66l29.7,3.58h1.02c4.1,0 7.68,-3.58 7.17,-8.19 -2.56,-27.14 -7.17,-41.98 3.07,-96.77 0.51,-3.58 -1.54,-7.68 -5.12,-8.7 -7.68,-1.54 -20.48,-4.1 -28.16,-4.1z"/>
    <path android:fillColor="#60ED58" android:pathData="M523.26,135.68s68.1,-115.2 206.34,-40.96c0,0 -71.68,101.38 -206.34,40.96z"/>
    <path android:fillColor="#353942" android:pathData="M637.95,64.51V81.92c20.48,0 43.01,6.14 66.05,17.92 -14.85,17.41 -45.06,44.54 -90.62,44.54 -19.97,0 -41.47,-5.12 -64,-15.36 14.34,-18.43 44.03,-47.1 89.09,-47.1l-0.51,-17.41m0,0c-76.8,0 -114.69,71.17 -114.69,71.17 34.3,19.46 64,26.62 89.6,26.62 78.34,0 116.22,-67.58 116.22,-67.58 -34.3,-22.02 -65.02,-30.21 -91.14,-30.21z"/>
    <path android:fillColor="#BDFFB8" android:pathData="M548.86,129.02s69.63,-72.19 155.14,-28.67c0,0 -86.02,-56.83 -155.14,28.67z"/>
    <path android:fillColor="#43CE38" android:pathData="M550.4,130.05s97.79,27.14 153.6,-29.7c0,0 -56.32,75.78 -153.6,29.7z"/>
    <path android:fillColor="#FFF18D" android:pathData="M548.86,248.32s80.38,80.38 88.58,126.46 30.21,76.8 30.21,76.8 163.33,382.46 -54.78,477.7c0,0 122.88,-43.01 155.65,-165.89s-49.15,-286.72 -77.31,-315.39c-28.67,-28.67 -27.65,-81.92 -35.84,-102.4 -8.19,-20.48 -38.91,-83.97 -106.5,-97.28z"/>
    <path android:fillColor="#FFF4FA" android:pathData="M548.86,248.32s91.65,34.3 102.4,122.88c5.63,46.59 35.84,86.53 35.84,86.53s188.93,270.85 -9.73,433.66c0,0 64,-27.65 90.62,-128 32.77,-122.88 -49.15,-286.72 -77.31,-315.39 -28.67,-28.67 -27.65,-81.92 -35.84,-102.4 -7.68,-20.48 -38.4,-83.97 -105.98,-97.28z"/>
    <path android:fillColor="#FFE161" android:pathData="M442.37,260.61s-61.44,81.41 -58.88,111.62c3.07,32.77 -28.16,81.41 -33.79,84.99 -5.63,3.07 -114.18,257.54 31.23,456.7 0,0 -145.92,-69.12 -131.07,-239.1 12.8,-146.94 86.02,-224.77 89.6,-233.47s14.85,-27.14 26.11,-77.82c13.31,-58.88 56.32,-94.72 76.8,-102.91z"/>
</vector>

三、 Android 5.0之前

需要在项目的BaseActivity或Application中加入这句代码

static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

转载链接：https://www.jianshu.com/p/b7c1ad018e1c

Android中使用SVG

一、前言：

1、 SVG是什么？

2、 SVG有什么优势？

3、 SVG有什么缺点？

二、Android中如何使用？

1、 Android 5.0之后

2、VectorDrawable

3、XML文件中属性说明

width，height 表示该SVG图形的具体大小，

viewportHeight，viewportWidth 表示SVG图形划分比例

path （X轴为横向向右的坐标轴，Y轴为竖向向下的坐标轴，（0，0）为中心点）

4、XML 使用

5、不同主题更改颜色

三、 Android 5.0之前

猜你喜欢

热点阅读