Android中使用SVG

作者: 因为我的心 | 来源:发表于2020-08-06 15:27 被阅读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知识梳理

本文标题：Android中使用SVG

本文链接：https://www.haomeiwen.com/subject/taozrktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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之前

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android知识梳理