android svg 编辑器,Android svg 格式使用小结

目录

[toc]

使用SVG的方案

svg格式是一般UI能提供的矢量图片,优点是可以放大缩小不会失真,加载快速,减少存储.Android 从5.0开始支持矢量图.

对于客户提供的svg格式的图片,由于客户提供svg格式目的是,他们需要根据主题来更换颜色,我们该如何使用,目前我试出了几个方案:

将svg格式转换为png格式,按照png格式图片来使用.由于需要跟换多种颜色,所以就需要将svg格式手动修改颜色值后保存多个png图片.

将svg格式转换为android 能个使用的矢量图格式,然后建立多个矢量图xml文件,里面颜色值不同

同样将svg格式转换未android 矢量图xml,xml中的颜色采用主题颜色,这个图片可以根据主题改变颜色

svg 转换 png

svg 转换成 png ,网上有很多资源,不在叙述. svg格式可以直接使用文本编辑器打开,可以修改里面颜色值,这样就可以保存未多个png图标,后续android 使用资源,安装png图片使用即可.

svg 转换 xml文件

android 5.0 以后添加了VectorDrawable 类对 svg格式进行支持,但android里面使用的矢量图格式与标准svg格式不一样,需要转换成android使用的xml文件.

可以采用两种方法来转换,

使用github上的开源项目,SVG2Android：这是Git上的开源项目，clone下来后在浏览器中打开index即可使用。也可以直接打开网页http://inloop.github.io/svg2android/ 在线提供转换

使用Android Studio 里面提供的工具,Vector Asset 也提供转换,但是我使用下来转换颜色值经常出错.具体使用路径:新建一个工程,在res目录右键 new -> Vector Asset -> local file

[图片上传失败...(image-e0e850-1553590736765)]

使用导入后会生成一个xml文件:

android:width="100dp"

android:height="100dp"

android:viewportWidth="100"

android:viewportHeight="100">

android:fillColor="#1e9fe0"

android:pathData="M50,0 C77.6142,0,100,22.3858,100,50 C100,77.6142,77.6142,100,50,100

C22.3858,100,0,77.6142,0,50 C0,22.3858,22.3858,0,50,0 Z" />

android:fillColor="#fff"

android:pathData="M84.39,47 L28.86,24.6 A3.56,3.56,0,0,0,24,28.52 L26.6,43.52

A3.09,3.09,0,0,0,29.4,46.07 L77.4,49.86 L29.4,53.64 A3.09,3.09,0,0,0,26.6,56.19

L24,71.19 A3.57,3.57,0,0,0,28.85,75.12 L84.39,52.7 A3.09,3.09,0,0,0,84.39,47 Z" />

Android Studio 转换后 第二个path里面颜色值错了,应该是白色的,不清楚是怎么回事,但是在线转化是正确的,这个要人工检查下.

如果是需要修改颜色,修改里面fillcolor的代码就可以.

动态修改svg 颜色

如何动态修改矢量图的颜色,网上一般提供的方法是修改矢量图fillcolor(只适用与只有一个颜色代码)setColorFilter,或者图标的背景值.

如果有多个fillcolor需要动态修改,有两种方式修改:

1 github提供一个库,可以查找path name,然后update 该path的颜色.

AndroidStudio 可以使用第三方库，可以按名字提取出path，单独来改变属性：VectorChildFinder

2.在style中预设样式：

#ee9fe0

#fff

#1e9fe0

#fff

3.更改VectorDrawable,

?attr/svgbackgroud ,

?attr/svgfront：

android:width="24dp"

android:height="24dp"

android:viewportWidth="100"

android:viewportHeight="100">

android:fillColor="?attr/svgbackgroud"

android:pathData="M50,0 C77.6142,0,100,22.3858,100,50 C100,77.6142,77.6142,100,50,100

C22.3858,100,0,77.6142,0,50 C0,22.3858,22.3858,0,50,0 Z" />

android:fillColor="?attr/svgfront"

android:pathData="M84.39,47 L28.86,24.6 A3.56,3.56,0,0,0,24,28.52 L26.6,43.52

A3.09,3.09,0,0,0,29.4,46.07 L77.4,49.86 L29.4,53.64 A3.09,3.09,0,0,0,26.6,56.19

L24,71.19 A3.57,3.57,0,0,0,28.85,75.12 L84.39,52.7 A3.09,3.09,0,0,0,84.39,47 Z" />

4.代码中动态改变：

ib_image = (ImageButton) findViewById(R.id.imageButton2);

ib_image.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Log.d("wentao","adfadfasdf touchState:"+touchState);

changeColor(touchState);

if(touchState){

touchState = false;

ContextThemeWrapper wrapper = new ContextThemeWrapper(mContext, R.style.BlueScene);

final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_sendiconon_pink, wrapper.getTheme());

ib_image.setImageDrawable(drawable);

}else{

touchState = true;

ContextThemeWrapper wrapper = new ContextThemeWrapper(mContext, R.style.PinkScene);

final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_sendiconon_pink, wrapper.getTheme());

ib_image.setImageDrawable(drawable);

}

}

});

矢量图使用进阶

阿里的项目

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

iconfont的简单使用,目前android使用还是有限制,只能支持单色,所以我们的项目还是支持不了

iconfont在Android中的使用官网已经做了非常详细介绍http://www.iconfont.cn/help/detail?helptype=code使用起来也很简单,我总结了几步：

首先在我的项目中新建一个自己的项目;

从iconfont平台选择要使用到的图标或者本地导入svg图片到项目中；

下载代码,把iconfont.svg和iconfont.ttf文件导入到项目中的assets文件夹中；

用TextView代替ImagerView，找到图标相对应的 HTML 实体字符码给textView设置；

textview设置大小跟颜色，图标的大小颜色也会改变(这里大小最好用dp为单位，这样不会随着手机字体大小的改变而改变图标的大小)；

为Textview设置指定的ttf文字；