web-dev-qa-db-ja.com

グループ構造を適切に維持しながら、SVGファイルをAndroid Vector Drawable XMLに変換する

SVGファイルをAndroid Vector Drawable XMLsに変換します。SVGの構造が必要です。SVGが複数の要素をグループ化することを拡張するには、グループ化も反映される必要があります。 Android Vector Drawable。

残念ながら、SVGからVector Drawableへの変換を行うために見つけたツールは、ファイルの構造内の既存のグループ化を取り除く方法でファイルサイズを最小化しようとします。

グループ化ツリーをそのまま残す変換を行うスマートな方法はありますか？

androidsvgdata-conversionandroid-vectordrawable
11
Christian

Shape Shifter を試しましたか？これは、ベクターとsvgを簡単にアニメートできるプログラムとしての意味ですが、.svgをインポートしてすぐにVector Drawableにエクスポートできます。グループ構造も保持する必要があります（ただし、明示的には行っていないため、約束しません）。

21
swerly

アップデート2019：古い回答で指摘されているように、外部ツールやHeckを使用する必要はありません。 Android StudioのAsset Studioでは、SVG/PSDをベクトルに変換できます

  • アプリフォルダーを右クリック->新しいベクターアセット
  • 下の画像に示すように、ラジオボタンで2番目のオプションを選択して、ローカルファイルからベクトルを作成します。
  • フォルダーアイコンをクリックしてローカルSVGファイルをロードすると、自動的にベクターに変換されます。

enter image description here

12
Hitesh Sahu

空のxmlファイルを作成します。パスデータを除くVectorDrawableのすべての属性を書き込みます。ワードパッドでSVGファイルを開きます。パスデータをコピーして、作成したxmlファイルに貼り付けます。

SVGの例：

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -174 1280 870">
  <g transform="matrix(1 0 0 -1 0 696)">
   <path fill="currentColor"
d="M540 97.4004l-39 21q-47 30 -77 84q-35 62 -34 129q2.10449 95.0107 62 163q74 84 184.5 84t179.7 -86.4004q59.7998 -73.5996 61.2002 -151.199q1.59961 -88.4004 -44.4004 -153.601q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002q18.2002 -2 37.2002 -2.40039
q78 0.400391 157 0.400391l-12 27q-3 4 -23.7998 -5.7998z" />
  </g>

</svg>

同じパスデータを持つxmlファイルの例：

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:width="1280dp"
        Android:height="870dp"
        Android:viewportWidth="1280.0"
        Android:viewportHeight="870.0">

    <path
        Android:pathData="

        M540 97.4004l-39 21
        q-47 30 -77 84
        q-35 62 -34 129
        q2.10449 95.0107 62 163
        q74 84 184.5 84 t179.7 -86.4004
        q59.7998 -73.5996 61.2002 -151.199
        q1.59961 -88.4004 -44.4004 -153.601
        q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002
        q18.2002 -2 37.2002 -2.40039 
        q78 0.400391 157 0.400391l-12 27
        q-3 4 -23.7998 -5.7998       "

        Android:strokeLineCap="round"
        Android:strokeColor="#f00f"
        Android:fillColor="#00000000"
        Android:strokeWidth="32"/>
</vector>

注：パスデータの末尾の「z」は削除され、読みやすくするために行も手動で再配置されました。

この方法では、SVGを1つずつ手動でxmlに変換する必要があります。

3
Vempati Satya Suryanarayana

http://inloop.github.io/svg2Android に移動して、SVGファイルを配置し、ベクターに変換します

1
Vibhu Vikram Singh