如何将SVG转换成VectorDrawable XML资源

  • 转载自:https://blog.csdn.net/lupengfei1009/article/details/51079123

  • 首先给介绍一个网站,可谓是牛B闪闪:阿里巴巴矢量图标,有了它,麻麻再也不担心我没有图标了。如下图: 
    如何将SVG转换成VectorDrawable XML资源_第1张图片

  • 任意点击一个分组,可以见到如下各种详细的图标,我们可以根据自己的需求,调整不同的大小,然后下载图标。 
    如何将SVG转换成VectorDrawable XML资源_第2张图片

  • 当我们点击下载的时候,可以根据需要选择一种图标的颜色;但是我们会发现,有两个按钮,一个SVG,一个png,png就不用多说了,直接下载之后拽到自己的资源文件就好,这里我们选择SVG按钮。 
    如何将SVG转换成VectorDrawable XML资源_第3张图片

  • 然后会下载一个以.svg后缀的文件,如下图 
    如何将SVG转换成VectorDrawable XML资源_第4张图片

  • 在浏览器中打开这个文件,即可看下如下图标 
    如何将SVG转换成VectorDrawable XML资源_第5张图片

  • 看看该文件的源代码,是如下的XML文件

xml version="1.0" encoding="utf-8"?>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
style="width:308px;height:308px;" enable-background="new 0 0 1024 1024" height="1024px" id="图形"  version="1.1" viewBox="0 0 1024 1024" width="1024px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px" xml:space="preserve">
  class="svgpath" d="M512.332575 273.328156c5.904477 0 11.558244 2.375094 15.690354 6.591115L952.763562 713.294562c8.493441 8.66638 8.353248 22.576181-0.313132 31.070646-8.66638 8.491395-22.576181 8.354272-31.070646-0.313132L512.332575 326.687434 103.286388 744.052077c-8.488325 8.66638-22.402219 8.807596-31.070646 0.313132-8.66638-8.494465-8.80555-22.404266-0.311085-31.070646l424.736541-433.375292C500.774331 275.703249 506.427074 273.328156 512.332575 273.328156z" data-index="path_0" fill="#56abe4" />
  • 然而这个并不是android中能够使用的XML文件,如何将这个xml转化为一个android能使用的VectorDrawable资源呢。 
    首先介绍个工具:下载,解压后如下图,一个静态的网页: 
    如何将SVG转换成VectorDrawable XML资源_第6张图片

  • 在浏览器中打开index.html,效果如下: 
    如何将SVG转换成VectorDrawable XML资源_第7张图片

  • 点击蓝色框框住的按钮,然后选择刚刚下载的.svg文件,即可得到如下的转换: 
    如何将SVG转换成VectorDrawable XML资源_第8张图片

    红色框的那个单选按钮一定要选上,否则xml在android中将无效。

  • 然后点击download按钮保存该文件,就得到一个android能使用的VectorDrawable了 
    如何将SVG转换成VectorDrawable XML资源_第9张图片

  • xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="1024dp"
        android:height="1024dp"
        android:viewportHeight="1024"
        android:viewportWidth="1024">
    
    
                android:fillColor="#56abe4"
            android:pathData="M512.333,273.328 C518.237,273.328,523.891,275.703,528.023,279.919
    L952.764,713.295 C961.257,721.961,961.117,735.871,952.45,744.365
    C943.784,752.856,929.874,752.719,921.379,744.052 L512.333,326.687
    L103.286,744.052 C94.7981,752.718,80.8842,752.86,72.2157,744.365
    C63.5493,735.871,63.4102,721.961,71.9046,713.294 L496.641,279.919
    C500.774,275.703,506.427,273.328,512.333,273.328 Z" />
    
    • 使用方式及效果图如下: 
      如何将SVG转换成VectorDrawable XML资源_第10张图片

    • 调整大小。 
      默认的图片是1024*1024的,我们可以调整xml中的width和height去改变图片的大小,再也不用为了调个大小,还得去跪舔一遍UI妹子。 
      如何将SVG转换成VectorDrawable XML资源_第11张图片

    到这里,你是不是会觉得,这…这…还要个毛的UI啊!任意图标都不在话下……



你可能感兴趣的:(android基础)