安卓优雅的svg实践绚丽效果

            现在随着安卓6.0的出现，安卓的6.0系统完胜ios9.0前不久出了9.1，然后苹果手机的销量大降，特别是11.11的到来，哈哈，我大天朝的iphone6s和6sPlus价格还是讲了不少，最近互联网是风起云涌，什么苹果ox和ios要搞一起，醉了，这和win10与windowsPhone截然相反啊，一个是移动端牛逼一个是pc端牛逼，然后谷歌想要回到中国，阿里是各种收购，加上今年经济不好互联网各种裁员，我们还能干什么，码代码去吧。

       说实话安卓5.0没有出来的时候我还不知道svg是什么东西，看了效果感觉很牛逼的样子，然后各种动画都能很好的实现，奇怪了贝塞尔曲线怎么和这东西搭上了，然后我们就有必要来了解下svg，打破我们安卓的传统jpeg、png、gif格式了。

        1.jpg、png的重新认识

        首先总的来说他们是位图，所以我们安卓中Bitmap(位图)常使用jpg和png的图片格式作为位图的加载资源，但是两者还是有区别：

       jpg:

     可以用不同的压缩比例对这种文件压缩，其压缩技术十分先进，对图像质量影响不大，因此可以用最少的磁盘空间得到较好的图像质量。由于它优异的性能，所以应用非常广泛，而在Internet上，它更是主流图形格式。

     png：

PNG（Portable Network Graphics）是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点。PNG最大色深为48bit，采用无损压缩方案存储。著名的Macromedia公司的Fireworks的默认格式就是PNG。

   所以鉴于以上两者我们的安卓一般使用png格式。随着5.0到6.0在谷歌发布的出现，我们出现了SVG的格式，是不是感觉狠兴奋因为他是矢量图，所以我们再也不需要为屏幕适配去做多套图了，而且动画你再也不会那么苦恼了。

  svg:

   1.可收缩的矢量图像    2.使用xml格式定义图片 3.w3c的标准

   所以这种格式在html5上用的比较多，而且html5越来越火并且提供了svg、canvase标签,是不是感觉安卓和html5又融合的那么紧密了，在5.x前我们可以用第三方开源库，5.x后可以直接配置xml文件，当然我们必须知道svg图片的path，是不是觉得和安卓canvase里面的path联系起来，然后svg最大的好处就是放大不会失真。

   算了不扯淡了，说这么多还不如安卓里面来实践一把。

   2.安卓中使用svg

   首先我们得要一张svg格式的矢量图，怎么简单怎么来吧，先来一个获取简单的svg图片的方法，我们安卓开发都有一些素材图库，我一般就去阿里巴巴图库（http://www.iconfont.cn/），里面的图标随便选，估计你开中也用得到，然后图片格式还真的有png、ai、svg，然后填充色和大小我们自己设置，不扯了，我们的svg图片就算搞好了。

 这里我们选择了一个大手掌

   或者你随便下一张png的图片，用GIMP工具来做svg图片（当然工具很多，看你喜欢那个），不会用看教程把，反正我们得到的是一个.svg的图片,用Notepad打开使这个样子：

然后我们就需要它里面的path节点数据，哈哈准备工作就搞好了，然后我们就来android studio里面开干了。很显然图片太大，显示不全。

改后的

