Android：SVGでシンプルな図形を描く方法を知っておく - 前人未踏の領域へ Androidアプリ開発編

内容

ベクター画像をデザイナーさんからもらって使っているけれど、ちょっとしたものは自分で書いて済ませてしまいたい。そんな時に。

四角形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FFFF00"
        android:pathData="M0,0 L0,24 L24,24 L24,0Z" />
</vector>

f:id:takeR:20211003222135p:plain

pathDataの意味

ペンで線を書く方法を指示するイメージをしよう

M0.0 → 座標0.0にペンを移動（MはMove）。ペンの位置は 0,0になる。開始点なので多分省略可能。
L0,24 → 0,0から0,24まで線を引く（LはLine）。ペンの位置は 0,24にくる。
L24,24 → 0,24から24,24まで線を引く
L24,0 → 24,24から24,0まで線を引く
Zで線を閉じる
24 × 24のキャンバスがあるとして、左上が0,0になる
コマンド＋座標で表す
コマンドが成立すると開始点（ペンの位置）が変わる
大文字（M,L）は絶体座標になる
小文字（m,l）は相対座標になる
大文字Zはclosepathコマンド。開始点に戻る直線を引く。座標は無関係。

円

楕円をの描画方法を使って半円を２つ作る。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF0000"
        android:pathData="M0,12
        A12,12 0 1,1 24,12" />
    <path
        android:fillColor="#FFFF00"
        android:pathData="M24,12
        A12,12 0 1,1 0,12" />
</vector>

f:id:takeR:20211003230358p:plain

pathを１つにまとめる

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FFFF00"
        android:pathData="M0,12
        A12,12 0 1,1 24,12
        A12,12 0 1,1 0,12" />
</vector>

f:id:takeR:20211003230547p:plain

A（Arc）の解説

開始点から終了点に向けてある半径を持つ楕円は２つ描ける。その２つの楕円に対し、どの部分を描画しますか？というのが指定する内容になる。解説すると長くなるのと楕円じゃなくて円を描く場合にはそんなに気にしなくていいので詳しい話は省略。

A12,12 0 1,1 24,12の意味

rx, ry	x-axis-rotation	large-arc-flag	sweep-flag	x, y
楕円のｘ半径とy半径	x軸に対してどれだけ回転させるか	楕円弧の角度が180度未満なら0、180度以上なら1	楕円弧を負の方向に描画する場合は0, 正の方向なら1	終了座標
12,12	0	1	,1	24,12

三角形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="12dp"
    android:height="8dp"
    android:viewportWidth="12.0"
    android:viewportHeight="8.0">
    <path
        android:pathData="M6,0l6,8l-12,0Z"
        android:fillColor="#FEE100" />
</vector>

小文字を使って相対座標で書いてるけど四角形と理屈は同じ。

f:id:takeR:20211003233928p:plain