手把手教学， android 使用 SVG

最新推荐文章于 2024-05-18 19:36:12 发布
最新推荐文章于 2024-05-18 19:36:12 发布
阅读量383 收藏 1
点赞数 1
文章标签： python 移动开发
原文链接：https://my.oschina.net/u/1177694/blog/844691
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

简单介绍:

SVG在Web上的应用非常广泛，在Android 5.X之前的Android版本上，大家可以通过一些第三方开源库来在Android中使用SVG。而在Android 5.X之后，Android中添加了对SVG的<path>标签支持。从而让开发者可以使用SVG来创建更加丰富的动画效果。

1.什么是svg

  • 可伸缩矢量图形

  • 定义用于网络的基于矢量的图形

  • 使用XML格式定义图形

  • 万维网联盟的标准

  • 与诸如DOM和XSL之类的W3C标准是一个整体

图像在放大或改变尺寸的情况下其图形质量不会有所损失

针对最后一点说一下，可能大家对SVG没那么熟悉，那么拿一个大家熟悉的Bitmap来跟SVG作个比较。Bitmap通过在每个像素点上存储色彩信息来表达图像，而SVG是一个绘图标准。与Bitmap相比，SVG最大的优点就是放大不会是真。而且Bitmap需要为不同分辨率设计多套图标，而矢量图则不需要。

2.<path>标签

SVG可使用<path>标签来创建，为了提高大家兴趣，先看看使用效果图

1474263366713079611.png

Paste_Image.png

加入我想要上图左上角的那个箭头，就可以用<path>来画，再也不用网上找图片了。这里留个悬念，后面再说说怎么画。

简单介绍一下<path>标签，大家粗略地看一下就好：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)：三次贝赛曲线
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射前面路径后的终点
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

有几点要注意：

  • 坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。

  • 所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系

  • 指令和数据间的空格可以省略

  • 同一指令出现多次可以只用一个

3.Android中使用SVG

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

  • VectorDrawable

  • AnimatedVectorDrawable

其中，VectorDrawable让你可以创建基于XML的SVG图形，并结合AnimatedVectorDrawable来实现动画效果。

首先来讲讲VectorDrawable的使用：
在Android Studio中我们可以用独特的姿势创建SVG，如下图

1474263366838025357.png

Paste_Image.png

点击Vector Asset后可以看到：

1474263366885059343.png

Paste_Image.png

英文不好朋友我给大家翻译一下：
Local SVG file : 可以选择本地的SVG文件
Material Icon : 可以选择自带的SVG
Resource name : 当然就是xml文件的名字
Size : 图片大小
Override defalut size from Material Design  : 勾选后替代默认的大小
Opactity : 透明度
Enable atuo mirroring for RTL layout : 用于镜像显示

我们可以在 Material Icon 下choose一个箭头

1474263366979090017.png

Paste_Image.png

然后自动生成xml文件

01.<vector 

02.xmlns:android="http://schemas.android.com/apk/res/android"    

03.android:width="24dp"    

04.android:height="24dp"    

05.android:viewportHeight="24.0"    

06.android:viewportWidth="24.0">    

07.<path        

08.android:fillColor="#FFFFFF" 

09.android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />

10.</vector>

在preview里面可以看到效果

1474263441730050456.png

Paste_Image.png

其中包含两组宽高属性，分别具有不同含义。width，height表示该SVG图形的具体大小，而viewportHeight，viewportWidth表示SVG图形划分比例。后面在绘制path时所使用的参数，就是根据这两个值来进行转换，比如上面的代码，将24dp划分为24份，如果在绘制图形时使用坐标(12,12)，则意味着该坐标位于该SVG图形正中间。所以，如果width，height的比例与viewportHeight，viewportWidth的比例不一致，就会使图形发生压缩，形变。

<path>标签内我们看看：
pathData 就是绘制SVG图形所用到的指令。
fillColor 这个属性表明绘制出来的是一个填充的图形，我在这个属性里设了一个白色，如果想要绘制一个非填充的图形，可以使用 strokeColor 。

1474263441776069319.png

Paste_Image.png

然后我们只需在控件里使用这个xml文件就行了

1.<TextView 

2.android:layout_width="wrap_content" 

3.android:layout_height="match_parent" 

4.android:drawableLeft="@drawable/ic_arrow_back_black_24dp" />

再来说说AnimatedVectorDrawable

