Android中使用SVG----入門1

? SVG是什么创千？

  • SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

  • SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形

  • SVG 使用 XML 格式定義圖形

  • SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失

  • SVG 是萬維網(wǎng)聯(lián)盟的標準

  • SVG 與諸如 DOM和 XSL 之類的W3C標準是一個整體

? SVG有什么優(yōu)勢犁柜？
  • SVG 可被非常多的工具讀取和修改（比如記事本）
  • SVG 與 JPEG 和 GIF 圖像比起來嚼黔，尺寸更小，且可壓縮性更強帆调。
  • SVG 是可伸縮的
  • SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
  • SVG 可在圖像質(zhì)量不下降的情況下被放大
  • SVG 圖像中的文本是可選的垛孔，同時也是可搜索的（很適合制作地圖）
  • SVG 可以與 Java 技術(shù)一起運行
  • SVG 是開放的標準
  • SVG 文件是純粹的 XML
? SVG有什么缺點？
  • 兼容不了4.0以下的版本海雪。
  • 它不可以被用來做自定義RatingBar（一個星星評分控件）的背景
  • SVG圖是不支持硬件加速的（所以它不能用來做圖片的占位圖和錯誤圖）；
?Android中如何使用舱殿？
一奥裸、 Android 5.0之后

Google在Android 5.X中提供了兩個新API支持SVG:

VectorDrawable 創(chuàng)建基于XML的SVG圖形
AnimatedVectorDrawable 實現(xiàn)動畫效果

?VectorDrawable

①創(chuàng)建SVG的XML文件


image.png

②點擊創(chuàng)建會出現(xiàn)下面的界面：
選擇Android studio自帶的圖標，可以選擇顏色怀薛，但是如果是本地的SVG圖片刺彩，是不能在創(chuàng)建的時候更改圖片顏色的

image.png
image.png

系統(tǒng)自帶剪貼圖：


image.png

創(chuàng)建完成之后迷郑，生成的xml文件如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
?XML文件中屬性說明
  • width，height 表示該SVG圖形的具體大小，
  • viewportHeight瘩扼，viewportWidth 表示SVG圖形劃分比例

如果將24dp劃分為24份兰怠，如果在繪制圖形時使用坐標(12,12)，則意味著該坐標位于該SVG圖形正中間霸妹。
所以十电，如果width，height的比例與viewportHeight，viewportWidth的比例不一致鹃骂，就會使圖形發(fā)生壓縮台盯，形變。（此處參考文章：http://www.reibang.com/p/5c81970ddf33）

  • path （X軸為橫向向右的坐標軸畏线，Y軸為豎向向下的坐標軸静盅，（0，0）為中心點）

M M = moveto(X,Y) ：將畫筆移動到（X,Y）坐標位置
L L = lineto(X,Y) ：畫直線到（X,Y）坐標位置
H H = horizontal lineto(X)：畫水平線到指定的X坐標位置
V V = vertical lineto(Y)：畫垂直線到指定的Y坐標位置
C C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三階貝賽爾曲線
S S = smooth curveto(X2,Y2,ENDX,ENDY)
Q Q = quadratic Belzier curve(X,Y,ENDX,ENDY)：二階貝賽爾曲線
T T = smooth quadratic Belzier curveto(ENDX,ENDY)：映射
A A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
Z Z = closepath()：關(guān)閉路徑

?XML 使用

和一般的圖片一樣寝殴，直接src調(diào)用就可以

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <ImageView
        android:id="@+id/svg_img"
        android:src="@drawable/ic_arrow_back_black_24dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>
?不同主題更改顏色
package com.example.abc.svgtest;

import android.graphics.Color;
import android.support.graphics.drawable.VectorDrawableCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.svg_img);

        VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(),R.drawable.ic_arrow_back_black_24dp,getTheme());

        //需要更改的顏色
        vectorDrawableCompat.setTint(Color.GREEN);

        imageView.setImageDrawable(vectorDrawableCompat);
    }
}

或者可以在xml中更改顏色屬性：

