美文网首页CodeEase高级AndroidAndroid 动画
Vectors时代(1) - SVG格式缩减应用图像

Vectors时代(1) - SVG格式缩减应用图像

作者: SpikeKing | 来源:发表于2015-12-28 09:29 被阅读1397次

欢迎Follow我的GitHub, 关注我的简书. 其余参考Android目录.

时代在发展, 技术在进步, Android的Vector图像的时代已经到来. 在Google的最新支持库v23.2中, AppCompat类已经使用Vector图像, 使得AAR包减少9%, 大约70KB, 惠及所有高版本的应用. 当然我们也可以使用Vector, 瘦身应用. Vector图像是SVG格式在Android的表现形式. SVG图像适应屏幕, 图片较小, 还有很多优点, 参考.

关于Vectors的分析, 主要分为两节:
(1) 使用SVG图片生成Vector图像, 缩减应用体积, 参考.
(2) 绘制Vector图像的动画, 在Android 5.0(21)以上系统使用, 参考.

本文是第一节, 关于Vector图像.

SVG: Scalable Vector Graphics, 可缩放矢量图形.
IRI: Internationalized Resource Identifiers, 国际化资源标识符.

本文源码的Github下载地址.


下载SVG格式的图片.

新建项目, 空白项目显示图片.

Android Studio 2.0
路径: File -> New -> Vector Asset -> Local SVG file

Load SVG

勾选重置图片大小左右布局适配.

drawable文件夹中, 就会发现.xml格式的图片.

代码中导入图片.

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:src="@drawable/homer_simpson"/>

显示


显示

如果是非AS2.0版本, 我们可以使用在线网站转换.
网址: http://inloop.github.io/svg2android/

上传SVG图片, 生成代码.


Online

勾选删除空组添加变换.

可以下载在线图片, 也可以在drawable文件夹中, 创建.xml文件, 粘贴代码.
使用方式与自动生成的类似, 直接添加即可.


通过观察发现, 均是500x500的图片:
自动生成的SVG图片是20KB, 在线生成的SVG图片是29KB.
而PNG(放大的系统图片)要732KB, 由此得知SVG图片还是非常节省内存的.
对于一些较大的App, 使用SVG图片有很大的吸引力.

OK, that's all! Enjoy it.

相关文章

  • Vectors时代(1) - SVG格式缩减应用图像

    欢迎Follow我的GitHub, 关注我的简书. 其余参考Android目录. 时代在发展, 技术在进步, An...

  • SVG矢量图打造不规则自定义控件,可点击的中国地图

    1、SVG概念: SVG是一种图像文件格式,类似PNG,JPG。只不过PNG这种图片需要图像引擎加载,SVG则是由...

  • Android SVG

    1、SVG概念SVG是一种图像文件格式,类似于PNG JPG。只不过PNG这种图片需要图像引擎加载,SVG则是由画...

  • SVG 学习笔记

    SVG概述 SVG : 可缩放矢量图形,使用 XML 格式定义图像。 SVG in HTML 直接嵌入HTML文档...

  • SVG学习笔记

    一. SVG是什么? SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。 SVG ...

  • Android SVG

    SVG 意为可缩放矢量图形(Scalable Vector Graphics)。SVG 使用 XML 格式定义图像...

  • Svg 前端实践总结

    SVG 意为可缩放矢量图形(Scalable Vector Graphics)。SVG 使用 XML 格式定义图像...

  • SVG实现不规则图形点击

    SVG概念 SVG是一种图像文件格式,类似于PNG,JPG。只不过PNG需要图像引擎加载,SVG则是由画布来加载。...

  • 2. SVG

    SVG SVG: Scaleable Vector Graphics 可伸缩矢量图形,这种图像格式在前端中已经使用...

  • 网页制作 SVG vs PNG vs JPG:图像格式优点和缺点

    SVG vs PNG vs JPG:图像格式优点和缺点 在为网络和其他数字用途创建图像时,哪种文件格式会给您带来最...

网友评论

  • 攻城狮Song:http://www.imooc.com/video/5815
    android 5.X的特性学习。其中有讲解 :blush: SVG的使用和使用工具话SVG图。
    SpikeKing: @攻城狮Song 谢谢啦!共同进步!
    攻城狮Song:关注博主你好久了 。 :smile:
    SpikeKing:@攻城狮Song :+1: :+1:
  • 小彤花园:遇到了问题,在使用library 23.2,在demo里边是可以的,加到项目中的时候,不知道是不是跟其他的包相互影响到了。看了StackOverFlow中他们遇到的问题基本上是跟其他的support包的版本有关系,然后我把所有的android的Support的包升级到了最新,还是不行,在4.4.4上有占位,但是不显示图片,报错的时候提示ResourceNotFoundException,看了官方博客,说没有打开aapt flag的时候才会报那个错误,我用的1.5版本的gradle,也加上了需要加的东西,不知道为什么还是不行😂
    SpikeKing:@小彤花园 那有三点,一个是图像有问题,一个存放位置,一个是支持库了,库最上面会覆盖下面的,库也需要和编译版本匹配。
    小彤花园:@SpikeKing 自带的没问题,5.0以上都没问题
    SpikeKing:@小彤花园 Android系统自带的有问题吗?
  • 小彤花园:最近再用这个
    SpikeKing:@小彤花园 赞赞的!
  • _MoveForward:有没有人可以分享一下怎么做svg的图片
  • __Berial___:有api版本限制吧?
    __Berial___:@CLWang 3Q
    SpikeKing:@__Berial___ minSdkVersion 7
  • 曾樑:这挺不错的,会不会有不能显示的问题,SVG好像还没用过
    SpikeKing:@曾樑 可以测一下, 我用5.0和4.4测了一下, 没啥问题, 不知道其他的了.

本文标题:Vectors时代(1) - SVG格式缩减应用图像

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