AnimatedVectorDrawable 的作用是给 VectorDrawable 提供动画效果。在XML文件中通过<animated-vector>标签来声明对 AnimatedVectorDrawable 的使用，并指定其作用的<path>或<group>。

举个例子，线性动画:

我们先创建一个静态的 VectorDrawable ,取名为 line.xml

01.<?xml version="1.0" encoding="utf-8"?>

02.<vector xmlns:android="http://schemas.android.com/apk/res/android" 

03.android:width="200dp"    

04.android:height="200dp"    

05.android:viewportHeight="100"    

06.android:viewportWidth="100">

07.<group>

08.<!-- 如果指定属性为 pathData，

09.则要添加一个属性 android:strokeLineCap="pathType", 

10.来告诉系统进行pathData变换-->

11.<path

12.android:name="path1"

13.android:pathData="

14.M 20,80

15.L 50,80 80,80"

16.android:strokeColor="#000"

17.android:strokeLineCap="round"

18.android:strokeWidth="5" />

19.<path

20.android:name="path2"

21.android:pathData="

22.M 20,20

23.L 50,20 80,20"

24.android:strokeColor="#000"

25.android:strokeLineCap="round"

26.android:strokeWidth="5" />

27.</group>

28.</vector>

在preview里面是这样子：

1474263504762073010.png

Paste_Image.png

在path1和path2分别绘制了两条直线，每条直线由三个点控制（ M 20,80 L 50,80 80,80），（ M 20,20  L 50,20 80,20），接下来创建两个 objectAnimator

1.<objectAnimator 

2.xmlns:android="http://schemas.android.com/apk/res/android" 

3.android:duration="500" 

4.android:interpolator="@android:anim/bounce_interpolator" 

5.android:propertyName="pathData" 

6.android:valueFrom="M 20,80 L 50,80 80,80" 

7.android:valueTo="M 20,80 L 50,50 80,50" 

8.android:valueTyoe="pathType"/>

1.<objectAnimator 

2.xmlns:android="http://schemas.android.com/apk/res/android" 

3.android:duration="500" 

4.android:interpolator="@android:anim/bounce_interpolator" 

5.android:propertyName="pathData" 

6.android:valueFrom="M 20,2 L 50,20 80,20" 

7.android:valueTo="M 20,80 L 50,50 80,50" 

8.android:valueType="pathType"/>

分别用来控制上面 VectorDrawable 里的 <path> 的位置(注意: objectAnimator 放在 res/animator 里)

最后写一个 animated-vector ,把  VectorDrawable 和 objectAnimator 连起来

01.<animated-vector 

02.xmlns:android="http://schemas.android.com/apk/res/android"

03.android:drawable="@drawable/line">

04.<target

05.android:name="path1"

06.android:animation="@animator/path1">

07.</target>

08. 

09.<target

10.android:name="path2"

11.android:animation="@animator/path2">

12.</target>

13.</animated-vector>

那么整个动画就写完了，接下来在布局文件中引用 VectorDrawable

1.<ImageView

2.android:id="@+id/iv"

3.android:layout_width="wrap_content"

4.android:layout_height="wrap_content"

5.android:src="@drawable/line"/>

然后在activity中

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

2.Drawable drawable = imageView.getDrawable();

3.if(drawable instanceof Animatable){

4.((Animatable) drawable).start();

5.}

运行代码，可以看见两条线慢慢从中间断开，最后形成"X"状

1474263644342047935.png

Paste_Image.png

关于动画我就做这个小小的演示，大家先了解个大概，还有更酷炫的轨迹动画就不详细讲了。有关动画如果有人想看的话往后抽个空我再写。下面教大家一些实用的技巧。

找一个带svg的网页，按F12查看代码

1474263644388004322.png

Paste_Image.png


可以看到上图<svg>对应的是“语音”这个图标，右键选择 作为HTML编辑

1474263644467081144.png

Paste_Image.png


可以看到<svg>的全部代码

1.<svg width="1024" height="1024" viewBox="0 0 1024 1024">

2.<g class="transform-group">

3.<g transform="translate(0, 28) scale(1, -1) scale(0.03125, 0.03125)">

