aiSee: SVG Related FAQs

Where do I get an SVG Viewer plug-in?

The Adobe SVG Viewer is freely available from adobe.com/svg/viewer/install. The viewer is no longer developed or maintained, but is still available for download.

The Corel SVG Viewer is freely available from corel.com. Note that Corel’s viewer is not as sophisticated as Adobe’s since its development stalled much earlier. Nevertheless, the Corel SVG Viewer has its advantages (such as infinite zooming, which you might find useful when working with huge graphs).

Note further that you won’t be able to switch between the two plug-ins (or different versions of Adobe’s plug-in) without re-installing them each time unless you install the SVG Plugin Switch from carto.net/papers/svg/utils/SVGSwitch.shtml (Windows only). When invoked, this tool makes system calls to the DLLs of the different SVG viewers and changes the default SVG handler in the Windows registry, thus enabling you to switch between 3 different plug-ins with a single click.

Mozilla users should have a look at Mozilla+SVG or Firefox 1.5 or higher with native SVG support. For best results, we recommend using Firefox 3 beta 5 or higher.

Opera users should consider upgrading to Opera 8.5 or higher with native SVG support. For best results, we recommend using version 9.0 or higher.

Konqueror users should consider KSVG.

Safari users should consider upgrading to Safari 3.0 or higher.

How do I check for installed SVG Viewer using JavaScript?

You are welcome to head straight to our SVG gallery and borrow any browser/viewer recognition code you might find useful.

Top

How can I navigate through an SVG image?

Adobe/Corel

You can easily move the graph around using the mouse when the Alt key is pressed:

  1. Press the Alt key and hold it down.
  2. Left-click on the image and hold the left mouse button down. The image will follow the mouse movements until the left mouse button is released.

Try it out at our SVG gallery.

Top

How can I scale an SVG image?

Adobe/Corel

You can zoom in the image using the Ctrl key:

  1. Press the Ctrl key and hold it down. The mouse pointer turns into a magnifying glass.
  2. Now, either left-click on the image to zoom in, or hold the left mouse button down and drag over the graph window. A rubber band appears. This causes a zoom factor to be calculated so that just the area inside the rubber band is magnified to fit in the graph window after the left mouse button is released.

To zoom out, use the key combination Ctrl+Shift in the same manner.

Try it out at our SVG gallery.

Opera 8.5 or higher

To zoom in and out, use the context menu (right-click on the image).

Try it out at our SVG gallery.

Top

Can I search an SVG image for node/edge/subgraph label text?

Yes, however only if one of aiSee’s additional bitmap fonts has been specified for drawing node/edge/subgraph labels in the GDL source of the graph. aiSee’s default vector font is translated into <line> elements, whereas the bitmap fonts are translated into <text>. SVG treats <text> as text, rather than outlines, enabling the user to search SVG images for node/edge/subgraph labels by using the Find dialog in the Adobe SVG Viewer. The Corel SVG Viewer does not implement this feature.

See our SVG gallery for example graphs.

Top

Does GDL allow hyperlinks to be associated with nodes?

Yes. A URL can be specified in the info3 field of a node that is visited when the user clicks on that node in the SVG (or PNG or BMP) image. The URL specification has to be in the format

info3: "href:URL"

meaning that if the content of an info3 field does not start with href: (or a JavaScript event handler, see below), it will be interpreted as a normal information field rather than as a hyperlink. See example graph.

aiSee also supports the following optional hyperlink attributes:

These attributes can be specified in any order after the URL specification in the info3 field of a node. As of aiSee 2.1.96, the URL specification itself is optional. The specifications must be separated by semicolons. Examples:

info3: "href:http://www.aisee.com/svg/"
info3: "href:http://www.absint.com;
        target:_blank; onClick:foo('bar')"
info3: "href:#;
        onMouseOver:showInfo('humpty dumpty');
        onMouseOut:showInfo('')"

       // as of aiSee 2.1.96:
info3: "onMouseOver:showInfo('humpty dumpty');
        onMouseOut:showInfo('')"
info3: "onMouseDown:foo(1);onMouseUp:bar(2)"

       // When exporting graphs to HTML (mapped PNG/BMP),
       // you can also use:
info3: "href:javascript:bla(42,'Hello world!')"
       // However, when exporting graphs to SVG,
       // we recommend using:
info3: "onClick:bla(42,'Hello world!')"

Any semicolons in the URL or in the values of the hyperlink attributes themselves must be escaped — i.e., the special character \fi059 must be used instead. If the URL contains ampersands, they may not be escaped. aiSee will automatically convert them to &amp; when exporting the graph to SVG. Examples:

GDL specification SVG output
… script.asp?a=b&x=y … … script.asp?a=b&amp;x=y …
… script.asp?a=b&amp;x=y … … script.asp?a=b&amp;amp;x=y …
… script.asp?a=b\fi059x=y … … script.asp?a=b;x=y …
… script.asp?a=b;x=y … … script.asp?a=bEOL

If aiSee spots a mouse event handler specification in the GDL source of a graph, it automatically includes a reference to an external JavaScript file when exporting the graph to SVG:

<svg:script xlink:href="SVGFileName.js" language="JavaScript">
</svg:script>

This allows JavaScript functions and global variables to be conveniently specified in the external JS file rather than in the SVG file itself. Thanks to this approach, you can easily make changes to your graphs and re-export them to SVG without having to copy & paste JavaScript code from old SVG files into new ones each time.

See our SVG gallery for example graphs.

Top

How do I get the Adobe SVG Viewer to work with older versions of Opera/Netscape/Firefox?

If the SVG Viewer is not detected automatically, perform the following steps:

  1. Do a search on your computer for the files NPSVG6.dll and NPSVG6.zip. Usually, these files are to be found in the directory C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Plugins
    (you might have to replace the 6 with your actual version number).
  2. Copy both files into your browser’s plug-in folder:
    Browser Plug-in folder
    Opera 7.x C:\Program Files\Opera7\Program\Plugins
    Netscape 7.x C:\Program Files\Netscape\plugins
    Firefox C:\Program Files\Mozilla Firefox\plugins
  3. Close and re-start your browser.
  4. You might wish to check the submenu
    Opera 7.x Window -> Special -> Plug-ins
    Netscape 7.x Help -> About Plug-ins
    Firefox 1.x Tools -> Options -> Downloads -> Plug-Ins
    5. and look for the Adobe SVG Viewer to be listed to make sure everything is correctly installed.
  5. That’s it. Welcome to our SVG gallery!

Top

I’m trying to export a graph to SVG from the command line, but the aiSee GUI pops up instead. What’s wrong?

When you call aiSee from the command line, the usage is:

> aisee [options] [input file name]

For instance, this means that specifying

> aisee humpty.gdl -svgoutput dumpty.svg

won't work. Instead, you must specify:

> aisee -svgoutput dumpty.svg humpty.gdl

Top

How do I set the background color of an SVG image?

Sadly, SVG does not support directly specifying an image background color. With aiSee, however, you can easily work around this drawback by artificially enlarging the layout plane as follows:

  1. Set the top-level graph attributes xbase and ybase to high values, for example:

    xbase:2000 ybase:2000

  2. Export the graph to SVG.

  3. Open the SVG file with a text editor and manually adjust the four values of the viewBox attribute. This attribute is to be found in the third line of the SVG file.

Top

If you have further questions, please do not hesitate to contact us.