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
Choose Files > New File (Ctrl+N)
Under Categories choose Other.
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
In the Projects window, double-click on the file name of the SVG file.
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
Drag an SVGMenu, SVGSplashScreen, or SVGWaitScreen component from
the Component Palette into the Flow Designer.
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.
Choose Tools > Options.
Choose Miscellaneous > SVG Settings.
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
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.
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.