显示解析svg

g公司代码显示svg:

SVGParserRenderer drawable = new SVGParserRenderer(context, String svgContent);

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

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">

<path fill="#B0B0B0" d="M3.494,24c0-0.587,0.476-1.063,1.063-1.063h38.886c0.588,0,1.063,0.476,1.063,1.063l0,0

    c0,0.587-0.475,1.062-1.063,1.062H4.557C3.97,25.063,3.494,24.587,3.494,24L3.494,24z"/>

<g><g><g>

<path fill="#B0B0B0" d="M3.806,23.249c0.415-0.414,1.088-0.414,1.502,0l17.054,17.053c0.415,0.415,0.415,1.087,0,1.503l0,0

                c-0.415,0.414-1.088,0.414-1.503,0L3.806,24.751C3.391,24.336,3.391,23.665,3.806,23.249L3.806,23.249z"/>

</g><g>

<path fill="#B0B0B0" d="M22.361,6.196c0.415,0.415,0.415,1.087,0,1.502L5.308,24.751c-0.414,0.415-1.087,0.415-1.502,0l0,0

                c-0.415-0.415-0.415-1.087,0-1.503L20.858,6.196C21.273,5.781,21.946,5.781,22.361,6.196L22.361,6.196z"/>

</g></g></g>

</svg>

(SVGView )mSvgView.setSVGRenderer(drawable, null);

<com.trevorpage.tpsvg.SVGView

    android:id="@+id/siv_topicon"

    android:layout_width="@dimen/abs__shortcut_svg_size"

    android:layout_height="@dimen/abs__shortcut_svg_size"

    android:layout_gravity="center"

    >

</com.trevorpage.tpsvg.SVGView>

public class SVGView extends View {}

public class SVGParserRenderer extends DefaultHandler {}

SVGView.setSVGRenderer(SVGParserRenderer, null);

SVG的解析:

二、SVG的解析

上文提到Android5.0时引入了SVG特性，其中必然会涉及到SVG图片的加载与解析。而svg本质上就是xml文件，所以从解析角度来看，能解析xml文件的工具应该几乎都可以用来解析svg文件。
1、DOM解析
查看Android源码可以看出，5.0引入svg后并没有使用dom进行解析svg源文件，虽然svg号称完全支持dom标准。笔者从dom解析的过程可以看出，Dom解析是将xml文件全部载入，组装成一颗dom树，然后通过节点以及节点之间的关系来解析xml文件。虽然一般情况下，svg文件是比较小的，但也不乏有些很复杂的图片会上升到M级别，如果在解析时需要全部载入，对于Android系统来说时比较耗时的，这也许就是dom遭Android淘汰的原因之一吧。
2、SAX解析
SAX(Simple API for XML)解析器是一种基于事件的解析器，它的核心是事件处理模式，主要是围绕着事件源以及事件处理器来工作的。当事件源产生事件后，调用事件处理器相应的处理方法，一个事件就可以得到处理。在事件源调用事件处理器中特定方法的时候，还要传递给事件处理器相应事件的状态信息，这样事件处理器才能够根据提供的事件信息来决定自己的行为。SAX解析器的优点是解析速度快，占用内存少。非常适合在Android移动设备中使用
3、PUll解析
PULL解析器的运行方式和SAX类似，都是基于事件的模式。不同的是，在PULL解析过程中，我们需要自己获取产生的事件然后做相应的操作，而不像 SAX那样由处理器触发一种事件的方法，执行我们的代码。PULL解析器小巧轻便，解析速度快，简单易用，非常适合在Android移动设备中使用，Android系统内部在解析各种XML时也是用PULL解析器

三、SVG在Android5.0以上版本中的使用

