既存のアイコンからVectorDrawableを作る

VectorDrawableは、xmlにsvgファイルのpathデータを記述します。

ic_twitter_24dp_vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#00aced"
        android:pathData="M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</vector>

上のファイルはTwitterアイコンになります。

既存のpngアイコンからこのVectorのxmlファイルを作成する手順をいくつか説明します。

pngをsvgに変換

GoogleのMaterial Designの場合

すでにsvgファイルが用意されているのでそれを使います。
https://design.google.com/icons

また、Android Studio1.5以上を使っているのであれば、File > New > Vector Asset からVector Asset Studioを開き、直接xmlファイルを配置することもできます。

その他のアイコンの場合

sketchやAdobe製品を使ってアイコンを書き出してるのであれば、svgで書き出します。
そうでない場合は、pngからsvgに変換するツールを使うと楽です。自分は http://www.autotracer.org/ を使っています。

svgからxmlを作成

前述のVector Asset Studioからsvgファイルを読み込むと、drawableディレクトリにxmlファイルが出力できます。

svg2androidを使うとドラッグ&ドロップで変換することもできます。

注意点

以下のように、Notificationアイコンなど背景が透明なアイコンのVectorDrawableを作成する場合には少し注意が必要です。

複数のpathで構成するVectorにする場合は以下のようになりますが、黒背景部分を android:fillAlpha=0.0 で透明化すると、 D や 0、 6 で囲まれた部分が白く塗りつぶされてしまいます。

ic_stat_notification_vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="96.0"
    android:viewportWidth="96.0">

    <path
        android:fillAlpha="0.0"
        android:fillColor="#000000"
        android:pathData="M0,0L0,96L96,96L96,0L0,0z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M8,8L8,52C17.03,52 29.09,54.16 36.96,48.87C47.85,41.56 47.21,17.24 35.96,10.54C28.26,5.95 16.63,8 8,8M52,8L52,52L61,52L61,34C69.56,36.46 69.66,46.62 76.52,50.98C79.76,53.03 85.33,52 89,52C84.72,44.31 79.51,34.97 73,29C78.04,22.66 84.09,15.59 87,8C83.15,8 77.73,7.03 74.52,9.61C68.99,14.05 68.33,22.75 61,25L61,8L52,8z" />
    <path
        android:fillAlpha="0.0"
        android:fillColor="#000000"
        android:pathData="M18,15L18,45C22.44,44.97 27.29,44.84 30.73,41.59C35.71,36.87 35.71,23.14 30.73,18.42C27.29,15.17 22.44,15.04 18,15z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M8,69L12,69C14.05,64.99 20.55,63.86 19,70.01C17.22,77.03 9.17,80.44 8,88L25,88L25,84L15,84C18.84,78.5 26.71,71.84 23.26,64.22C19.35,55.56 8.55,61.78 8,69M35.23,61.03C32.09,62.96 32.1,66.75 31.99,70C31.77,76.78 32.24,92.9 43.9,86.68C54.1,81.24 49.28,52.45 35.23,61.03M76,70C78.28,65.29 80.98,64.53 86,65L86,61C75.65,59.17 71,65.03 71.01,75C71.01,79.54 71.24,85.2 76.11,87.26C85.42,91.21 92.21,79.53 86.26,72.32C83.84,69.38 79.4,70.01 76,70M54,62L54,66L59,66L59,88L64,88L64,61L54,62z" />
    <path
        android:fillAlpha="0.0"
        android:fillColor="#000000"
        android:pathData="M39.19,63.98C34.52,65.21 35.4,76.48 36.44,79.95C37.03,81.92 38.58,83.89 40.9,83.25C45.52,81.99 44.65,70.59 43.57,67.11C42.98,65.2 41.42,63.39 39.19,63.98M75,70L76,71L75,70M78.14,74.14C73.24,76.52 76.64,86.48 81.59,83.72C85.86,81.33 83.54,71.52 78.14,74.14z" />
</vector>

そのため、これをVectorアイコンにする時にはいったん文字部分を黒、背景を白く塗りつぶしてから、白以外の部分をpathデータにすることで対応しました。

ic_stat_notification_vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="96.0"
    android:viewportWidth="96.0">

    <path
        android:fillColor="#ffffff"
        android:pathData="M8 8L8 52C16.9174 52 28.1842 53.6305 35.9846 48.2971C47.375 40.5089 47.0731 18.1077 34.9961 11.0887C27.1613 6.53522 16.6659 8 8 8M52 8L52 52L61 52L61 33C69.8299 34.4277 70.6998 45.2547 76.7608 50.3966C79.462 52.6882 83.7052 51.9996 87 52C84.7977 46.1895 80.7591 41.1587 77.3333 36C75.9355 33.895 73.4004 31.1288 73.5455 28.4244C73.6896 25.74 76.3836 23.067 77.8588 20.9992C80.8244 16.8425 84.0184 12.711 86 8C82.635 8.00037 78.3222 7.32513 75.5285 9.60339C69.6552 14.3932 68.965 23.6573 61 26L61 8L52 8M17 45L17 15C21.6365 15 27.0477 14.241 30.8665 17.4336C37.2748 22.7911 37.0032 38.5414 29.9452 43.2577C26.2638 45.7177 21.2067 45 17 45M38.044 60.696C28.0719 63.4171 29.5364 89.7593 41.956 86.5509C51.8589 83.9927 50.5436 57.2851 38.044 60.696M8 69C10.6946 68.058 12.3404 65.177 15.0494 64.4923C18.3069 63.6689 20.7295 67.0203 19.9946 70.0008C18.368 76.5973 10.8659 80.3368 9 87L25 87L25 85L13 85C16.4182 80.1283 23.7683 74.5758 23.4421 68.0039C23.1681 62.481 16.784 59.5457 12.1335 62.1798C9.48527 63.6798 8.72033 66.2655 8 69M75 72C75.8598 66.2341 79.1636 63.3348 85 64C82.1956 59.6782 76.603 61.0122 73.858 65.1088C70.9971 69.3785 70.8324 79.3656 73.4568 83.7863C77.2582 90.1894 85.9772 87.69 87.4514 80.9846C89.3494 72.3512 81.872 69.1579 75 72M40 62.8673C47.4898 62.8673 47.3294 84.4397 40 84.2485C32.5862 84.055 32.577 62.8673 40 62.8673M55 65L60 65L60 87L63 87L63 62C59.6764 62.1543 57.0752 62.2727 55 65M79.9753 72.7778C86.3094 73.2629 86.4625 85.1327 80 85.1327C73.7224 85.1327 73.0033 72.2438 79.9753 72.7778z" />
</vector>

ちょっと説明が難しくてわかりづらいかもしれません。すみません。。