写给美工看的xml资源简介

写给美工看的xml资源简介

在android的最新版本中，比如6.0,7.0，用了大量的矢量图片，格式为xml文件格式，实际上是从svg转换而来的，第一次接触这类在资源的美工会有些困惑，在这里说明一下。

svg

svg是一种矢量图格式，它的历史大家可以自己去查一下，可以用很多软件做，也可以用记事本打开，如下图，

打开后能够看到这样的内容：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="图层_1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="96px" height="96px"
     viewBox="0 0 96 96" xml:space="preserve">
<rect x="18.446" y="21.786" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="25.107" height="19.42"/>
<rect x="36.687" y="33.695" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="20.494" height="17.167"/>
<rect x="49.348" y="45.712" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="20.708" height="17.167"/>
<rect x="57.181" y="56.228" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="18.884" height="16.953"/>
<rect x="9.326" y="48" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="21.674" height="30.009"/>
</svg>

xml

xml的历史大家可以自己去查，当一个开发人员说需要一种xml格式的资源时，实际上他需要的就是svg，svg可以通过类似下面的工具转换为xml格式的代码，如：

转换完成后能看到这样的代码：

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

    <path
        android:fillColor="#FFFFFF"
        android:strokeColor="#000000"
        android:strokeMiterLimit="10"
        android:pathData="M 18.446 21.786 H 43.553 V 41.206 H 18.446 V 21.786 Z" />
    <path
        android:fillColor="#FFFFFF"
        android:strokeColor="#000000"
        android:strokeMiterLimit="10"
        android:pathData="M 36.687 33.695 H 57.181 V 50.862 H 36.687 V 33.695 Z" />
    <path
        android:fillColor="#FFFFFF"
        android:strokeColor="#000000"
        android:strokeMiterLimit="10"
        android:pathData="M 49.348 45.712 H 70.056 V 62.879 H 49.348 V 45.712 Z" />
    <path
        android:fillColor="#FFFFFF"
        android:strokeColor="#000000"
        android:strokeMiterLimit="10"
        android:pathData="M 57.181 56.228 H 76.065 V 73.181 H 57.181 V 56.228 Z" />
    <path
        android:fillColor="#FFFFFF"
        android:strokeColor="#000000"
        android:strokeMiterLimit="10"
        android:pathData="M 9.326 48 H 31 V 78.009 H 9.326 V 48 Z" />
</vector>

如何预览一个xml资源？

通过上面的代码，大家能够看到，好像差不多，都是对图形的描述：路径，描边颜色，填充颜色等等。
svg除了上面展示的代码，也会已这样的形式出现：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="图层_1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="96px" height="96px"
     viewBox="0 0 96 96" xml:space="preserve">
<path d="M 18.446 21.786 H 43.553 V 41.206 H 18.446 V 21.786 Z"
style="fill:#FFFFFF;stroke:#000000;stroke-width:1"/>

<path d="M 36.687 33.695 H 57.181 V 50.862 H 36.687 V 33.695 Z"
style="fill:#FFFFFF;stroke:#000000;stroke-width:1"/>

<path d="M 49.348 45.712 H 70.056 V 62.879 H 49.348 V 45.712 Z"
style="fill:#FFFFFF;stroke:#000000;stroke-width:1"/>

<path d="M 57.181 56.228 H 76.065 V 73.181 H 57.181 V 56.228 Z"
style="fill:#FFFFFF;stroke:#000000;stroke-width:1"/>

<path d="M 9.326 48 H 31 V 78.009 H 9.326 V 48 Z"
style="fill:#FFFFFF;stroke:#000000;stroke-width:1"/>

</svg>

这样对比一下xml代码，就非常明白了，最简单预览xml就是随便找一个svg文件，将对应path的值替换到svg里，然后正在style中设置填充颜色和描边就可以预览了。

通过android studio预览xml

通过android studio预览xml更好，可以解决图形初始大小设置错误导致的问题。可以让开发同时帮忙。

svg转换xml时容易出现的问题

svg要在填充时需要注意，可能转换为xml后原本空白的区域会被填充，这时得确认一下作图时是如何填充的。

另外，svg图形的 viewBox=”0 0 96 96”，如果前两位不是0,0，可能会提示错误，也会导致转换后图形填充有误。