例如蒿叠，下圖是從本地選擇的一張SVG圖片
image.png
對應(yīng)的xml如下，可以看到每個有顏色的區(qū)域都有對應(yīng)的色值蚣常，可自行更改市咽；
<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#967245" android:pathData="M497.66,236.03c-3.58,-0.51 -6.14,-3.07 -6.14,-6.66 -1.54,-21.5 -6.14,-93.7 8.19,-106.5 3.58,-3.58 23.55,1.02 33.79,3.58 3.58,1.02 6.14,4.61 5.12,8.7 -10.24,54.78 -5.63,70.14 -3.07,96.77 0.51,4.61 -3.58,8.7 -8.19,8.19l-29.7,-4.1z"/>
    <path android:fillColor="#FFF278" android:pathData="M701.95,431.62c-17.92,-24.06 -23.55,-67.58 -26.11,-76.8 -38.91,-134.66 -162.82,-131.07 -162.82,-131.07S388.61,220.16 350.21,354.82c-2.56,8.7 -8.19,52.74 -26.11,76.8C266.24,508.93 107.01,823.81 422.4,950.78c16.9,6.66 31.74,12.8 53.76,7.68 12.29,-3.07 32.77,-3.58 37.38,-3.58 5.12,0 25.09,0.51 37.38,3.58 22.02,5.12 36.35,-0.51 53.76,-7.68 314.37,-126.98 155.14,-441.34 97.28,-519.17z"/>
    <path android:fillColor="#353942" android:pathData="M513.54,242.69c11.26,0 112.13,3.07 145.41,118.27 0.51,1.02 1.02,4.61 1.54,7.17 3.58,18.43 10.75,52.74 27.65,74.75 34.3,46.08 115.71,193.54 79.36,324.1 -20.99,74.75 -77.82,131.07 -169.98,168.45 -10.75,4.61 -20.48,8.19 -30.72,8.19 -4.1,0 -7.68,-0.51 -12.29,-1.54 -14.34,-3.58 -36.35,-4.1 -41.47,-4.1s-27.14,0.51 -41.47,4.1c-4.1,1.02 -8.19,1.54 -12.29,1.54 -10.75,0 -19.97,-3.58 -30.72,-8.19 -91.65,-36.86 -148.99,-93.7 -169.98,-168.45 -36.35,-130.56 44.54,-278.02 79.36,-324.1 16.9,-22.53 23.55,-56.83 27.65,-74.75 0.51,-3.07 1.02,-6.14 1.54,-7.17C399.36,245.76 500.22,242.69 511.49,242.69h2.05m0,-17.41h-1.02,-1.02c-11.26,0 -125.44,3.07 -162.3,131.07 -2.56,8.7 -8.19,52.74 -26.11,76.8C265.22,510.46 105.98,825.34 421.38,952.32c12.29,5.12 23.55,9.73 37.38,9.73 5.12,0 10.24,-0.51 15.87,-2.05 12.29,-3.07 32.77,-3.58 37.38,-3.58 5.12,0 25.09,0.51 37.38,3.58 5.63,1.54 11.26,2.05 15.87,2.05 13.82,0 25.09,-4.61 37.38,-9.73 314.88,-126.98 156.16,-441.86 98.3,-519.17 -17.92,-24.06 -23.55,-67.58 -26.11,-76.8 -35.84,-128 -149.5,-131.07 -161.28,-131.07z"/>
    <path android:fillColor="#353942" android:pathData="M510.46,139.78c2.56,0.51 5.63,1.02 9.73,1.54 -7.17,41.47 -5.12,59.9 -3.07,79.36l-8.7,-1.02c-2.56,-39.42 -1.02,-68.1 2.05,-79.87m-5.12,-17.92c-2.56,0 -4.61,0.51 -5.63,1.02 -14.34,13.31 -10.24,85.5 -8.19,106.5 0.51,3.58 3.07,6.14 6.14,6.66l29.7,3.58h1.02c4.1,0 7.68,-3.58 7.17,-8.19 -2.56,-27.14 -7.17,-41.98 3.07,-96.77 0.51,-3.58 -1.54,-7.68 -5.12,-8.7 -7.68,-1.54 -20.48,-4.1 -28.16,-4.1z"/>
    <path android:fillColor="#60ED58" android:pathData="M523.26,135.68s68.1,-115.2 206.34,-40.96c0,0 -71.68,101.38 -206.34,40.96z"/>
    <path android:fillColor="#353942" android:pathData="M637.95,64.51V81.92c20.48,0 43.01,6.14 66.05,17.92 -14.85,17.41 -45.06,44.54 -90.62,44.54 -19.97,0 -41.47,-5.12 -64,-15.36 14.34,-18.43 44.03,-47.1 89.09,-47.1l-0.51,-17.41m0,0c-76.8,0 -114.69,71.17 -114.69,71.17 34.3,19.46 64,26.62 89.6,26.62 78.34,0 116.22,-67.58 116.22,-67.58 -34.3,-22.02 -65.02,-30.21 -91.14,-30.21z"/>
    <path android:fillColor="#BDFFB8" android:pathData="M548.86,129.02s69.63,-72.19 155.14,-28.67c0,0 -86.02,-56.83 -155.14,28.67z"/>
    <path android:fillColor="#43CE38" android:pathData="M550.4,130.05s97.79,27.14 153.6,-29.7c0,0 -56.32,75.78 -153.6,29.7z"/>
    <path android:fillColor="#FFF18D" android:pathData="M548.86,248.32s80.38,80.38 88.58,126.46 30.21,76.8 30.21,76.8 163.33,382.46 -54.78,477.7c0,0 122.88,-43.01 155.65,-165.89s-49.15,-286.72 -77.31,-315.39c-28.67,-28.67 -27.65,-81.92 -35.84,-102.4 -8.19,-20.48 -38.91,-83.97 -106.5,-97.28z"/>
    <path android:fillColor="#FFF4FA" android:pathData="M548.86,248.32s91.65,34.3 102.4,122.88c5.63,46.59 35.84,86.53 35.84,86.53s188.93,270.85 -9.73,433.66c0,0 64,-27.65 90.62,-128 32.77,-122.88 -49.15,-286.72 -77.31,-315.39 -28.67,-28.67 -27.65,-81.92 -35.84,-102.4 -7.68,-20.48 -38.4,-83.97 -105.98,-97.28z"/>
    <path android:fillColor="#FFE161" android:pathData="M442.37,260.61s-61.44,81.41 -58.88,111.62c3.07,32.77 -28.16,81.41 -33.79,84.99 -5.63,3.07 -114.18,257.54 31.23,456.7 0,0 -145.92,-69.12 -131.07,-239.1 12.8,-146.94 86.02,-224.77 89.6,-233.47s14.85,-27.14 26.11,-77.82c13.31,-58.88 56.32,-94.72 76.8,-102.91z"/>
