Android_SVG概述及生成使用SVG详解

标签： android svg svg | 发表时间：2015-11-14 06:46 | 作者：strawberry2013
出处：http://blog.csdn.net

1.效果图


2.SVG-Path路径

下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

请把下面的代码拷贝到记事本，然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。


3.图片生成SVG格式

这里推荐使用GIMP工具生成，具体步骤如下：




根据以上找到Path路径，将其保存起来


再到路径对话框中，将path导出


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="1.77778in" height="1.77778in"
     viewBox="0 0 128 128">
  <path id="选区"
        fill="none" stroke="black" stroke-width="1"
        d="M 108.54,26.04
           C 131.59,52.94 125.04,97.93 93.00,114.74
             79.15,122.00 75.25,122.17 60.00,122.00
             22.32,121.56 -2.52,80.38 8.75,46.00
             16.01,23.85 33.60,10.58 56.00,6.44
             75.35,3.96 95.68,11.04 108.54,26.04 Z
           M 56.97,45.15
           C 52.64,43.32 36.54,44.00 31.00,44.00
             31.00,44.00 31.00,76.00 31.00,76.00
             31.02,78.13 30.74,81.51 32.60,82.98
             34.49,84.47 42.35,84.00 45.00,84.00
             49.96,83.99 56.82,83.94 60.73,80.43
             66.36,75.36 66.06,66.13 56.97,63.00
             56.97,63.00 56.97,61.00 56.97,61.00
             65.30,56.20 63.38,47.91 56.97,45.15 Z
           M 75.00,47.00
           C 75.00,47.00 75.00,49.00 75.00,49.00
             75.00,49.00 90.00,49.00 90.00,49.00
             90.00,49.00 90.00,47.00 90.00,47.00
             90.00,47.00 75.00,47.00 75.00,47.00 Z
           M 53.69,50.02
           C 56.68,52.02 56.68,57.83 53.69,59.83
             51.13,61.53 42.36,61.00 39.00,61.00
             39.00,61.00 39.00,49.00 39.00,49.00
             42.16,49.00 51.36,48.47 53.69,50.02 Z
           M 90.00,71.00
           C 101.61,70.78 95.70,60.78 91.70,57.84
             81.22,50.14 65.06,59.66 68.95,74.00
             72.11,85.62 91.42,89.31 96.00,75.95
             89.20,76.54 82.26,84.08 76.93,75.95
             76.03,74.51 75.51,72.57 75.00,71.00
             75.00,71.00 90.00,71.00 90.00,71.00 Z
           M 91.00,67.00
           C 91.00,67.00 75.00,67.00 75.00,67.00
             77.80,56.34 89.44,55.99 91.00,67.00 Z
           M 48.00,65.14
           C 49.46,65.02 51.56,65.02 52.95,65.14
             57.94,66.90 59.11,73.01 55.57,76.57
             52.93,79.23 48.51,79.13 45.00,78.98
             42.86,78.89 40.68,78.89 39.60,76.69
             38.72,74.89 39.00,67.39 39.00,65.14
             39.00,65.14 48.00,65.14 48.00,65.14 Z" />
</svg>
如果找不到路径对话框，可根据下图找到



4.实现方式

这里使用 AndroidFillableLoaders框架加载svg，更多可以查看作者文章 http://jorgecastillo.xyz/2015/08/16/android-fillable-loaders/