4.<path d="M827.246871 444.924581c-12.94994 0.588401-23.925922-9.432837-24.51637-22.382776-0.093121-2.062985-0.418532-6.353708-1.106194-12.542664-1.170662-10.54824-2.959402-22.35924-5.490038-35.106566-7.226588-36.413328-18.898419-72.794933-35.917024-106.534362-47.672766-94.508467-126.925784-150.334937-248.217245-150.71663-121.290437 0.381693-200.546525 56.208163-248.217245 150.71663-17.018605 33.739429-28.692482 70.120011-35.919071 106.534362-2.529613 12.747325-4.317329 24.558325-5.487991 35.106566-0.687662 6.188956-1.014096 10.479679-1.108241 12.542664-0.588401 12.94994-11.564383 22.971178-24.514323 22.382776-12.951987-0.588401-22.973224-11.564383-22.382776-24.51637 0.5137-11.339256 2.63092-30.394241 7.446599-54.654784 8.000208-40.316218 20.946055-80.665181 40.051181-118.537743 51.840692-102.776781 138.972145-167.127392 265.456884-175.017082l0-85.599563L291.185872-13.400962c-12.96529 0-23.473621-10.510378-23.473621-23.473621 0-12.96529 10.508331-23.473621 23.473621-23.473621l441.857477 0c12.963243 0 23.473621 10.508331 23.473621 23.473621 0 12.963243-10.510378 23.473621-23.473621 23.473621L534.272259-13.400962l0 85.454254c127.791501 7.209192 215.690434 71.734788 267.86063 175.162392 19.104103 37.872562 32.050973 78.221526 40.051181 118.537743 4.815679 24.260543 6.930853 43.315528 7.446599 54.654784C850.217025 433.360198 840.197834 444.33618 827.246871 444.924581zM510.171352 195.80785c106.568131 0 193.353706 86.506213 193.353706 193.220676L703.525058 635.128551c0 106.59269-86.567611 193.220676-193.353706 193.220676-106.570177 0-193.353706-86.508259-193.353706-193.220676l0-246.100024C316.817646 282.432767 403.385257 195.80785 510.171352 195.80785zM363.764887 635.128551c0 80.693834 65.674769 146.273435 146.407488 146.273435 80.8197 0 146.407488-65.570391 146.407488-146.273435l0-246.100024c0-80.69588-65.674769-146.273435-146.407488-146.273435-80.8197 0-146.407488 65.568345-146.407488 146.273435L363.764887 635.128551z" fill="#737383"></path>

5.</g>

6.</g>

7.</svg>

 

接下来打开SVG转换工具：http://oss.chengxingyao.cn/svg2android/index.html
把<svg>复制到上面，就能自动生成xml，可以看到下图左下角的“语音”图标

1474263678639020293.png

Paste_Image.png


用SVG还有一个优点就是体积相对于普通的图片文件要小，就拿上面的“箭头”作为例子

1474263678795014278.png

Paste_Image.png

1474263678842069399.png

Paste_Image.png

png文件2.93KB, svg 335字节，而且还能自适应，是不是要爱上svg了。
那么今天就说到这里了，最后放出一些svg开源图库。

https://xituqu.com/335.html#comments
http://www.iconfont.cn/collections?spm=a313x.7781069.0.0.fEW4eG&personal=1
http://www.iconsvg.com/

 

转载于:https://my.oschina.net/u/1177694/blog/844691

