使い方
- 左側に VectorDrawable XML を貼るか、サンプル / ファイルを開きます。入力と同時にプレビューが更新されます。
- 背景・ズーム・RTL・ティント・テーマ色はプレビューだけ変えます。元の XML はそのままです。
- SVG のコピー/保存、PNG 保存はブラウザ内だけです。アップロードはありません。
Android VectorDrawable XML を貼り付けると SVG で即プレビューします。path・group・clip-path・グラデーション・tint をブラウザで描画し、SVG / PNG で書き出せます。
表示
背景
ズーム
テーマ色
ティント
行: 0
列: 0
選択: 0 文字
プレビュー
入力・出力・制限
入力は VectorDrawable XML または .xml。出力はライブ SVG プレビューと SVG/PNG 書き出し。animated-vector は内側の静的 <vector> のみ。@color/?attr はテーマ色に置換。下書きはこの端末のローカルストレージに 30 日保存されます。
例
公式の充電バッテリーサンプルのように、<vector> 内の回転 <group> と <path android:fillColor="#AARRGGBB"> を入れると、傾いたアイコンがプレビューされます。
VectorDrawable 構文
- <vector>: viewportWidth/Height、width/height (dp)、alpha、tint、autoMirrored
- <path>: pathData、fillColor、fillAlpha、fillType (evenOdd/nonZero)、strokeColor、strokeWidth、strokeLineCap/Join
- <group>: rotation、pivotX/Y、scaleX/Y、translateX/Y を子に適用
- <clip-path>: 同じグループの描画をクリップ
- 色は #RGB / #ARGB / #RRGGBB / #AARRGGBB。Android はアルファが先頭です。
- API 24+ の線形・放射グラデーション (aapt:attr) をサポート。sweep は近似/警告。
- ?attr/colorControlNormal などのテーマ属性はテーマ色で描画します。
よくある質問
XML はサーバーに上がりますか？
いいえ。貼り付け、ファイル、プレビュー、書き出しはブラウザ内です。下書きもこの端末だけです。
AnimatedVectorDrawable は再生されますか？
いいえ。<animated-vector> 内の静的 <vector> だけ描画します。ObjectAnimator の再生は未対応です。
色が違って見えます。
Android の fillColor は #AARRGGBB（アルファ先頭）です。SVG の #RRGGBBAA とは違います。@color と ?attr はプロジェクトリソースなしでは解決できないのでテーマ色を使います。
