SVG图像——Android 5.0新特性介绍(1)

本文将介绍什么是SVG图像,及如何在Android中使用SVG及一些简单的SVG动画。

什么是SVG?

SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形。它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降。下面这个图片展示了SVG和位图的区别,左边的位图在放大后出现了锯齿,而右边的SVG任然清晰。svg_cp

 

为什么要使用SVG?

  • 节约空间,使用方便

因为SVG可以任意缩放而图像任保持清晰的特点,且在android里SVG是在运行时才进行渲染的,它会根据屏幕的dpi自动缩放到合适的大小,所以我们仅仅用一个SVG文件就可以代替多个不同dpi的drawable了!下面给出一个用SVG的android logo代替多种dpi的drawable的占用空间大小对比.svg_size_cp

  • 用XML就可以写出一些简单的动画。下面会给例子

如何在Android中使用?

  • 把普通SVG图片转成Android可用格式:

有两种方法,手动改一下原始SVG的格式,或者用一个自动转换的工具(Android SVG to VectorDrawable)

下面展示一下,这个图像的SVG文件内容t

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 180 400" width="180px" height="320" preserveAspectRatio="none">
    <path d="M 180,230 L 0,320 0,0 180,0 z" fill="#000000"/>
</svg>

path是画出这个矢量图所需的笔画路径,这里就是移植到android所需要的关键部分。下面来看转换成android能用SVG图内容,这里我将重点讲解

sharp_rect.xml

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

    <path
        android:name="sharp_rect"
        android:fillColor="#000000"
        android:pathData="M 180,230 L 0,320 0,0 180,0 z" />
</vector>

注意到和普通SVG图内容不同地方在与viewBox那变成了viewportWidth,viewportHeight,viewport就相当于画这个SVG的画布大小。width和height是规定这个SVG图像最终的显示大小的,一般用dp表示。第二个不同是有一个普通SVG里的fill到android里要变成fillColor,这里就是SVG图像填充的颜色。第三点不同是,普通SVG的path的数据是d开头的标签,在android里要写成pathData。综上所述,只要把viewBox的大小改成viewport的大小,把填充颜色的fill改成fillColor,把Path中的d,改成pathData就行了。

还有最后一个问题pathData中的那些奇怪的东西是啥?数字是在viewport中的坐标点,M代表move to(把画笔移动到),L是Line(划线),Z是封闭path.(更多参考

我们可以通过上面的变动手动把普通SVG转成android用的VectorDrawable,或者我们可以用这个网站自动完成转换 http://inloop.github.io/svg2android/

 

  • 显示

这个SVG就直接就是Drawable直接用就好:

<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:padding="20dp"
                tools:context=".MainActivity">
         <ImageView
            android:src="@drawable/sharp_rect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />        
</RelativeLayout>

 

下一篇文章将介绍一个使用SVG图像动画的例子: )

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>