SVG グラフィック使用関連の手順早見表

このトピックでは、Scalable Vector Graphics () ファイルを Java ME MIDP アプリケーション向けのビジュアルモバイルデザイナで追加および操作するための共通タスクについて説明します。詳細な情報を参照するには、右欄に表示されているリンクをクリックしてください。

行う作業 手順
SVG ファイルをプロジェクトに追加する。
  • プロジェクトの <project_home>/src ディレクトリで使用するファイルを配置します。
  • プロジェクトの「プロパティー」ダイアログで、SVG ファイルの入ったフォルダを「構築」>「ライブラリおよびリソース」カテゴリに追加します。
  • プロジェクトの「プロパティー」ダイアログで、SVG ファイルの zip アーカイブを「構築」>「ライブラリおよびリソース」カテゴリに追加します。
SVG グラフィックを表示する。
  • 「プロジェクト」>「ファイル」>「お気に入り」ウィンドウで、ファイル名をダブルクリックします。
空の SVG ファイルを新規作成する
  1. 「ファイル」>「新規ファイル」(Ctrl+N) を選択します。
  2. 「カテゴリ」で「その他」を選択します。
  3. 「ファイルの種類」で「SVG ファイル」を選択します。空の SVG Tiny 1.1 ファイルを作成します。
SVG グラフィックのソースコードを表示および編集する
  • SVG ビューアの一番上にある「ソース」ボタンをクリックします。
    ソースコードが IDE の XML エディタに表示されます。
グラフィックのソースコードに形状を挿入する
  • 右にあるパレットから基本形状をドラッグし、ソースコードまでドラッグします。
    こうすると、ビューでグラフィックが操作できます。
ビューを拡大する
  • SVG ツールバーのドロップダウンメニューからズーム割合を選択します。
    • 虫眼鏡をクリックすると、ズームが 10% ずつ拡大または縮小します。
    • ズームの左にあるボックスをクリックすると、画像が画面にぴったり合います。
ナビゲータ表示をフィルタする
  • ナビゲータで SVG グラフィック ID を右クリックし、次の 3 つのフィルタのいずれかまたはすべてを選択します。
    • 属性を表示
    • 定義済みの ID のある要素だけを表示
    • アニメーションタグのみ表示
アニメーションを実行する。
  1. 「プロジェクト」ウィンドウで、SVG ファイルのファイル名をダブルクリックします。
  2. アニメーションを右クリックし、「アニメーションを開始」を選択します。

SVG ビューアの一番下にある横スクロールバーを使ってアニメーションのタイムスライスを選択することもできます。

SVG グラフィックをアプリケーションフローに追加する。
  1. SVGMenu、SVGSplashScreen、または SVGWaitScreen コンポーネントを、コンポーネントパレットからフローデザイナーにドラッグします。
  2. SVG グラフィックを、「プロジェクト」ウィンドウからコンポーネントにドラッグ & ドロップします。

または、コンポーネントをダブルクリックして、コンポーネントをスクリーンデザイナーに開き、開いた画面に SVG ファイルをドラッグすることもできます。

どちらの方法でも、「ナビゲータ」ウィンドウの「リソース」フォルダに SVGImage が追加されます。

IDE に外部 SVG エディタまたは作成ツールを追加する。
  1. 「ツール」>「オプション」を選択します。
  2. 「その他」>「SVG 設定」を選択します。
  3. 「変更」ボタンをクリックし、エディタのパスを IDE に追加します。

注: 次のエディタは、NetBeans Mobility Pack でテストされています。

  • Adobe Illustrator CS2
  • Beatware Mobile Designer
  • Ikivo Animator
  • Inkscape
SVG イメージまたはアニメーションを PNG イメージに変換する。
  1. エクスプローラの「プロジェクト」ウィンドウでイメージノードを右クリックし、「SVG を PNG イメージにエクスポート」または「SVG アニメーションを PNG イメージにエクスポート」を選択します。
  2. ダイアログが開き、イメージサイズを設定したり、プロジェクトの有効な構成またはすべての構成にイメージをエクスポートすることができます。

    イメージまたはアニメーションをすべての構成にエクスポートする場合、IDE は各構成の画面サイズに基づいて自動的にラスターイメージを作成します。たとえば、3 つの構成があり、それぞれの画面サイズが異なっている場合、その 3 つの画面サイズに応じたサイズの 3 つの PNG イメージまたはアニメーションが、エクスポート機能によって自動的に作成されます。

SVG イメージの内容をロックまたはロック解除する ツールバーでロックアイコン () をクリックします。

著作権と商標について