</vector>
二、 Android 5.0之前

需要 在項目的BaseActivity或Application中加入這句代碼

static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末抵蚊，一起剝皮案震驚了整個濱河市施绎，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌泌射，老刑警劉巖粘姜，帶你破解...
    沈念sama閱讀 219,589評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異熔酷，居然都是意外死亡孤紧，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門拒秘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來号显，“玉大人，你說我怎么就攤上這事躺酒⊙涸椋” “怎么了？”我有些...
    開封第一講書人閱讀 165,933評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵羹应，是天一觀的道長揽碘。 經(jīng)常有香客問我，道長园匹，這世上最難降的妖魔是什么雳刺？ 我笑而不...
    開封第一講書人閱讀 58,976評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮裸违，結(jié)果婚禮上掖桦，老公的妹妹穿的比我還像新娘。我一直安慰自己供汛，他們只是感情好枪汪，可當我...
    茶點故事閱讀 67,999評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布涌穆。 她就那樣靜靜地躺著，像睡著了一般雀久。 火紅的嫁衣襯著肌膚如雪宿稀。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,775評論 1贊 307
  • 城市分裂傳說
    那天赖捌，我揣著相機與錄音原叮，去河邊找鬼。 笑死巡蘸，一個胖子當著我的面吹牛奋隶，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悦荒，決...
    沈念sama閱讀 40,474評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼唯欣，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了搬味？” 一聲冷哼從身側(cè)響起境氢，我...
    開封第一講書人閱讀 39,359評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎碰纬，沒想到半個月后萍聊，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,854評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡悦析，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年寿桨，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片强戴。...
    茶點故事閱讀 40,146評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡亭螟，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出骑歹，到底是詐尸還是另有隱情预烙，我是刑警寧澤，帶...
    沈念sama閱讀 35,826評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布道媚，位于F島的核電站扁掸，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏最域。R本人自食惡果不足惜谴分，卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望羡宙。 院中可真熱鬧狸剃，春花似錦掐隐、人聲如沸狗热。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽匿刮。三九已至僧凰，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間熟丸，已是汗流浹背训措。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留光羞，地道東北人绩鸣。 一個月前我還...
    沈念sama閱讀 48,420評論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像纱兑，于是被迫代替她去往敵國和親呀闻。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,107評論 2贊 356

推薦閱讀更多精彩內(nèi)容