Menu "File" - "Export to:" - "Scalable Vector Graphics"

Vector graphics is a way to represent images as a set of geometric primitives - lines (straight, smooth curves, polygons), rectangulars, circles, closed polygons, etc. Such elementary figures are described by their points, instead of their actual bitmap images, so the files can be very compact. The main advantage of vector graphics is an ability to change its scale without loss of quality. This feature is especially useful for genealogic trees where change of scale over a wide range is one of the main requirements for navigation on the tree.

"Scalable Vector Graphics (SVG)" is WWW Consortium standard defining vector images described in XML format. Files with such images can be shown in web browsers either by a built-in SVG support (in Mozilla Firefox), or by special plug-ins (for example, Adobe SVG Viewer for Internet Explorer). It is necessary to tell, that SVG support in browsers is implemented in various degrees and leaves much to be desired, though it improves noticeably from version to version. Internet Explorer still (up to version 7) has no built-in SVG support, so the users have to install a plug-in to be able to see vector graphics.

The "Relatives" program can generate SVG files either in couple with an HTML page, or as a standalone SVG file. The html page with the SVG graphics can be viewed in a browser. The user can click on those persons who has notes or/and links, and they will be shown in a separate browser window. The standalone SVGs do not have such interactivity and are intended basically for import into vector graphics editors (Adobe Illustrator, CorelDRAW) or for sending to a printing shop to print the tree on a wide-format plotter.

"Export to Scalable Vector Graphics" dialog interface:

  1. Radio buttons "Export range: All/Selected": the entire tree or only a selected part will be exported.
  2. Radio buttons "Create SVG in HTML/SVG only" specifies creating either an html page and interactive svg file, which will be shown in that page or just a non-interactive svg file for import and printing.
  3. Radio buttons "Background" set the image background:
    Default is that is used in the program itself;
    White is, accordingly, white.
  4. Checkbox "Add persons info" specifies, whether or not to make HTML page interactive. If it is checked, the directory of the HTML page will contain a subdirectory [html_page_name]_files with data files for an individual person. These HTML files will be shown in a separate browser window when the user clicks on a person's frame.
  5. Dropdown list "Info encoding" allows to set the encoding (language) for such files with personal data. About the encoding see also here.
  6. Checkbox "Compressed (.svgz)" creates a compressed svg file with .svgz extention.
    Note: Compressed svgz file can not be shown in Mozilla Firefox browser.
  7. After pressing "Export" button a file dialog will appear to enter a name of the file. If "SVG in HTML" is created the user should enter a name for html file (by default the program offers name_of_the_tree_file.html). A file html_file_name.svg (or .svgz) will be created as well and, if "Add persons info" is checked, a directory html_file_name_files with info files will be created.
    In case of "SVG only", the only svg (or svgz) file will be generated.

Navigation on SVG tree

The SVG file shown in html page contains built-in JavaScript, providing navigation on the tree and display of person's information files.

Initially, on opening the page the tree is shown so that it completely fits in the browser window. The scale of the image thus can be quite small, if the tree is big.

    Four buttons in top-left corner of the window are intended to change the scale:
  1. Button sets 1:1 scale;
  2. Button sets the scale that the tree fits in the browser window (as on opening);
  3. Button increases the scale approximately for 40%;
  4. Button decreases the scale approximately for 40%.

When using these buttons the center point of the scale change is always the center of the window.

If to hold the Ctrl key pressed and click on the tree in a place free from person's frames the scale will increase approximately for 40%.

Also, if to hold the Ctrl and Shift keys pressed and click on the tree in a place free from person's frames the scale will decrease approximately for 40%.

The center of the scale change when using the mouse is always the point of the click.

The tree can be moved in whole by dragging it with the mouse by any place free of the persons' frames.

Clicking the mouse on a person's frame where the cursor turns to "hand" will open a separate browser window with information on this person (if he/she has notes or/and links).

Note: Very big trees (more than 1000 persons) are not recommended for display in SVG graphics, since they will be repainted quite slowly due to inherited features of the SVG technology. It appears in the slow reaction to movings or changes of scale - sometimes for a few seconds! Adobe SVGViewer plug-in is a bit faster than others, especially built-in SVG support in Mozilla Firefox.

See also:
Adobe SVG Viewer download page on Adobe web site.
Scalable Vector Graphics in Wikipedia
WWW Consortium web site, dedicated to SVG.