android5.0----SVG

標籤：

SVG ----scalable vector Graphics

可縮放向量圖形

android L 即android 5.0的新特性。

1，SVG是幹什麼的？

可縮放向量圖形是基於可延伸標記語言 (XML)（標準通用標記語言 (SGML)的子集），用於描述二維向量圖形的一種圖形格式。它由全球資訊網聯盟制定，是一個開放標準。

2，SVG特點？

• SVG 可被非常多的工具讀取和修改（比如記事本）
• SVG 與 JPEG 和 GIF 映像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的
• SVG 映像可在任何的解析度下被高品質地列印
• SVG 可在映像品質不下降的情況下被放大
• SVG 映像中的文本是可選的，同時也是可搜尋的（很適合製作地圖）
• SVG 可以與 Java 技術一起運行
• SVG 是開放的標準
• SVG 檔案是純粹的 XML

官網的例子：

 

<!-- 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="32"    android:viewportHeight="32">  <!-- 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>

　　

這樣就定義好了一個靜態向量圖，可以像一般的圖片資源使用，設定到imageView中會顯示出一個心形。控制顯示心形的就是上面path這個標籤，一個path代表一個元素，繪製的內容是pathData下的一長串字元，裡面是SVG繪製的一系列命令，提供moveTo、lineTo、close等操作，可以和Graphics 中的Path操作對應起來。

在android中使用向量圖有一下步驟：

　　1，在drawable資源下面建立向量圖的.xml檔案

 vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"     android:height="256dp"     android:width="256dp"     android:viewportHeight="32"     android:viewportWidth="32" >         <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>

　　其中

　　M 100 100 L 300,200 L 200,300 Z

• M： move to 移動繪製點 ,就是從座標100，100向300，200座標移動，畫條直線，300，200-->200,300畫條直線。
• L：line to 直線
• Z：close 閉合--也就是svg的結束位置
• C：cubic bezier 三次貝茲路徑
• Q：quatratic bezier 二次方貝茲曲線
• A：ellipse 圓弧
• H：horizontal line to 水平直線

在布局檔案中使用：

<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"/>

　　

：

然後分享兩個svg值擷取的方法：

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

一個是個離線的工具：

inkscape

介面：

然後將svg儲存到案頭上，並用瀏覽器開啟：

 

 

查看svg資訊：

<?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"   inkscape:version="0.48.4 r9939"   sodipodi:docname="建立文檔 1">  <defs     id="defs4" />  <sodipodi:namedview     id="base"     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="1280"     inkscape:window-height="738"     inkscape:window-x="-8"     inkscape:window-y="-8"     inkscape:window-maximized="1" />  <metadata     id="metadata7">    <rdf:RDF>      <cc:Work         rdf:about="">        <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>  </metadata>  <g     inkscape:label="Layer 1"     inkscape:groupmode="layer"     id="layer1">    <path       sodipodi: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;stroke-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:randomized="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.28571,37.142857)" />  </g></svg>

　　

 紅色部分就是svg值，因此如果你在android svg開發中如果為svg值頭疼可以參考這個工具來寫。

關於相容性：

眾所周知svg概念在android上是出現在android 5.0以後的，所以也出現了相關的相容性的問題：

1 ，首先style的相容性：

res/values/styles.xml  android低版本預設讀取

res/values_v21/styles.xml 這個儘可能使用android5.0風格的特性

2 ，layout布局檔案，重點是一些控制項的支援：

res/layout/activity.xml 所有通用的布局在這裡寫。

res/layout_v21/activity.xml 使用android 5.0新特性的一些控制項的布局。

3 ,support library 比如recycleview cardview等的向下相容：

4，就是通過檢測系統的版本來調用不同系統版本的api

if(Build.VERSION.SDK-INT>=build.VERSION_CODES.LOLIPOP){

　　//使用材料設計的5.0新特性

}else{

　　//使用低於5.0的通用各版本方法

}

 

　　

android5.0----SVG