Android SVG drawing

1. Introduction to SVG

1.1 SVG (Scalable Vector Graphics) is the abbreviation of Scalable Vector Graphics, which is a graphics format in which shapes are specified in XML, and XML is rendered by an SVG viewer.

1.2 SVG can be distinguished from bitmaps. It can be enlarged without blurring and can be used to draw some icons, buttons, etc. However, if it is too complex, it will cause slow rendering speed and large memory usage. Suitable for simple graphics drawing.

1.3 The SVG coordinate system is also a Cartesian coordinate system. Just like the android drawing coordinate system, the x=0, y=0 point is in the upper left corner. Compared with the normal graph coordinate system, the y-axis is inverted. As y increases in SVG, points, shapes, etc. move down, not up. The coordinate system unit defaults to pixel px, and other units can also be selected:

em    The default font size - usually the height of a character.

ex     The height of the character x

px     Pixels

pt     Points (1 / 72 of an inch)

pc     Picas (1 / 6 of an inch)

cm   Centimeters

mm  Millimeters

in     Inches

1.4 There are also many SVG elements, such as rect, circle, line, path, text, etc. But android only supports path, and the position of points and lines is described by coordinate data

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#009900; fill: #00cc00"/>
  </svg>

</svg>

The use of two kinds of android svg

2.1 As mentioned above, android supports the drawing of path elements, and path contains the following elements:

m|M = moveto moves to a certain point. 
l|L = lineto draws a straight line to a certain point. 
h|H = horizontal lineto draws a horizontal line to a certain point. 
v|V = vertical lineto draw a vertical line to a certain point. 
q|Q = quadratic Bézier curveto quadratic Bézier curve 
t|T = smooth quadratic Bézier curveto smooth quadratic Bézier curve 
c|C = curveto cubic Bezier curve 
s|S = smooth curveto smooth cubic Bezier curve 
a|A = elliptical Arc 
z|Z = closepath Draw a straight line from the end point to the start point, forming a closed area.

Note : uppercase indicates absolute position (position of window x=0, y=0), lowercase indicates relative position (position of itself)

2.2 Use of Android SVG, example of drawing a rectangle

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="60dp"
    android:viewportWidth="160"
    android:viewportHeight="60">
    <path
        android:pathData="M0,0
        L160,0
        L160,60
        L0,60
        L0,0Z"
        android:fillColor="#8fafdb"/>
</vector>

<!--
M0,0      移到(0，0)点开始绘制 左上角
L160,0    画线(0，0)坐标到(160，0)坐标 右上角
L160,60   画线(160,0)坐标到160,60)坐标 右下角
L0,60     画线(160,60)坐标到(0,60)坐标 右下角
L0,0Z      画线(0,60)坐标到(00)坐标 左上角闭合
-->

2.3 Draw a pointed rectangle

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="60dp"
    android:viewportWidth="160"
    android:viewportHeight="60">
    <path
        android:fillColor="#8fafdb"
        android:pathData="M0,30
        L20,0
        L140,0
        L160,30
        L140,60
        L20,60
        L0,30Z" />
</vector>

<!--
M0,30     移到(0,30)点开始绘制 左上角
L20,0     画线(0,30)坐标到(20,0)坐标 右上角
L140,0    画线(20,0)坐标到(140,0)坐标 右中间
L160,30   画线(140,0)坐标到(160,30)坐标 右下角
L140,60   画线(60,30)坐标到(L140,60)坐标 左下角
L20,60     画线(140,60)坐标到(20,60)坐标 左中间
L0,30Z     画线(0,60)坐标到(0,30)坐标 右上角闭合
-->

2.3 Draw a rounded rectangle

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="60dp"
    android:viewportWidth="160"
    android:viewportHeight="60">
    <path
        android:pathData="M10,0
        L150,0
        A10,10 0 0 1 160,10
        L160,10
        L160,50
        A10,10 0 0 1 150,60
        L150,60
        L10,60
        A10,10 0 0 1 0,50
        L0,50
        L0,10
        A10,10 0 0 1 10,0
        L10,0Z"
        android:fillColor="#8fafdb"/>
