Using the Symbol Editor > Using More Features of the Symbol Editor > Exploiting Advanced Graphics Features > Importing a Vector Graphic

Vector graphics are added to a symbol in the same way as any other object. To import an SVG image, do the following.

  1. In the Symbol Editor, create a new symbol. For more information, see Making a New Symbol.
  2. Click the Add Image button in the toolbar. The Choose Image File dialog box opens.

images/diasym_addimagebutton.png

Figure 2.1 The Add Image Button
  1. Navigate to the following directory:
  2. <installdir>/jviews-diagrammer81/bin/SymbolEditor/data/examples
  3. Select Scalable Vector Graphics Files in the Files of Type list.
  4. Select progressbar.svg and click Open. The Adding Vector Graphics dialog box opens.
  5. Click OK. The progressbar image is added to your symbol.

images/diasym_newsvg.png

Figure 2.2 A Symbol Containing an SVG Image

As shown in Figure 2.2, 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.

Note
When an SVG image is added to a symbol, the Image tab is added to the Styling Customizer. This tab is used to edit the width and height of the image manually. It also contains the URL to the imported image file.

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.

In the symbol you have just created, do the following:

  1. Change the name of the imported image from SVG to progressbar. For information on how to do this, see Basic Object Customization.
  2. Delete the Shape and Text objects from your symbol. For more information, see Deleting an Object. The progressbar SVG image is now the base object.
  3. Open the bampalette created in Using Palettes and Categories. For more information, see Opening a Symbol and Palette.
  4. Save the new symbol as svgprogressbar in the progressbars category of the bampalette. See Saving a Symbol for more information.