SVG在Android上的使用_android 使用svg

阿里巴巴图片库：https://www.iconfont.cn/collections/detail?cid=9638

一：位图和矢量图的概念

• 位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。多个像素的色彩组合就形成了图像，称之为位图（像GIF、JPEG、PNG等都是位图图像格式）。
• 矢量图又叫向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。

二：什么是SVG

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

三：SVG的代码实现

• svg代码：

但是在android中是不支持svg代码，具体教程可查看W3school：https://www.w3school.com.cn/svg/index.asp

<svg class="icon"
    height="100"
    p-id="2332"
    t="1621585217711"
    version="1.1"
    viewBox="0 0 1024 1024"
    width="100"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M519.37694695 3.190031l0 861.30841098L439.62616795 864.49844201 439.62616795 3.190031l79.750779 0z"
        fill="#337ab7"
        p-id="2333"></path>
    <path
        d="M599.12772595 823.028037L481.09657295 1024l-121.221184-200.971963 239.252337 0z"
        fill="#337ab7"
        p-id="2334"></path>
</svg>

• 在android studio中以Vector代码形式来显示svg图片：

说到矢量图，顺便讲下Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图，可以说Vector就是Android中的SVG实现(并不是支持全部的SVG语法,现已支持的完全足够用了)，其实svg格式再android studio的显示就是转为Vector

四：SVG和平时用的位图有什么区别

• SVG是需要显示的时候再把图形绘制出来,所以显示的时候肯定会耗费一些资源(但是位图也需要渲染,具体谁占用的资源更多,需要根据设备来看)
• 因为是用的时候实时绘制,所以SVG不适合太过复杂的图片
• SVG属于矢量图片,不怕缩放失真
• SVG使用代码绘制,文件比较小
• SVG的图像无法像位图图像那么细腻、多层次、多细节

    总结来看,如果是特定的icon图标或者一些不复杂的地方,使用SVG会更好

放几张图对比下：以下2张图片，分别是分别率为1024x1024的png和svg的图片，明显svg格式的图片大小不png小的多的多

以下图片是设置同样宽高的svg和png的2张图片，明显png格式的图片已经变得模糊了

五：SVG在Android中怎么用

 

    1：Android5.0（即API21）开始支持SVG

       对于大家minSDK19的开发习惯来说,还是有一些限制的,那怎么做像下兼容呢，这就涉及到了支持库，从AppCompat23.2开始，Google开始支持在低版本上使用Vector。（所谓的兼容也是个坑爹的兼容，即低版本非真实使用SVG,而是生成PNG图片）

       API查看网址：https://developer.android.google.cn/reference/android/graphics/drawable/VectorDrawable?hl=en

   2：5.0之前怎么使用SVG

      对于5.0之前的兼容，同样用的是VectorDrawable，兼容需要做到以下几点：

      1.Android Plugin for Gradle 2.0 or higher

      2.在项目的gradle文件中添加兼容库依赖23.2.0以上

dependencies {
  compile 'com.android.support:appcompat-v7:23.2.0'
}

    3.还需要打开一个兼容vectorDrawables的开关

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

完成以上3步，即可开始创建Vector了

注意：

a：如果我们没有设置 vectorDrawables.useSupportLibrary = true 的话，则在build项目的时候，gradle会为vcetor创建不同分辨率下的png序列，即预栅格化我们的vector为真正的png图片并会被加入到apk中，无形中增加了apk的大小。这也是官方提到的另一种vector向后兼容的一种方式，如果对性能要求高的，对apk大小要求不高的，可以用这种方式，毕竟手机在将vector栅格化的时候需要一些时间，比直接加载png的费时。下图为gradle自动将vector转化为不同分辨率的

以上的这个实在设置minSdkVersion 21 即最小兼容版本小于5.0以下时，未设置vectorDrawables.useSupportLibrary = true 出现的效果，在21以上不需要设置