path="m 80.145756,18.079285 c -2.64395,0.587868 -6.72977,2.35147 -9.25343,4.041053 -6.12834,4.187661 -8.7715,9.257363 -8.652,16.604037 0,4.996161 0.60143,6.612198 3.84603,10.800336 6.84927,9.110279 20.42753,11.975595 31.24312,6.612201 13.818834,-6.83283 16.342504,-22.996086 5.287124,-32.69423 -2.884524,-2.498079 -13.097904,-6.538654 -16.342504,-6.465111 -0.72093,0.07354 -3.48517,0.514324 -6.12834,1.101714 l 0,0 z m 64.648284,3.085947 c -4.56619,0.587867 -15.26149,7.126522 -18.62559,11.387727 -5.76749,7.200065 -5.52613,16.383884 0.60142,22.040978 5.40741,4.922616 17.5438,6.979436 27.03703,4.554901 12.73782,-3.232559 22.47083,-15.134611 19.46602,-23.509932 -3.48439,-9.330907 -16.70101,-16.016647 -28.47888,-14.473674 z M 29.675616,48.936843 c -6.36891,1.322346 -13.33847,6.244962 -15.74185,10.946949 -4.8067498,9.624599 -3.00402,17.485598 5.4074,23.363318 6.12912,4.18814 10.21417,5.28985 19.22703,4.84907 9.61273,-0.44126 15.74184,-3.01288 20.18774,-8.59595 2.88374,-3.52673 3.2446,-4.922613 3.2446,-10.726793 0,-5.289851 -0.48115,-7.200064 -2.64395,-9.624599 -3.96553,-4.701987 -8.17086,-7.346674 -14.90063,-9.403974 -7.08984,-2.203905 -8.17086,-2.203905 -14.78034,-0.808021 z M 174.71557,59.295924 c -9.01207,2.791774 -13.45719,9.036731 -13.45719,18.955026 0,7.34715 1.56216,10.80034 6.12834,14.03289 5.04655,3.52721 12.49725,5.06923 21.99047,4.62845 8.77073,-0.44126 13.4572,-1.91022 17.30322,-5.28986 3.96476,-3.52625 5.04655,-6.61267 5.04655,-14.10595 0,-5.95127 -0.36008,-7.200068 -3.36489,-10.653252 -4.92625,-5.730637 -11.29516,-8.301781 -21.62961,-8.595954 -5.76826,-0.146609 -9.13314,0.147086 -12.01689,1.02865 l 0,0 z M 97.569266,73.62251 c -7.93106,2.20439 -12.61754,4.62844 -17.90465,9.33091 -7.08985,6.31802 -13.69855,10.65277 -28.11881,18.29362 -21.87019,11.53481 -26.43637,15.86956 -26.55666,24.83274 -0.24057,10.80082 9.97359,20.35188 24.27357,22.84948 8.29114,1.46943 29.80125,1.10219 45.90318,-0.88204 12.497244,-1.46895 24.994504,-1.10171 40.255984,1.24976 15.38099,2.35051 32.4452,2.35051 41.21749,0 16.58229,-4.55538 25.11478,-18.44166 18.14445,-29.90293 -1.92224,-3.15854 -4.3264,-5.14277 -9.85331,-8.3013 -17.30322,-9.77217 -36.89031,-22.115 -43.13894,-27.25777 -6.96956,-5.73064 -14.17969,-9.477516 -21.26875,-10.873404 -6.37048,-1.322823 -16.82521,-1.02865 -22.953554,0.660934 z m 3.605464,20.49848 c 1.56216,0.58739 1.80195,4.11412 2.1628,22.77545 l 0.36008,22.0405 -14.299204,0 c -17.54457,0 -24.39384,-1.10171 -30.52219,-4.92214 -5.64797,-3.52672 -6.96955,-5.80417 -6.96955,-11.60835 0,-5.65709 1.32158,-8.08163 6.36891,-11.24064 6.36813,-4.1146 11.41545,-5.28985 22.47083,-5.28985 l 9.61273,0 0,-12.4904 4.56697,0 c 2.40337,0 5.287114,0.36772 6.248624,0.73543 l 0,0 z m 24.03299,23.2893 c 0,13.37148 0.12029,13.44455 12.85733,13.44455 l 8.7715,0 0,-23.50946 14.66084,0 -0.48037,14.03242 c -0.48035,17.77977 0.72094,16.82467 -21.62882,16.82467 -16.82365,0 -20.30804,-0.58787 -24.875,-4.11412 -2.28387,-1.83715 -2.52366,-2.86532 -2.52366,-14.25352 0,-6.75881 0.36008,-12.48945 0.84122,-12.71007 0.36007,-0.2937 3.3641,-0.51433 6.6087,-0.51433 l 5.76826,0 0,10.79986 0,0 z m -52.632954,-3.45223 c -6.72898,2.49713 -9.13236,7.93406 -5.76748,12.85668 2.40338,3.38012 7.57021,4.92262 16.10193,4.62844 l 6.84927,-0.22015 0,-18.36764 -6.6087,-0.22063 c -4.92704,-0.14708 -7.57099,0.22063 -10.57502,1.3233 z"

下面就是VectorDrawable的写法

