Explains how to best use the capabilities of advanced graphics in symbols.

In Getting started with the Symbol Editor, you learned how to manipulate graphic objects, parameters and conditions. In this section, you will see how to apply these techniques to symbols containing imported images.

The Symbol Editor can import the following file types:

PNG, JPG, and GIF format files are static images. This means that their appearance cannot be edited directly using the Symbol Editor. However, static images have a smaller memory footprint. You use static images to create light symbols. For more information, see Designing for performance.

Both IVL and SVG files contain vector graphics. Using the Symbol Editor, you can edit and add conditions to each object contained in an imported vector graphic.

Vector graphics are added to a symbol in the same way as any other object.

To import an SVG image:

As shown in the figure above, the imported image is named SVG in the Symbol Outline pane. If more than one SVG image is added to the symbol, additional graphics are named SVG2, SVG3…SVGn automatically.

An imported image is placed in the top layer of the symbol hierarchy. However, an image can be used as the base object for the symbol.

To use the imported image as the base object of the symbol:

When you ungroup an SVG image, the Symbol Editor gives you access to all the objects contained in the graphic.

To ungroup the svgprogressbar symbol created in Importing a vector graphic:

As shown in the figure above, the Symbol Outline pane shows all the objects contained in progressbar. When an SVG image is ungrouped, the Symbol Editor gives each object a name automatically. An ungrouped image is no longer in SVG or IVL format, it is a standard Rogue Wave® JViews symbol; the Image tab is no longer displayed in the Styling Customizer when the SVG root object is selected.

As shown in figure An ungrouped SVG image, an ungrouped SVG file has multiple layers. Each layer is translated as a group of objects with a base object in the Symbol Editor. When a layer base object is selected, the Layout tab is displayed in the Styling Customizer.

You use the different layout options to control the distribution and arrangement of the objects inside the selected layer. The default layout type is an Attachment layout. The following figure shows how object distribution changes for different layout types.

The svgprogressbar symbol created in Converting SVG images to symbols is essentially the same as the basicprogressbar created in Changing symbol layers. That is, a collection of shapes where one object is expanded to display a change in real world events. The difference is that the svgprogressbar shown in figure An ungrouped SVG image is visually more pleasing than the basicprogressbar shown in figure The region symbol. As you will now see, it is much faster to add intelligence to a symbol made with advanced graphics.

To add intelligence to an advanced graphic symbol, you need to:

The svgprogressbar symbol contains 5 different objects layered one on top of the other. The GeneralPath3 object, as shown in figure An ungrouped SVG image, is a red bar.

To transform this object:

Symbol graphics created by graphic artists using standard graphics packages have a finer look and feel. Importing advanced graphics into the Symbol Editor means symbols are created faster by the Symbol Editor. To add intelligence to a symbol based on SVG images, use exactly the same methods as you do for a basic symbol. See Planning a project for the Symbol Editor to see the recommended workflow for creating symbols.