b：在适配的最低版本小于5.0时，在没有设置vectorDrawables.useSupportLibrary = true时，调用和平常的png等的调用方式相同， 但是会将cector的图片转为png存在各个尺寸的drawable里）

      平常设置图片的方式有哪些呢：https://blog.csdn.net/u012693479/article/details/78211550

c：在测试的过程中，发现当适配的最低版本小于5.0时，运行在5.0以下的手机，且设置了vectorDrawables.useSupportLibrary = true时，在布局里不能用android:background和android:src 否则会奔溃，setImageResource可以正常使用，其他平常设置图片的方法不能正常使用

，如果是5.0以上的手机则都是正常的调用

 3：Vector Asset的使用

•       在点击File—>New—>Vector Asset ,也可在res—>New—>Vector Asset打开Configure Vector Asset窗口

其中Clip Art代表选择android studio自带的 Vector Drawale图片，Local file（SVG,PSD）代表加载本地存在的SVG,PSD格式的图片，将其转化为xml放于drawable文件中

• 【Clip Art（剪切图）】

Name：xml文件名称
Clip Art：可以选择AS自带的图标

Size：设置矢量图的大小
Color：设置矢量图的颜色
Opacity：设置不透明度
Enable auto mirroring for RTL layout：为RTL布局启用自动镜像

详细描述RTL模式：https://blog.csdn.net/NoMasp/article/details/52074538

这些是android Studio自带的Vector Drawale图片，搜索框盘边的2个选项分别为，左一：每个图标的不同类型，最右边：筛选不同类型的图标

 

• 【Local file（本地SVG文件或者PSD文件）】

Name：xml文件名称
Size：设置矢量图的大小
Opacity：设置不透明度
Enable auto mirroring for RTL layout：为RTL布局启用自动镜像
Path：选择本地矢量图（比如svg图片）
从本地导入上面预留好的svg文件，如下：
 

 最上边的箭头，引进来的SVG格式图片会转为xml格式，在drawable包下显示

<vector xmlns:android="http://schemas.android.com/apk/res/android"
 
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
  <path
      android:pathData="M519.38,3.19l0,861.31L439.63,864.5 439.63,3.19l79.75,0z"
      android:fillColor="#337ab7" />
  <path
      android:pathData="M599.13,823.03L481.1,1024l-121.22,-200.97 239.25,0z"
      android:fillColor="#337ab7"/>
</vector>

• 具体怎么调用呢

    1：最低版本设置为5.0以上 

       调用方式和普调的图片一样

    2：如果项目最低的版本要求是在5.0以下

      a: 则不要在xml里用android:background这个来调用vector的图片，否则app运行在5.0以下是会奔溃的，5.0以上不会

      b:Activity需继承AppCompatActivity,则可在布局中用ImageView,不是的话需用android.support.v7.widget.AppCompatImageView．
         加上xmlns:app=”http://schemas.android.com/apk/res-auto”,再将drawable设置到app:srcCompat如下：

<ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/ic_baseline_access_alarm_24" />

      Java代码设置 mImageView.setImageResource(R.drawable.ic_baseline_access_alarm_24);

     c:转成Drawable使用

     图片有时是需要转成Drawable来使用，如TextView中的Drawable．为了兼容Android L以下版本，需要按照以下方法进行转换．

• 方法一：

VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(), R.drawable.ic_baseline_backspace_24, null);

• 方法二：Activity中加静态代码块

static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

• 然后常规图片资源获得Drawable的方法去处理

  Drawable drawable = ContextCompat.getDrawable(this,R.drawable.ic_baseline_backspace_24);
      

• 如果没加静态代码块，５.0下会Crash.

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);的方法描述解释了如何兼容AndroidL下版本使用SVG与注意事项．
建议使用第一种方法，较灵活．

六：语法

具体语法详情见：https://www.cnblogs.com/yuhanghzsd/p/5466846.html