1、使用方法
鉴于SVG有那么多的优点，Android于5.0版本将该特性引入。在5.0以上版本中使用方法如下：
1）获取SVG图片数据
第一种方法当然是从网上down了（一般直接用来测试使用），这里只给出几个常用素材下载网站：
http://sc.chinaz.com/
http://www.freevectors.net
http://www.freevectordownload.com/
其次就是手工制作了：真正做项目时，方法1肯定满足不了相应的需要了。这时我们只能自己动手来作图了（应该是美工来负责^_^||），相应最常用的软件就是PS、AI或者CDR也可以。具体制作方法这里就不做介绍了，直接上网搜就行。这里给出一个较为详细的例子：http://blog.csdn.net/tianjian4592/article/details/44733123
2）将普通SVG图片数据转换成Android可用数据
一般的SVG图片数据是直接在html或jsp中可以使用，Android中若想使用svg则需要中间环节先转换成Vector标签包括的xml文件（如果做动画的话，外面还需要包括一层animated-vector来引用vector资源），其中最重要的就是path元素，该元素就是图片加载显示过程中的绘制轨迹。具体转换方法网上查询得出有两种：一是手动改写，二是直接使用自动转化工具转换（http://inloop.github.io/svg2android/）。具体转换规则以及相应符号意义可以参见：http://www.w3.org/TR/SVG11/paths.html#PathData.
3）在工程中使用
svg在5.0以上的Android工程中使用相对较为简单，直接用drawable控件（如mageView等）引用第二步中转换得来的xml文件资源即可。
2、Demo实例
实例一：mytest（使用Drawable控件引用5.0新特性vector资源）
【关键代码摘要】
使用vector标签包括path元素
[ 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 320,180 L 0,320 0,0 180,0 z" />

</vector>

使用ImageView引用vector资源sharp_rect
[ activity_main.xml ]

<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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ImageView

        android:src="@drawable/sharp_rect"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        />

</RelativeLayout>

Demo附件： mytest.zip
效果图：

实例二：【VectorCard】使用5.0新特性animated-vector标签引用xml中的svg path元素
【关键代码摘要】
[ to_stop.xml ]

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

                android:duration="500"

                android:interpolator="@android:interpolator/decelerate_cubic"

                android:propertyName="pathData"

                android:valueType="pathType"

                android:repeatMode="reverse"

                android:repeatCount="1"

                android:valueFrom="M100,100 L400,250 L100,400 L100,400 z"

                android:valueTo="M100,100   L400,100 L400,400 L100,400 z" />

[ animated_play.xml ]

<?xml version="1.0" encoding="utf-8"?>

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"

                 android:drawable="@drawable/play_icon">

    <target

        android:animation="@animator/to_stop"

        android:name="play" />

</animated-vector>

Demo附件： app.zip
效果图：

3、小结
Android5.0关于这块新特性的添加主要是依赖于Vctor，对应的类为VectorDrawable以及AnimatedVectorDrawable。前者主要用于矢量图的加载，后者主要用于矢量动画的加载。二者在使用过程中要区分对待。

四、Android5.0以下使用SVG探索总结

经过这短时间的不断摸索与实验，按照svg_android组织的方法主要有以下两种：
1、基于svg_android库
抽取类似svg_android库中适合5.0以下的，且可以解析svg的Java文件，自定义类似svg的控件，进行Android工程的搭建（该实例使用sax解析svg文件）。
对应实例：【SVGMapView-master】
Demo附件： SVGMapView-master.zip
效果图：

【说明】该方法需要开发者自己去重写解析函数，目前该实例并不能支持所有的svg语法的解析，如将该方法布置到项目中，需要大量拓展解析甚至加载SVg的功能函数。
2、基于JNI技术
加载及加息svg的工作交给C/C++处理，上层使用java调用对应.so库暴露的接口。
对应实例：【ImageViewSvg】
Demo附件： ImageViewSvg.zip
效果图：

【说明】该方案虽然使用了JNI技术来加载并解析svg文件，但目前其解析度有限，功能较为单一，如需要布置该方案于项目中，对于jni侧也需要扩展大量的svg解析函数。且需要优化对应的加载处理环节。

五、总结

从整体上看，目前是有可能将svg应用到Android5.0以下版本的。但其的稳定性，以及后续的工作量是需要我们仔细斟酌的问题之一。

巴特西

显示解析svg

最新文章

热门文章