web-dev-qa-db-ja.com

Illustrator(または同様のツール)からAndroid VectorDrawablesを作成する方法は?

Illustratorのようなプログラムにベクター画像がある場合、使用するAndroidのVectorDrawableフレームワークの正しい形式にするにはどうすればよいですか?

SVGをVectorDrawable xml形式に変換するツールを見つけました: http://inloop.github.io/svg2Android/ パス"。

そのようなファイルを出力する方法はありますか?

36
cottonBallPaws

このツールは、現在<path>要素のみをサポートしているようです。そのため、たとえば<rect><circle>などをサポートしていません。

図面でこのようなプリミティブを使用している場合、それらを変換する必要があります。使用する必要のある正確なオプションは忘れましたが、おそらく「パスに変換」のようなものです。

このリンクが役立つ場合があります。

https://graphicdesign.stackexchange.com/questions/15475/convert-primitive-to-path-using-svg-format-in-illustrator

15
Paul LeBeau

Android Studioを使用している場合、最適な方法は次のとおりです。

  • 「描画可能」フォルダーを右クリックして、「新規」>「ベクター資産」を選択します
  • 「ローカルSVGファイル」をクリックして独自のSVGファイルをインポートするか、「素材アイコン」をクリックして提供されたアイコンを使用します。
  • リソース名を必要な名前に変更します。
  • [次へ]をクリックして、ターゲットモジュールとresディレクトリを選択します。
  • 完了をクリックします。

ウィザードは、SVGファイルからXMLを生成します。

44
Q.Jones

SVG to VectorDrawable Converter またはその オンラインバージョン を使用します。これは、SVG画像からAndroid VectorDrawable XMLリソースファイルへのバッチコンバーターです。

コンバーターの使用方法に関する十分な情報を提供するreadmeへのリンクポイント。

13
A-student

すべてをパスに変換する

AIプロジェクトファイルをSVGとして保存する前に、次のことを確認してください。

  1. Object > Expand...を使用して、すべてのパスをアウトラインに変換します。

  2. 形状パス(<circle>など)をCompound Pathsに変換するには、オブジェクトを選択した状態で右クリックし、Make Compound Pathを選択します。

これが完了すると、SVGの各図形は<path>になります。


SVGを最適化する

質問に記載されているアプリを使用して、中程度の複雑さのSVGをベクトル描画可能に変換しようとすると、一部を忘れてしまうという問題がありました。私はそれがフォーマットされている方法に関係しているに違いないと考えたので、 [〜#〜] svgomg [〜#〜] 、 SVG最適化アプリ。必要最低限​​の機能を備えています。

SVGOMGまたは別のアプリを使用してSVGを最適化し、ファイルをダウンロードします。


最適化されたSVGをベクトル描画可能に変換します

ダウンロードしたSVGを SVG2Android にドロップすると、目的のものが得られます。

12
Dom