android中SVG 的使用姿势

简介: android中SVG 的使用姿势

SVG(Scalable Vector Graphics,可伸缩矢量图形 )是W3C推出的一种开放标准的文本式矢量图形描述语言,它是基于XML、专门为网络而设计的图像格式,SVG是一种采用XML来描述二维图形语言,所以它可以直接打开xml文件来修改和编辑


在 Android 中如何使用 svg 呢,下面我们来看一下:


SVG 静态图


自定义 svg 图


1,创建 svg 格式的图


制作地址:https://svg.wxeditor.com/


在上面这个网站中可以在线创建 svg 图片,最后 ctrl + s 进行保存即可。


0a2653c851af460fa595bd959398a8f1.png


2,将 svg 转换为 vector Drawable


工具连接:https://pan.baidu.com/s/1bp9HANH


使用转换工具,将上面创建好的图片导入到转换工具,然后进行格式转换。


2d65d23f6d4748949b924e4057485923.png


点击圈起来的地方进行导入 svg 格式文件,然后就会自动生成代码如下:


4cebaac233b3433da32a72337a77fc60.png


3,使用


然后复制这些代码,打开 as,在 drawable 文件夹下创建一个 xml 文件,并粘贴这些代码


<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="580dp"
    android:height="400dp"
    android:viewportWidth="580"
    android:viewportHeight="400">
    <path
        android:fillColor="#fff"
        android:pathData="M -1 -1 H 581 V 401 H -1 V -1 Z" />
    <path
        android:fillColor="#ff0000"
        android:fillAlpha="0.5"
        android:strokeColor="#bf0000"
        android:strokeAlpha="0.5"
        android:strokeWidth="1.5"                 android:pathData="M126,150.584091l113.826691,0l35.173309,-108.134872l35.17334,108.134872l113.82666,0l-92.087524,66.830261l35.17511,108.134872l-92.087585,-66.832062l-92.08757,66.832062l35.175156,-108.134872l-92.087578,-66.830261z" />
</vector>


解释一下:


fillColor:填充颜色


strokeColor:线颜色


fillAlpha:填充透明度


strokeAlpha:线透明度


StorkeWidth:线宽度


PathData:路径值,根据值来画图片


image.png


即可使用,如下


0a2653c851af460fa595bd959398a8f1.png


svg 是自适应的


注意,android 5.0 一下好像不支持 svg


使用 as 自带的 svg 图片


在drawable文件夹上右键->new->Vector Asset


选择要使用的图片,可以设置大小 和 透明度


创建成功后就可以再 drawable 文件夹中看到了。


svg 动画效果


1,用到了 SVG 静态图


2,用到了动画


下面看一下简单使用:


首先看一下 svg 图


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="580dp"
    android:height="400dp"
    android:viewportWidth="580"
    android:viewportHeight="400">
    <path
        android:name="star_back"
        android:fillColor="#000000"
        android:pathData="M -1 -1 H 581 V 401 H -1 V -1 Z" />
    <path
        android:name="star"
        android:fillColor="#ff0000"
        android:fillAlpha="0.5"
        android:strokeColor="#bf0000"
        android:strokeAlpha="0.5"
        android:strokeWidth="1.5"
        android:pathData="M126,150.584091l113.826691,0l35.173309,-108.134872l35.17334,108.134872l113.82666,0l-92.087524,66.830261l35.17511,108.134872l-92.087585,-66.832062l-92.08757,66.832062l35.175156,-108.134872l-92.087578,-66.830261z" />
</vector>


然后是 animated-vector


<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/star">
<!-- animated-vector 相当于一个桥梁,静态的 svg 和 动画之间的桥梁-->
<target
    android:animation="@animator/star_in"
    android:name="star"/>
</animated-vector>


接着看一下 target。注意他的 name 和 svg 中 path 的 name 是相同的。


然后 animation 值的是动画 如下:


<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:propertyName="trimPathEnd"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType">
</objectAnimator>


使用:


<ImageView
       android:id="@+id/image_main"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:src="@drawable/star"/>


final AnimatedVectorDrawable drawableIn = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.star_d_in);
        final AnimatedVectorDrawable drawableOut = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.star_d_out);
        final ImageView imageView = (ImageView) findViewById(R.id.image_main);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (flag) {
                    imageView.setImageDrawable(drawableIn);
                    drawableIn.start();
                    flag = false;
                } else {
                    imageView.setImageDrawable(drawableOut);
                    drawableOut.start();
                    flag = true;
                }
            }
        });


imageView.setImageDrawable(drawableOut);
                drawableOut.start();
                flag = true;
            }
        }
    });


目录
打赏
0
0
0
0
0
分享
相关文章
【Android 安装包优化】Android 中使用 SVG 图片 ( 批量转换 SVG 格式图片为 Vector Asset 矢量图资源 )
【Android 安装包优化】Android 中使用 SVG 图片 ( 批量转换 SVG 格式图片为 Vector Asset 矢量图资源 )
684 0
【Android 安装包优化】Android 中使用 SVG 图片 ( 批量转换 SVG 格式图片为 Vector Asset 矢量图资源 )
【Android 安装包优化】Android 中使用 SVG 图片 ( 使用 appcompat 支持库兼容 5.0 以下版本的 Android 系统使用矢量图 )
【Android 安装包优化】Android 中使用 SVG 图片 ( 使用 appcompat 支持库兼容 5.0 以下版本的 Android 系统使用矢量图 )
289 0
【Android 安装包优化】Android 中使用 SVG 图片 ( 使用 appcompat 支持库兼容 5.0 以下版本的 Android 系统使用矢量图 )
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )(二)
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )(二)
190 0
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )(二)
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )(一)
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )(一)
454 0
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )(一)
svg矢量图绘制以及转换为Android可用的VectorDrawable资源
项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Graphics))来做图标,而系统状态栏图标多是用vectorDrawable绘制,所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable xml图标。
2271 0
Android L New API之Verctor动画 1 —— SVG Path
导入 1、VectorDrawable是Android L中新增的一个API,让你可以创建基于XML的矢量图,并结合AnimatedVectorDrawable来实现动画效果。 2、Android L新增支持Vector标签,可以使用Path创建动画,同时支持SVG格式。
752 0

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
    51
  • 2
    Android历史版本与APK文件结构
    129
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    4
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    10
  • 6
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    40
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 9
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    1
  • 10
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    29
  • 1
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    25
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    29
  • 3
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    29
  • 4
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    40
  • 5
    Android历史版本与APK文件结构
    129
  • 6
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 7
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    27
  • 8
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    60
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    40
  • 10
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等