Android使用 SVG 资源文件（一）

这里就不介绍背景了，直接说说在 Android 中如何使用 SVG资源吧！

使用步骤：

1、SVG资源的源文件

要使用 SVG资源，我们首先得有 svg 资源，在哪里找呢，有很多工具能够生成 SVG资源，比如omnigraffle图形编辑器，我这里生成好了一张 SVG资源的图片



用浏览器打开之后可以看到它的代码



我们所要的就是path 之后的 svg 代码，把它拷贝到我们的代码中

M 6.783868 184 C 6.783868 184 7.349524 160.57912 14.131572 157.31086 C 19.783036 155.677 29.389906 150.7756 31.085964 149.68606 C 32.78275 148.59634 32.78093 143.14954 32.78093 143.69422 C 32.78093 144.23854 20.34669 156.22168 11.870586 156.22168 C 29.9572 140.971 27.130012 136.06888 27.130012 136.06888 C 27.130012 136.06888 12.434786 147.50698 9.04267 146.41762 C 24.302642 132.80062 26.565084 126.26464 26.565084 126.26464 C 26.565084 126.26464 7.349524 136.06888 0 132.25594 C 17.523324 127.35418 22.044022 88.13767 22.044022 88.13767 C 22.044022 88.13767 25.998882 52.18906 28.82607 45.6529 C 29.9572 39.66178 41.26122 -2.27822 91.564273 4.80244 C 141.86809 11.88328 134.52148 75.06544 134.52148 76.69959 C 134.52148 78.333574 135.65042 76.15482 135.65042 81.056866 C 135.65042 85.95886 133.3898 88.13767 133.3898 88.13767 C 133.3898 88.13767 135.65133 93.584493 135.65133 102.84378 C 133.955276 101.20983 133.3898 98.486374 132.259764 100.12038 C 131.69538 106.656376 130.0006 105.022426 126.6083 117.54976 C 126.041916 124.0861 133.955276 128.98804 136.78028 128.98804 C 131.12918 131.16676 140.1713 132.80062 140.1713 132.80062 C 140.1713 132.80062 159.38686 135.52402 166.17091 139.88164 C 172.95351 144.23908 181.43398 169.29364 181.99854 182.91064 C 182.56402 183.99982 6.783868 184 6.783868 184 Z

到这里我们的 svg 资源就已经准备就绪了，接下就是在代码中使用它

2、编写 vector drawable 资源文件

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

    <path android:fillColor="#410a0a0a"
        android:pathData="@string/pretty_girl"/>

</vector>

这里解释一下这几个属性；

android:width=”600dp” 实际显示的宽度为600dp

android:height=”600dp” 实际显示的高度为600dp

android:viewportHeight=”512” 矢量限定的宽度为512，这没有单位；

android:viewportWidth=”512” 矢量限定的高度为512

其实以上两个属性，就是我们 svg 图片的宽高



android:pathData=”@string/pretty_girl”，即 图片内容的path路径，path 中的值一般不会超过viewportHeight 和 viewportWidth的值，在这里就是不会超过512

3、运用，与其他 drawable 资源文件一样，直接设置 View 的背景或者 ImageView 的 src 资源

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/id_img"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pretty_girl"/>

</RelativeLayout>

运行之后效果图如下：



到这里算是大功告成！但是，这个效果只有 Android5.0及之后的版本才支持，所以，研究它没多大意义，就目前而言没多大意义！所以我就在想，能否让低版本的系统也能够支持 SVG矢量图呢？答案是肯定的。下一篇 Android使用 SVG 资源文件（二）会给大家讲解，如何在低版本中使用 SVG文件，如果对 SVG有兴趣的朋友可以继续关注。

这里就不贴代码了，因为只有在 Android5.0以上的系统中才能跑。