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 目錄：

 

 

上面的例子定義了一條路徑，它開始於位置 250 150，到達位置 150 350，然後從那裡開始到 350 350，最後在 250 150 關閉路徑。

 

3.圖片生成SVG格式

這裡推薦使用GIMP工具生成，具體步驟如下：

 

根據以上找到Path路徑，將其保存起來

再到路徑對話框中，將path導出

 

如果找不到路徑對話框，可根據下圖找到

 

 

4.實現方式

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

 

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    String svg = 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;
    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();
    }
});