android5.0----SVG

SVG----Scalable Vector Graphics

Scalable Vector Graphics

Android L is the new feature of Android 5.0.

What is 1,svg for?

Scalable Vector graphics are based on Extensible Markup Language (a subset of the standard Common Markup Language) that describes a graphic format for two-dimensional vector graphics. It is developed by the World Wide Web Consortium and is an open standard.

2,svg features?

• SVG can be read and modified by a lot of tools (such as Notepad)
• SVG is smaller in size and more compressible than JPEG and GIF images.
• SVG is scalable
• SVG images can be printed with high quality at any resolution
• SVG can be amplified when the image quality is not degraded
• The text in the SVG image is optional and searchable (well suited for map creation)
• SVG can be run with Java technology
• SVG is an open standard
• The SVG file is purely XML

Examples of official website:

<!--res/drawable/heart.xml--><vector xmlns:android= "Http://schemas.android.com/apk/res/android"    <!--intrinsic size of the drawable-    android:height= "256DP"    android:width= "256DP"    <!--size of The virtual canvas--    android:viewportwidth= "    android:viewportheight=" >  <!--draw a path --  <path android:fillcolor= "#8fff"      android:pathdata= "m20.5,9.5                        c-1.955,0,-3.83,1.268,-4.5,3                        c-0.67,-1.732,-2.547,-3,-4.5,-3                        c8.957,9.5,7,11.432,7,14                        c0,3.53,3.793,6.257,9,11.5                        c5.207,-5.242,9,-7.97,9,-11.5                        C25, 11.432,23.043,9.5,20.5,9.5z "/></vector>

　　

This defines a static vector diagram, which can be used as a general image resource and set to a heart shape in the ImageView. Control shows the heart is the toppathThis label, apathRepresents an element that draws the content that ispathDataa long string of characters, which is an SVG-drawn sequence of commands that provide MoveTo, LineTo, and close, which correspond to the path operation in the graphics.

using vector images in Android there are a few steps:

1, create the. xml file for the vector diagram below the drawable resource

Vector.xml

<vector xmlns:android= "http://schemas.android.com/apk/res/android"     android:height= "256DP"     android: Width= "256DP"     android:viewportheight= "android:viewportwidth="     >         <path
             Android:fillcolor= "#0000FF"             android:pathdata= "
m20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
C-0.67,-1.732,-2.547,-3,-4.5,-3
c8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c25,11.432,23.043,9.5,20.5,9.5z
"/>     </group> </vector>

which

M l 300,200 L 200,300 Z

• M:move to move the plot point, is to move from coordinates 100,100 to 300,200 coordinates, draw a straight line, 300,200-->200,300 draw a straight line.
• L:line to Straight
• Z:close closure-that is, the end position of SVG
• C:cubic Bezier three times Bezier curve
• Q:quatratic Bezier two times Bezier curve
• A:ellipse Arc
• H:horizontal lines to horizontal line

To use in a layout file:

<imageviewandroid:id= "@+id/imageview1" android:layout_width = "wrap_content" android:layout_height = "wrap_ Content "android:layout_alignparenttop=" true "Android:layout_centerhorizontal =" true "ANDROID:SRC =" @drawable/ Vector "/>

　　

：

Then share the two SVG values obtained by the method:

Http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html

One is an offline tool:

Inkscape

Interface:

Then save the SVG to your desktop and open it with your browser:

View SVG information:

<?xml version= "1.0" encoding= "UTF-8" standalone= "no"?><!--Created with Inkscape (http://www.inkscape.org/)- -><svg xmlns:dc= "HTTP://PURL.ORG/DC/ELEMENTS/1.1/" xmlns:cc= "http://creativecommons.org/ns#" xmlns:rdf= " http://www.w3.org/1999/02/22-rdf-syntax-ns# "xmlns:svg=" Http://www.w3.org/2000/svg "xmlns=" http://www.w3.org/ 2000/svg "xmlns:sodipodi=" HTTP://SODIPODI.SOURCEFORGE.NET/DTD/SODIPODI-0.DTD "xmlns:inkscape="/HTTP/ Www.inkscape.org/namespaces/inkscape "width=" 744.09448819 "height=" 1052.3622047 "id=" SVG2 "version=" 1.1 "Inkscap e:version= "0.48.4 r9939" sodipodi:docname= "New Document 1" > <defs id= "defs4"/> <sodipodi:namedview id= "ba Se "pagecolor=" #ffffff "bordercolor=" #666666 "borderopacity=" 1.0 "inkscape:pageopacity=" 0.0 "Inkscape:      pageshadow= "2" inkscape:zoom= "0.35" inkscape:cx= "375" inkscape:cy= "405.71429" inkscape:document-units= "px"   Inkscape:current-layer= "Layer1" showgrid= "false"  Inkscape:window-width= "inkscape:window-height=" 738 "inkscape:window-x="-8 "inkscape:window-y="-8 " inkscape:window-maximized= "1"/> <metadata id= "Metadata7" > <rdf:RDF> <cc:work rdf:a Bout= "" > <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource= "Http://purl . org/dc/dcmitype/stillimage "/> <dc:title></dc:title> </cc:Work> </rdf:RDF> &lt ;/metadata> <g inkscape:label= "Layer 1" inkscape:groupmode= "layer" id= "layer1" > <path so Dipodi:type= "arc" style= "fill: #ff0000; Fill-rule:evenodd;stroke: #000000; stroke-width:1px;stroke-linecap:butt;       Stroke-linejoin:miter;stroke-opacity:1 "id=" path2985 "sodipodi:cx=" 402.85715 "sodipodi:cy=" 385.21933 "       sodipodi:rx= "217.14285" sodipodi:ry= "230" d= "M 620,385.21933 a 217.14285,230 0 1 1-434.28571,0 217.14285,230 0 1 1 434.28571,0 z" /> <path sodipodi:type= "star" style= "fill: #ffff00; Fill-rule:evenodd;stroke: #000000; stroke-width:1px;s Troke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1 "id=" path2987 "sodipodi:sides=" 5 "sodipodi:cx= "205.71429" sodipodi:cy= "349.50504" sodipodi:r1= "149.99319" sodipodi:r2= "74.996597" sodipodi:arg1= "1.2610934" sodipodi:arg2= "1.8894119" inkscape:flatsided= "false" inkscape:rounded= "0" Inkscape:ran domized= "0" d= "M 251.42858,492.36218-69.20713,-71.63513-98.24588,16.40014 46.74287,-87.95636-45.957098,-88.36947 98.095808,17.27511 69.84283,-71.01547 13.88368,98.63296 89.12234,44.47949-89.51523,43.68342 z " inkscape:transform-center-x= " -14.126491" inkscape:transform-center-y= "0.20655178" transform= "Translate (214.285 71,37.142857) "/> </g></svg>

　　

The red part is the SVG value, so if you have a headache for SVG values in Android SVG development, you can refer to this tool to write.

About compatibility:

It is well known that the SVG concept appears on Android after Android 5.0, so there are issues related to compatibility:

1, first style compatibility:

Res/values/styles.xml Android Low version default read

Res/values_v21/styles.xml This feature that uses android5.0 style as much as possible

2, layout layouts file, with emphasis on the support of some controls:

Res/layout/activity.xml all common layouts are written here.

Res/layout_v21/activity.xml the layout of some controls using the new features of Android 5.0.

3, support library such as Recycleview CardView, such as backward compatibility:

4, is to call the different system versions of the API by detecting the version of the system

if (build.version.sdk-int>=build. Version_codes. Lolipop) {

5.0 new features for using material design

}else{

Use a generic version of the method below 5.0

}

　　

android5.0----SVG