Using SVG Graphics: Quick Reference

This topic describes common tasks you can perform to add and manipulate Scalable Vector Graphics ( ) files within the Visual Mobile Designer for Java ME MIDP applications. For more detailed information, click the links in the right column.

To perform this task Follow these steps
Add an SVG file into your project
  • Place the file you the want to use in the <project_home>/src directory of your project.
  • Add a folder with SVG files into the Build > Libraries & Resources category in the project's Properties dialog box..
  • Add a zipped archive of SVG files into the Build > Libraries & Resources category in the project Properties dialog box.
View an SVG graphic
  • In the Projects > Files > Favorites window, double-click on the file name.
Create a new, empty SVG file
  1. Choose Files > New File (Ctrl+N)
  2. Under Categories choose Other.
  3. Under File Types choose SVG File. Creates an empty SVG Tiny 1.1 file.
View and edit the source code for an SVG graphic
  • Click the Source button at the top of the SVG Viewer.
    The source code is displayed in the IDE's XML editor.
Insert shapes into a graphic's source code.
  • Drag a basic shape from the palette on the right and drag it into the source code.
    You can then manipulate the graphic in the View.
Zoom in on a view
  • Choose a zoom percentage from the drop-down menu in the SVG toolbar.
    • Clicking the magnifying glass increases or decreases the zoom by 10%.
    • Clicking the box to the left of the zoom fits the image on the screen.
Filter the Navigator view
  • Right-click on an SVG graphic ID in the Navigator and choose any or all of three filters:
    • Show attributes
    • Show only the elements with a defined ID
    • Show only animation elements
Run an animation
  1. In the Projects window, double-click on the file name of the SVG file.
  2. Right-click on the animation and choose Start Animation.

You can also use the horizontal scrollbar at the bottom of the SVG viewer to select a time slice of the animation.

Add an SVG graphic to the application flow
  1. Drag an SVGMenu, SVGSplashScreen, or SVGWaitScreen component from the Component Palette into the Flow Designer.
  2. Drag and drop an SVG graphic from the Projects window into the component.

Alternatively, you can double-click a component to open it in the Screen Designer, then drag an SVG file into the open screen.

With either approach, and SVGImage is added to the Resources folder in the Navigator Window.

Add an external SVG editor/authoring tool to the IDE.
  1. Choose Tools > Options.
  2. Choose Miscellaneous > SVG Settings.
  3. Click the Change button and add the path of your editor to the IDE.

Note: The following editors have been tested with the NetBeans Mobility Pack:

  • Adobe Illustrator CS2
  • Beatware Mobile Designer
  • Ikivo Animator
  • Inkscape
Convert an SVG image or animation to a PNG image
  1. Right-click the image node in the Projects window of the Explorer and choose Export SVG Image to PNG Image, or Export SVG Animation to PNG Animation.
  2. A dialog opens, giving you the opportunity to set an image size and export the image to the active configuration or all configurations for your project.

    If you choose to export the image or animation to all your configurations, the IDE automatically creates raster images based on the screen size of the individual configuration. For example, if you have three configurations, each with different screen sizes, the export function automatically creates three PNG images or animations with sizes corresponding to those three screen sizes.

Lock or unlock the content of an SVG Image Click the lock icon () in the toolbar.

Legal Notices