Dataplot

Vol 1

Vol 2

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.

As of 9/2010, most major browsers provide native support for SVG files. The one exception is Internet Explorer. However, version 9 of Internet Explorer is expected to provide native support and various SVG plugins are available for earlier versions.

In addition to web browsers, a number of image viewers and graphics editing programs now support SVG files. For example, the open source GIMP program can view SVG files. Having a non web-based viewer can be helpful when debugging web applications in addition to providing another alternative for graphics output.

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.

This driver was substantially overhauled 10/2010. If you are interested in using this driver, it is strongly recommended that you upgrade to a version of Dataplot that is at least as new as 10/2010.

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.

Syntax 3:

By default, Dataplot generates the SVG graph at 600x465 pixels. Since the dimensions of the SVG graph are defined when the device is intialized (i.e., when the DEVICE 2 SVG command is entered), the typical method for specifying the pixel dimensions

DEVICE 2 PICTURE POINTS 800 600

cannot be used. This syntax provides a method for overriding the default dimensions. Note that the minimum dimension allowed is 200 pixels and the maximum dimension allowed is 1200 pixels.

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:

The "plot.svg" will actually be the name specified on the SET IPL1NA command.

Note that in some cases, you may want to specify a URL for the file name. This can be specified with the command

SET SVG URL <url>

In this case, the path will be removed from the file name and replaced with the specified URL. To turn this off, enter

SET SVG URL NULL

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.
LATEX	= Create graphical output in Latex format.
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 1:

 
SET IPL1NA PLOT1.SVG
DEVICE 2 SVG
DEVICE 2 PICTURE POINTS 400 300
TITLE SAMPLE SVG PLOT
PLOT X**2 FOR X = 1 1 9
DEVICE 2 CLOSE 

SET IPL1NA PLOT2.SVG
DEVICE 2 SVG 

DEVICE 2 PICTURE POINTS 500 400
TITLE SECOND SAMPLE SVG PLOT
PLOT X**3 FOR X = 1 1 9
DEVICE 2 CLOSE

Program 2:

 
.  svg.dp  - Sample SVG program
.
.            Demonstrate how to generate SVG within an
.            HTML page
.
background color yellow
.
set ipl1na plot.svg
device 2 svg  800 600
.
title size 3
title offset 2
title case asis
label case asis
title Sample SVG Plot
title offset 2
y1label Y Axis
x1label X Axis
label size 1.5
char size 1
.
char x circle box
char hw 1 0.5  0.5 0.375 0.5 0.375
char fill off on on
line solid dash dotted
.
feedback off
capture html svg.htm
plot x      for x = 1 1 9 and
plot x**1.5 for x = 1 1 9 and
plot x**2   for x = 1 1 9
device 2 close
end of capture
feedback on