<com.github.jorgecastillo.FillableLoader
  android:id="@+id/fillableLoader"
  android:layout_width="200dp"
  android:layout_height="100dp"
  app:fl_originalWidth="@integer/original_svg_width"
  app:fl_originalHeight="@integer/original_svg_height"
  app:fl_strokeColor="@color/stroke_color"
  app:fl_fillColor="@color/fill_color"
  app:fl_strokeWidth="@dimen/stroke_width"
  app:fl_strokeDrawingDuration="@integer/stroke_drawing_duration"
  app:fl_fillDuration="@integer/fill_duration"
  app:fl_clippingTransform="waves"
  />
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    String svg = "M 108.54,26.04\n" +
            "C 131.59,52.94 125.04,97.93 93.00,114.74\n" +
            " 79.15,122.00 75.25,122.17 60.00,122.00\n" +
            " 22.32,121.56 -2.52,80.38 8.75,46.00\n" +
            " 16.01,23.85 33.60,10.58 56.00,6.44\n" +
            " 75.35,3.96 95.68,11.04 108.54,26.04 Z\n" +
            "M 56.97,45.15\n" +
            "C 52.64,43.32 36.54,44.00 31.00,44.00\n" +
            " 31.00,44.00 31.00,76.00 31.00,76.00\n" +
            " 31.02,78.13 30.74,81.51 32.60,82.98\n" +
            " 34.49,84.47 42.35,84.00 45.00,84.00\n" +
            " 49.96,83.99 56.82,83.94 60.73,80.43\n" +
            " 66.36,75.36 66.06,66.13 56.97,63.00\n" +
            " 56.97,63.00 56.97,61.00 56.97,61.00\n" +
            " 65.30,56.20 63.38,47.91 56.97,45.15 Z\n" +
            "M 75.00,47.00\n" +
            "C 75.00,47.00 75.00,49.00 75.00,49.00\n" +
            " 75.00,49.00 90.00,49.00 90.00,49.00\n" +
            " 90.00,49.00 90.00,47.00 90.00,47.00\n" +
            " 90.00,47.00 75.00,47.00 75.00,47.00 Z\n" +
            "M 53.69,50.02\n" +
            "C 56.68,52.02 56.68,57.83 53.69,59.83\n" +
            " 51.13,61.53 42.36,61.00 39.00,61.00\n" +
            " 39.00,61.00 39.00,49.00 39.00,49.00\n" +
            " 42.16,49.00 51.36,48.47 53.69,50.02 Z\n" +
            "M 90.00,71.00\n" +
            "C 101.61,70.78 95.70,60.78 91.70,57.84\n" +
            " 81.22,50.14 65.06,59.66 68.95,74.00\n" +
            " 72.11,85.62 91.42,89.31 96.00,75.95\n" +
            " 89.20,76.54 82.26,84.08 76.93,75.95\n" +
            " 76.03,74.51 75.51,72.57 75.00,71.00\n" +
            " 75.00,71.00 90.00,71.00 90.00,71.00 Z\n" +
            "M 91.00,67.00\n" +
            "C 91.00,67.00 75.00,67.00 75.00,67.00\n" +
            " 77.80,56.34 89.44,55.99 91.00,67.00 Z\n" +
            "M 48.00,65.14\n" +
            "C 49.46,65.02 51.56,65.02 52.95,65.14\n" +
            " 57.94,66.90 59.11,73.01 55.57,76.57\n" +
            " 52.93,79.23 48.51,79.13 45.00,78.98\n" +
            " 42.86,78.89 40.68,78.89 39.60,76.69\n" +
            " 38.72,74.89 39.00,67.39 39.00,65.14\n" +
            " 39.00,65.14 48.00,65.14 48.00,65.14 Z";
    fillableLoader = (FillableLoader) findViewById(R.id.fillableLoader);

    //将生成svg作为字符串传参进来
    fillableLoader.setSvgPath(svg);
}
findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //开启
        fillableLoader.start();
    }
});
作者：strawberry2013 发表于2015/11/13 22:46:37 原文链接
阅读：10 评论：0 查看评论

相关 [android svg svg] 推荐：

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画：. 如果你看不到这个演示，说明你的浏览器不支持SVG，请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时，使用js创建一个元素：. // 更高效的计时器，类似于setTimeout，不会发生丢. 已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果，你可能就觉的头都打啦. 不要担心，SVG本身提供的动画属性非常容易使用，今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性：. 在上面的代码中，我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

理解SVG的viewport，viewBox，preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg，设置了viewBox之后，viewBox的长宽值如果都小于svg的viewport的长宽值，那么结果一定是放大；但是viewBox的长宽值一旦有一个值大于vewport之后，最后的实际效果就不是放大，而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么？SVG有什么用途？

- - HTML5研究小组
随着网络上信息数据的大量涌现，如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷：非开放式，显示和印刷质量及适应性差，难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics，可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言，都是XML词表，它们的语法并不难理解，但它们都有各自不同的用途和特点，下面简单介绍一下. 是基于XML的空间信息编码标准，由OpenGIS Consortium (OGC)提出，得到了许多公司的大力支持，如Oracle、Galdos、MapInfo、CubeWerx等.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件，它是基于SVG结构的，和其他jQuery地图插件不同的是，jVectorMap是矢量地图，但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的，所以支持大部分主流的浏览器，应用也相当广泛.

未来必热：SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术，没错，类似于CSS中的Sprite技术. 图标图形整合在一起，实际呈现的时候准确显示特定图标. 另，本文图片甚多，爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.

五项Web技术：WebGL和SVG名列其中

- - 脚本爱好者
　　Bruce Lowson 是 Opera 开放 web 标准的撰写人员之一，一些没有包含在 HTML5 之内的浏览器技术十分奇妙，包括 WebGL 和 SVG，作者希望通过本文与共同爱好者们分享. 　　别担心，咱们不去管那些啦，因为有些还远远没有完成呢，在浏览器中见到它们还要等一阵子. 然而，其它已经在浏览器中，或者距离您很近，或者马上就要出现.