xml version="1.0" encoding="utf-8"?>
    <vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="480dp"
        android:height="480dp"
        android:viewportHeight="480"
        android:viewportWidth="480">

        <path
            android:fillColor="#eb4f38"
            android:pathData="M 80.145756,18.079285 c -2.64395,0.587868 -6.72977,2.35147 -9.25343,4.041053 -6.12834,4.187661 -8.7715,9.257363 -8.652,16.604037 0,4.996161 0.60143,6.612198 3.84603,10.800336 6.84927,9.110279 20.42753,11.975595 31.24312,6.612201 13.818834,-6.83283 16.342504,-22.996086 5.287124,-32.69423 -2.884524,-2.498079 -13.097904,-6.538654 -16.342504,-6.465111 -0.72093,0.07354 -3.48517,0.514324 -6.12834,1.101714 l 0,0 z m 64.648284,3.085947 c -4.56619,0.587867 -15.26149,7.126522 -18.62559,11.387727 -5.76749,7.200065 -5.52613,16.383884 0.60142,22.040978 5.40741,4.922616 17.5438,6.979436 27.03703,4.554901 12.73782,-3.232559 22.47083,-15.134611 19.46602,-23.509932 -3.48439,-9.330907 -16.70101,-16.016647 -28.47888,-14.473674 z M 29.675616,48.936843 c -6.36891,1.322346 -13.33847,6.244962 -15.74185,10.946949 -4.8067498,9.624599 -3.00402,17.485598 5.4074,23.363318 6.12912,4.18814 10.21417,5.28985 19.22703,4.84907 9.61273,-0.44126 15.74184,-3.01288 20.18774,-8.59595 2.88374,-3.52673 3.2446,-4.922613 3.2446,-10.726793 0,-5.289851 -0.48115,-7.200064 -2.64395,-9.624599 -3.96553,-4.701987 -8.17086,-7.346674 -14.90063,-9.403974 -7.08984,-2.203905 -8.17086,-2.203905 -14.78034,-0.808021 z M 174.71557,59.295924 c -9.01207,2.791774 -13.45719,9.036731 -13.45719,18.955026 0,7.34715 1.56216,10.80034 6.12834,14.03289 5.04655,3.52721 12.49725,5.06923 21.99047,4.62845 8.77073,-0.44126 13.4572,-1.91022 17.30322,-5.28986 3.96476,-3.52625 5.04655,-6.61267 5.04655,-14.10595 0,-5.95127 -0.36008,-7.200068 -3.36489,-10.653252 -4.92625,-5.730637 -11.29516,-8.301781 -21.62961,-8.595954 -5.76826,-0.146609 -9.13314,0.147086 -12.01689,1.02865 l 0,0 z M 97.569266,73.62251 c -7.93106,2.20439 -12.61754,4.62844 -17.90465,9.33091 -7.08985,6.31802 -13.69855,10.65277 -28.11881,18.29362 -21.87019,11.53481 -26.43637,15.86956 -26.55666,24.83274 -0.24057,10.80082 9.97359,20.35188 24.27357,22.84948 8.29114,1.46943 29.80125,1.10219 45.90318,-0.88204 12.497244,-1.46895 24.994504,-1.10171 40.255984,1.24976 15.38099,2.35051 32.4452,2.35051 41.21749,0 16.58229,-4.55538 25.11478,-18.44166 18.14445,-29.90293 -1.92224,-3.15854 -4.3264,-5.14277 -9.85331,-8.3013 -17.30322,-9.77217 -36.89031,-22.115 -43.13894,-27.25777 -6.96956,-5.73064 -14.17969,-9.477516 -21.26875,-10.873404 -6.37048,-1.322823 -16.82521,-1.02865 -22.953554,0.660934 z m 3.605464,20.49848 c 1.56216,0.58739 1.80195,4.11412 2.1628,22.77545 l 0.36008,22.0405 -14.299204,0 c -17.54457,0 -24.39384,-1.10171 -30.52219,-4.92214 -5.64797,-3.52672 -6.96955,-5.80417 -6.96955,-11.60835 0,-5.65709 1.32158,-8.08163 6.36891,-11.24064 6.36813,-4.1146 11.41545,-5.28985 22.47083,-5.28985 l 9.61273,0 0,-12.4904 4.56697,0 c 2.40337,0 5.287114,0.36772 6.248624,0.73543 l 0,0 z m 24.03299,23.2893 c 0,13.37148 0.12029,13.44455 12.85733,13.44455 l 8.7715,0 0,-23.50946 14.66084,0 -0.48037,14.03242 c -0.48035,17.77977 0.72094,16.82467 -21.62882,16.82467 -16.82365,0 -20.30804,-0.58787 -24.875,-4.11412 -2.28387,-1.83715 -2.52366,-2.86532 -2.52366,-14.25352 0,-6.75881 0.36008,-12.48945 0.84122,-12.71007 0.36007,-0.2937 3.3641,-0.51433 6.6087,-0.51433 l 5.76826,0 0,10.79986 0,0 z m -52.632954,-3.45223 c -6.72898,2.49713 -9.13236,7.93406 -5.76748,12.85668 2.40338,3.38012 7.57021,4.92262 16.10193,4.62844 l 6.84927,-0.22015 0,-18.36764 -6.6087,-0.22063 c -4.92704,-0.14708 -7.57099,0.22063 -10.57502,1.3233 Z"/>

    vector>

用的时候把它当image View好了

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

   <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:src="@drawable/svg"/>

RelativeLayout>

效果还是可以的：

svg作为图片，主要就是获取path麻烦点,然后

M = moveto   相当于 android Path 里的moveTo(),用于移动起始点
L = lineto   相当于 android Path 里的lineTo()，用于画线
H = horizontal lineto     用于画水平线
V = vertical lineto       用于画竖直线
C = curveto               相当于cubicTo(),三次贝塞尔曲线
S = smooth curveto        同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve             quadTo()，二次贝塞尔曲线
T = smooth quadratic Belzier curveto    同样二次贝塞尔曲线，更平滑
A = elliptical Arc   相当于arcTo()，用于画弧
Z = closepath     相当于closeTo(),关闭path

看了下path里面的属性是不是想到了安卓api的东西，然后要用到的自己百度