weixin_33851604
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 中使用svg图片
01-20
为了在Android中使用SVG，可以将SVG文件转换为Android支持的Vector Drawable格式。有一些在线工具，如[https://editor.method.ac/](https://editor.method.ac/) 和 [http://svg.zhangningning.com.cn/]...
SVG在Android上的使用
u012693479的博客
05-21 6361
阿里巴巴图片库：https://www.iconfont.cn/collections/detail?cid=9638 一：什么是SVG SVG是指可伸缩矢量图形 (Scalable Vector Graphics)，它不同于传统的位图（像GIF、JPEG、PNG等都是位图图像格式），不是通过存储图像中每一点的像素值来保存与使用图形，而是通过 XML 文件来定义一个图形，通过一些特定的语法和规则来绘制出我们所需的图像——同样是使用一张图片，SVG 的方式是事先定义好怎么去画这个图，然后等要用的时候再把它
Android使用svg矢量图
hnlgzb的专栏
06-30 1674
多个svg转换android的vector，下载svg2vector-cli-1.0.1.jar。在Android中通过Vector实现对svg的支持，根节点为<vector>。然后就会在drawable文件夹里生成一个根节点为vector的xml文件。SVG 使用 XML 格式定义图形，标准svg根节点为<svg>获得一张svg需要先进行转换才能在android当中使用。一般转载都是怕 好的文章 博主后续删了，所以才转载。xml的使用方式跟正常的icon使用方式差不多。有了，试了 可以，不错。
Android动画(五)：SVG动画
最新发布
kayyoo的博客
05-18 1136
SVG动画
Android之 SVG绘制
qq_29848853的博客
09-05 1138
Android之SVG绘制
Android高级UI进阶之路(七)——SVG基础使用（绘制中国地图）
金戈鐡馬
03-08 2796
前面陆陆续续写了几篇 高级 UI 系列文章 ，感觉还不错。因为工作内容原因作者对 UI 开发涉及的很少，所以打算写一点关于 UI 的文章，也算是给自己一个全面的复习。本篇文章还是 基本概念 + 实战来讲解。更多Android系列教程上传在GitHub：这里一定要注意在低版本上使用 SVG 存在兼容问题，需要各自查阅资料解决。
Android中使用SVG实现炫酷动画效果
11-27
- **使用AndroidSVG库**：首先在项目中添加依赖，然后通过`SVG.parse()`方法解析SVG文件，再用`SVGDrawable`转换为可绘制对象，最后将其设置到ImageView或其他视图。 - **使用VectorDrawable**：从Android 5.0...
svg转换成Android 可用的vector
07-02
然而，Android原生支持的是XML格式的VectorDrawable，所以当我们手头有一个SVG文件时，需要将其转换为Android可使用的VectorDrawable格式。 本教程将指导你如何将SVG转换为Android可用的VectorDrawable资源。 首先...
Android-使用Glide在Android中加载SVG
08-13
本篇将详细讲解如何在Android应用中使用Glide加载SVG图像。 首先，我们需要了解SVG的基本概念。SVG是一种基于XML的图形语言，它可以描绘出各种形状、线条和路径，并且支持渐变、透明度和动画。由于SVG图像的特性，...
androidsvg-1.4.jar
07-04
开源库AndroidSVG 支持在Android中显示SVG绘制的图片 github 地址 :https://github.com/BigBadaboom/androidsvg
Android 使用SVG动画
2401_84149855的博客
04-14 978
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。面试过程一定要有礼貌！
svg-android: 在Android上渲染SVG矢量图形
gitblog_00017的博客
03-17 394
svg-android: 在Android上渲染SVG矢量图形 svg-android是一个开源库，它允许你在Android应用中渲染可缩放向量图形（SVG）。通过将SVG文件转换为可绘制对象，你可以轻松地在你的Android应用中包含高质量、可缩放的图像。 使用场景 svg-android可以用于以下场合： 高分辨率显示：SVG是一种基于向量的图形格式，可以在任何分辨率下保持清晰度。这意味着你...
推荐一款Android上使用的SVG库 - svg-android
gitblog_00083的博客
03-17 576
推荐一款Android上使用的SVG库 - svg-android svg-android是一个开源的Android SVG图形解析库。 项目介绍 svg-android是一个用于在Android平台上解析和渲染SVG矢量图像的库。它提供了一个简单的API，使得开发人员可以在Android应用中轻松地使用SVG图形。 SVG（Scalable Vector Graphics）是一种基于XML...
高级 UI 成长之路 (七) SVG 基础使用 + 绘制中国地图
2301_82241647的博客
04-02 509
我坚信，坚持学习，每天进步一点，滴水穿石，我们离成功都很近！以下是总结出来的字节经典面试题目，包含：计算机网络，Kotlin，数据结构与算法，Framework源码，微信小程序，NDK音视频开发，计算机网络等。字节高级Android经典面试题和答案既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！
Android SVG矢量资源的使用方法
chenhuakang的博客
03-31 550
Android SVG矢量资源的使用方法
Android-高级-UI-进阶之路-(七)-SVG-基础使用-+-绘制中国地图
m0_64382950的博客
12-09 690
给 path 定义 name,如下所示 定义一个 Animator 文件，以表示对这幅 Vector 图像做动画 <?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android=“http://schemas.android.com/apk/res/android” android:propertyName=“trimPathStart” android:valueFrom=“1” android:valu.
android svg
09-03
最常用的方法是使用第三方库，例如 AndroidSVG、Svg-android 和 AndroidSVG Library。这些库提供了用于解析和渲染 SVG 图像的类和方法。 要在 Android 应用程序中使用 SVG 图像，首先需要将 SVG 文件保存在项目的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值