Using Strokes

Using SVG stroke makes it easier to create a Vector drawable with unified stroke length, as per Material Design guidelines:

Consistent stroke weights are key to unifying the overall system icon family. Maintain a 2dp width for all stroke instances, including curves, angles, and both interior and exterior strokes.

So, for example, this is how you would create a “plus” sign using strokes:

<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="#FF000000"
        android:strokeColor="#F000"
        android:strokeWidth="2"
        android:pathData="M12,0 V24 M0,12 H24" />
</vector>

• strokeColor defines the color of the stroke.
• strokeWidth defines the width (in dp) of the stroke (2dp in this case, as suggested by the guidelines).
• pathData is where we describe our SVG image:
• M12,0 moves the “cursor” to the position 12,0
• V24 creates a vertical line to the position 12, 24

etc., see SVG documentation and this useful “SVG Path” tutorial from w3schools to learn more about the specific path commands.

As a result, we got this no-frills plus sign:

This is especially useful for creating an AnimatedVectorDrawable, since you are now operating with a single stroke with an unified length, instead of an otherwise complicated path.