SVG

Name:

SVG Type:

Output Device Command Purpose:

Create SVG (Scalable Vector Graphics) format graphics files. Description:

GIF
JPEG
PNG (Portable Network Graphics)

Note that these are all bit mapped formats.

SVG (Scalable Vector Graphics) is an emerging graphics format for web applications. SVG is an XML (extensible markup language) based format. Note that XML is a meta markup language, that is it is a langauge for defining languages. SVG is one specific implementation of an XML language. This is analogous to HTML being a specific implementation of a SGML (Standard Generalized Markup Language) language. SVG is expected to develop into an important format over the next several years.

SVG is a relatively new standard (as of 3/2002) and not all browsers will support it. Adobe provides a freely downloadable plugin for Netscape and Internet Explorer on the PC and Mac OSX. Search for the "SVG Viewer" on the Adobe web site (http://www.adobe.com). Also, there are several SVG viewers/browsers (e.g., XSMILES) under development. Support for SVG graphics in web pages should grow rapidly in the next few years.

SVG is a vector based rather than a bitmap based protocol. Also, SVG is an ASCII file that contains a textual description of the graph. One of the primary advantages of this approach is that web graphics can be easily edited much the way the HTML files can be edited. This can make the maintenance of the graphics on a web site easier.

In addition to web applications, it is expected that SVG will be supported by many graphics editing programs (e.g., Photoshop, Corel Draw).

Syntax 1:

This form designates device 1 as an SVG graphics device, which results in the SVG output being written to the screen. This syntax is not partiucularly useful since the SVG needs to be saved in a file so that an external SVG viewer can read it.

Syntax 2:

This form designates one of DATAPLOT's 3 devices (typically device 2) as an SVG device.

Examples:

Note:

The SET IPL1NA command specifies the name of the file. Note that this name is currently converted to upper case. This command should come before the DEVICE 2 SVG command.

Note:

Currently, Dataplot supports the following class for the background (this only sets the color, not the size):

rect.background

Currently, Dataplot supports the following classes for lines:

Currently, Dataplot supports the following classes for text:

Currently, no classes are supported for region fills.

As we develop more experience with SVG graphics, we may expand the supported classes.

When using external style sheets, you modify the attributes of the clases. However, you do not edit which classes are available (Dataplot generates the SVG file based on the above classes.

Dataplot will check the value of certain attributes (color for lines, color and size for text) when generating the SVG file. If these are not the default values, then a local "style" option will be added for that element to override the value in the style sheet.

To make your own style sheets, simply copy the default file "dataplot.css" to a new file name and then edit that file. Use the SET SVG STYLE SHEET NAME command (see below) to specify the location of the style sheet you wish to use (this should be the location of the style sheet relative to the location of the SVG file on your web pages).

Note:

SET SVG COORDINATE SYSTEM <PIXEL/PERCENT> - specify whether coordinates are specified in pixel units or percent untis. Currently, only pixel units are supported. The PERCENT option is reserved for possible future implementation.
SET SVG FONT NAME <SERIF/SANS/MONOSPACE> - specify the font name for hardware characters. Generic names (i.e., supported on all SVG viewers) are: serif, sans-serif, and monospace. Specific font names (e.g., arial) depend on what fonts are installed on your local system. Currently, only the generic fonts are supported. For specific fonts, use style sheets and set the name in the style sheet. The default is sans-serif.
SET SVG FONT WEIGHT <NORMAL/BOLD> - specify whether text is drawn as bold or normal. The default is bold.
SET SVG FONT STYLE <NORMAL/ITALIC> - specify whether text is drawn in an italic style or a normal style. The default is normal.
SET SVG CAP STYLE <BUTT/ROUND/SQUARE/NONE> - specify the cap style for line drawing. The default is butt.
SET SVG JOIN STYLE <MITER/ROUND/BEVEL/NONE> - specify the join style for line draweing. The default is miter.
SET SVG HARDWARE FILL SWITCH <NONZERO/EVENODD/SOFTWARE> - by default, region fills are performed in hardware using a "non-zero" rule. You can also specify that an "evenodd" rule be used. In general, using hardware region fill will have better performance. However, hardware fills can occassionally have unpredictable results. In this case, you can have Dataplot perform region fills in software by specifing SOFTWARE.
SET SVG STYLE SHEET <INTERNAL/EXTERNAL/NONE> - specify whether the SVG graphics are generated using style sheets (EXTERNAL) or not (NONE). In general, style sheets are most beneficial when multiple graphics are being used on a web site. SVG supports both external style sheets (i.e., stored in a separate file) or internal to the SVG file. Currently, Dataplot only supports external style sheets. The INTERNAL switch is reserved for possible future implementation. There is also an EXTERNAL USE and an EXTERNAL CREATE option. This is reserved for future use, but it currently has no effect.
SET SVG STYLE SHEET NAME <file name> - specify the name of the external file sheet (up to 80 characters). The default name is "dataplot.css".
SET SVG FOREGROUND COLOR <color> - specify the default foreground color when style sheets are being used. If a line or text color does not match this foreground color, then Dataplot inserts a "style" option that overrides the style sheet value. Note that the default color is set independently in the style sheet file. So you may need to edit the style sheet as well.

Note:

" element. You can add your own translate, scale, and rotate options to the SVG file to transform the full plot (this is an element of the "Scalable" part of Scalable Vector Graphics).

Note:

Currently, Dataplot generates static plots in SVG format. SVG supports advanced capabilities such as animation, gradients, and Javascript scripting. Support for at least some of these capabilities may be added in future implementations. However, you can edit the SVG file (either via an ASCII text editor or a graphics editing program) to add such capabilities. Note:

Graphic elements are now assigned "layers". This may be useful if you import the SVG graphic into a graphics editing program (i.e., it may allow individual elements of the graph to be edited). Default:

None Synonyms:

None Device Notes:

HARDWARE TEXT - The SVG device currently supports hardware characters. Available fonts may depend on what fonts you have supported on your system.
COLOR - SVG supports the full range of 88 colors supported by Dataplot.
HARDWARE FILL - Solid area fills are done in hardware. You can override this to generate them in software.
DASH PATTERNS - The following dash patterns are available:
If you want to modify these patterns, it is recommended that you use external style sheets.
LINE WIDTH - Thick lines are generated in hardware.
GRAPHICS INPUT - The CROSS-HAIR command is not supported for this device.
The CHARACTER PIXEL option is supported on this device.

Related Commands:

GD PNG/JPEG	= Direct graphical output to a file in PNG/JPEG format.
POSTSCRIPT	= Direct graphical output to a Postscript device.
HPGL	= Direct graphical output to an HPGL device.
DEVICE	= Specify certain actions for the graphics output.

Applications:

Web Applications, Graphics Import Into Graphics Editing Programs Reference:

O'Reilly

Andrew Watt (2002), "Designing SVG Web Graphics", New Riders.

Implementation Date:

Program:

Date created: 3/27/2002
Last updated: 1/26/2009
Please email comments on this WWW page to alan.heckert@nist.gov.