WebSphere brand IBM WebSphere Premises Server, Version 6.1.x

Converting a graphic to SVG format

You can import any graphic format supported by the SVG specification. All conformant SVG implementations must support PNG (Portable Network Graphics), JPEG (Joint Photographic Experts Group), and SVG images. The Adobe® SVG viewer required by Location Awareness Services for WebSphere® Premises Server also supports GIF (Graphics Interchange Format) images. Graphic formats, such as CAD, TIFF, or BMP, can be converted to one of the supported formats: PNG, JPEG, or SVG. Use a graphic editing tool such as CorelDraw, Adobe Photoshop, or Adobe Illustrator to perform these conversions.
Tip: Starting from a bitmap format results in lower quality. Vector formats result in higher quality.
Restriction: Using SVGs larger than 4 MB is not recommended.

Converting a vector format to SVG

About this task

If the input format is a vector graphic, such as CAD, convert the graphic directly to SVG.

Procedure
  1. Import the graphic into a graphic editing tool, such as Adobe PhotoShop.
  2. Prepare the graphic to be used in the Spatial Management Client by making the file as small as possible. The larger the graphic file, the more time it takes to load and render in the GUI. Do the following:
    • Remove excess layers of detail from the graphic before converting it. Layers of unwanted details such as plumbing, electrical, landscaping, and wall types, can be hidden under the layers of the basic area shape.
    • If possible, remove extra rooms or areas from your CAD drawing. For example, export only a room if you do not need the entire floor.
    • Do not embed fonts in the SVG file if given a choice; use system fonts instead. Embedding fonts significantly increases the file size.
    • Pre-scale the image so that the longest axis is no more than 600 pixels in length.
  3. Make sure the upper-left corner of the graphic is the position you want to be 0, 0 on the X, Y coordinates in the Spatial Management Client. If it is not, crop the graphic until the positioning is correct.
  4. Write down the graphic width and height values for later use.
  5. Export the file as an SVG file. For example, floor1.svg.
  6. Open the SVG file in a text editor, add the onload attribute, and modify the width and height, as necessary:
    <svg onload="clearSvgArray(evt)" width="width" height="height" viewBox="0 0 width height">
    Note: Make sure the graphic width and height values are those you wrote down while using the graphic editing tool. You can round the values to whole numbers if preferred.
    For example:
    <svg onload="clearSvgArray(evt)" width="586" height="452" viewBox="0 0 586 452">
    Note: Because a PDF is vector-based, you can also convert PDF files to the SVG format. However, with the PDF format you cannot alter or delete unnecessary layers, and so the file size is larger.

Converting a bitmap format to SVG

About this task
If the input format is a bitmap, you can convert the graphic to a PNG or JPEG format, which can then be linked to an SVG container graphic. Complete the following steps:
Procedure
  1. Import the graphic into a graphic editing tool, such as Adobe PhotoShop.
  2. Prepare the graphic to be used in the Spatial Management Client by making the file as small as possible. The larger the graphic file, the more time it takes to load and render in the GUI. Do the following:
    • Remove excess layers of detail from the graphics before converting them. Layers of unwanted details such as plumbing, electrical, landscaping, and wall types, can be hidden under the layers of the basic area shape.
    • Pre-scale the image so that the longest axis is no more than 600 pixels in length.
    • Change the image bit depth of bitmap formats so that they are as small as possible. For example, in a simple line bitmap graphic, the graphic does not have to have a 24-bit depth when a 1-bit depth conveys the same image.
  3. Make sure the upper-left corner of the graphic is the position you want to be 0, 0 on the X, Y coordinates in the Spatial Management Client. If it is not, crop the graphic until the positioning is correct.
  4. Write down the graphic width and height values for later use.
  5. Export the file as a PNG or JPEG format. For example, floor1.jpg.
  6. Open an empty file in a text editor and create an SVG container file for the graphic by copying the following:
    <svg onload="clearSvgArray(evt)" width="width" height="height" viewBox="0 0 width height">
    	
    	<g>
        <image height="height" width="width" xlink:href="file_name"></image>
     </g>
    </svg>
    Note: The graphic width and height values are those you wrote down while using the graphic editing tool.
    For example:
    <svg onload="clearSvgArray(evt)" width="586" height="452" viewBox="0 0 586 452">
    	
    	<g>
        <image height="452" width="586" xlink:href="floor1.jpg"></image>
     </g>
    </svg>
  7. Save the file as an SVG file. For example, floor1.svg.

Library | Support | Terms of use

(c) Copyright IBM Corporation 2004, 2008. All rights reserved.
U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.