</vector>

<!--
M0,0                   移到(0，0)点开始绘制 左上角
L150,0                 画线(0，0)坐标到(150,0)坐标 右上角
A10,10 0 0 1 160,10    绘制一个起点(150,0)，半径10，角度0，大弧1，顺时针1，终点(160,10)的圆角
L160,10
L160,50                画线(160,10)坐标到(160,60)坐标 右下角
A10,10 0 0 1 150,60    绘制一个起点(160,60)，半径10，角度0，大弧1，顺时针1，终点(150,60)的圆角
L150,60
L10,60                 画线(150,60)坐标到(10,60)坐标 左下角
A10,10 0 0 1 0,50      绘制一个起点(10,60)，半径10，角度0，大弧1，顺时针1，终点(0,50)的圆角
L0,50
L0,10                 画线(0,50)坐标到(0,10)坐标 左下角
A10,10 0 0 1 10,0     绘制一个起点(0,10)，半径10，角度0，大弧1，顺时针1，终点(10,0)的圆角
L10,0Z                画线(10,0)坐标到(10,0)坐标 左上角闭合
-->

2.4 Draw a circle. Note: The start coordinates and the end coordinates will not be drawn, so the end coordinates should be staggered point coordinates

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="160dp"
    android:viewportWidth="160"
    android:viewportHeight="160">
    <path
        android:pathData="M0,80
        A80,80
        0
        1
        1
        0,80.00001Z"
        android:fillColor="#8fafdb"/>
</vector>

<!--
pathData="
M x y
A rx ry
x-axis-rotation
large-arc-flag
sweep-flag
x y"

M0,80                移到(0,80)点开始绘制,顶部中间位置,rx ry 分别是是椭圆的x轴半径和y轴半径
A80,80               画弧度(80,80) X方向半径，和Y方向半径
0                    x-axis-rotation 是椭圆相对于坐标系的旋转角度
1                    large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
1                    sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
0.00001,80.00001Z    x y是圆弧终点的坐标,由于坐标重合不能绘制，所以要偏移一点坐标
-->

2.5 Draw a Bezier curve

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="160dp"
    android:viewportWidth="160"
    android:viewportHeight="160">
    <path
        android:pathData="M0,0
        Q 80,80 160,0
        "
        android:fillColor="#8fafdb"/>

    <!-- 辅助查看的线（斜率） -->
    <path
        android:pathData="M0,0
        L80,80 160,0"
        android:strokeColor="#ff0000" android:strokeWidth="1"/>

</vector>

<!--
pathData="="Q x1 y1, x y" // 控制点 (x1,y1)，终点 (x,y) 大写Q绝对位置 小写q相对位置

-->

Red is the auxiliary line 

2.5 Draw quadratic Bezier curve 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="160dp"
    android:viewportWidth="160"
    android:viewportHeight="160">
    <path
        android:pathData="M0,80
        Q 40,0 80,80
        T160,80"
        android:strokeColor="#8fafdb" android:strokeWidth="2"/>

    <!-- 辅助查看的线（斜率）1 -->
    <path
        android:pathData="M0,80
        L40,0 80,80"
        android:strokeColor="#ff0000" android:strokeWidth="1" android:strokeAlpha="0.5"/>

    <!-- 辅助查看的线（斜率）2 -->
    <path
        android:pathData="M80,80
        L120,160 160,80"
        android:strokeColor="#ffff00"  android:strokeWidth="1" android:strokeAlpha="0.5"/>
</vector>

<!--
pathData="="Q x1 y1, x y" // 控制点 (x1,y1)，终点 (x,y) 大写Q绝对位置 小写q相对位置
pathData="Q x1 y1, x y T x y" 	// 终点 T(x y)，控制点通过前面的Q命令计算得出
-->