Android中使用SVG

一、前言：

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

系统自带剪贴图：

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350