Previous Page | Next Page

Printing with SAS

Creating Scalable Vector Graphics Using Universal Printing

Overview of Scalable Vector Graphics in SAS


Scalable Vector Graphics in SAS

Scalable Vector Graphics (SVG) is an XML language for describing two-dimensional vector graphics. SAS creates SVG documents based on the W3C recommendation for SVG documents. SAS SVG documents are created using the UNICODE standard encoding.

Note:   Animation is not supported in SAS 9.2.  [cautionend]

SAS can create SVG documents by using either Universal Printers or SAS/GRAPH device drivers. SVG documents that are created by Universal Printers are stand-alone SVG documents. SVG documents that are created by SAS/GRAPH device drivers can be either stand-alone SVG documents or SVG documents that are embedded in HTML documents.

A stand-alone SVG document can be embedded in an HTML document by reference as an external link, embedded inline, or as a CSS2 or XSL property reference. For information about embedding SVG documents in Web pages, see the topic on using SVG documents in Web pages in the SVG 1.1 specification on the W3 SVG Web site http://www.w3.org/TR/SVG.

SVG documents created by SAS/GRAPH can contain tooltips and have drill-down capabilities. SVG documents created by Universal Printers are stand-alone SVG documents.

The information provided here is limited to creating SVG documents using Universal Printers. For complete information about SVG documents, see the W3C recommendations for SVG documents. For information about creating SVG documents using SAS/GRAPH, see SAS/GRAPH: Reference.

For detailed information about the SVG standard, see the W3 documentation at http://www.w3.org/TR/SVG.


SVG Terminology

SVG canvas

the space upon which the SVG document is rendered.

viewBox

specifies the coordinate system and the area of the SVG document that is visible in the viewport.

viewport

a finite rectangular space within the SVG canvas where an SVG document is rendered. In SAS, the viewport is determined by the value of the PAPERSIZE= system option for a scalable viewport and by the SVGWIDTH= and SVGHEIGHT= system options for a static viewport.

viewport coordinate system or viewport space

the starting X and Y coordinates and the width and height values of the viewport.

user coordinate system or user space

the starting X and Y coordinates and the width and height values of the area of the document to display in the viewport.

user units

is equal to one unit of measurement that is defined in your environment's coordinate system. In many cases, the coordinate system uses pixels. Check with your system administrator to determine the unit of measure that is used in your environment.


Why Create SVG Documents?

SVG documents display clearly at any size in any viewer or browser that supports SVG. SVG documents are ideal for producing documents to display on a computer monitor, PDA, or cell phone; or documents to be printed. Because it is a vector graphic, a single SVG document can be transformed to any screen resolution without compromising the clarity of the document. In comparison, a multiple raster graphic image might require using different screen resolutions in order to display the image at various screen resolutions and sizes.

An SVG document might also be smaller in file size than the same image created by a raster graphic Universal Printer, such as GIF or PNG.


ODS Destinations That Produce SVG Documents

You create SVG documents using the ODS Listing, HTML, or Printer destinations. SVG documents created by the ODS Listing and HTML destinations are useful for creating graphs using SAS/GRAPH. Using the ODS Listing destination results in a stand-alone graph. Using the ODS HTML destination results in an SVG document that is embedded in an HTML document using <embed> tags. SAS/GRAPH output can also be created using the ODS Printer destination with SVG printers. However, support for tooltips and drilldown paths are not available with the ODS Printer destination. For information about creating SVG documents for SAS/GRAPH devices, see SAS/GRAPH: Reference.

SVG documents that are created by the ODS Printer destination are created by an SVG Universal Printer, and they are stand-alone documents. These documents can contain output from both SAS/GRAPH and non-graphic procedures such as tables.


Fundamentals of Creating SVG Documents Using Universal Printers

You can create SVG documents by using either programming statements or SVG Universal Printers in the Print dialog box.

To create SVG documents programmatically, specify an SVG Universal Printer as the value of the PRINTERPATH= system option and specify the ODS PRINTER statement, as shown below. 

options printerpath=svg;
ods listing close;
ods printer;

...more SAS code...

ods printer close;
ods listing;

Alternatively, you can specify the SVG printer in the ODS PRINTER statement and eliminate the OPTIONS statement, as shown below. 

ods listing close;
ods printer printer=svg;

...more SAS code...

ods printer close;
ods listing;

SAS has several system options that enable you to modify various aspects of your SVG document, such as a specific SVG Universal Printer, the height and width of the SVG document, the size of the viewBox, or whether a multi-page SVG document contains navigational controls. By using the NEWFILE option iwn the ODS PRINTER statement, you can create an SVG document for the output from each procedure or DATA step.

For more information, see the PRINTERPATH= System Option in SAS Language Reference: Dictionary and the ODS PRINTER Statement in the SAS Output Delivery System: User's Guide.

To create SVG documents by using the Print dialog box, you select an SVG printer from the Name drop-down list box.

Print Dialog Box For Printing an SVG Document

[Print Dialog Box For Printing an SVG Document]

Web Server Content Type for SVG Documents

If the mime content type setting for your Web server does not have the correct setting for SVG documents, your Web browser might render SVG documents as text files, or SVG documents might be unreadable.

To ensure that SVG documents are rendered correctly, you can configure your Web server to use this mime content type: 

 image/svg+xml

Browser Support for Viewing SVG Documents


Browsers That Support SVG Documents

In order to view SVG documents, you need a viewer or browser that supports Scalable Vector Graphics. Some browsers, such as Mozilla Firefox, have built-in support for SVG documents. Other browsers, such as Microsoft Internet Explorer, require an SVG plug-in to view SVG documents. One such plug-in is available from Adobe Systems, Inc.

The following table lists some browsers and viewers that support SVG documents.

SVG Browser Support
Browser or Viewer Company
Adobe SVG Viewer 3 * Adobe Systems, Inc.
Batik SVG Toolkit Apache Software Foundation
eSVG Viewer and IDE eSVG Viewer for PC, PDA, Mobile
GPAC Project GPAC
Mozilla Firefox Mozilla Foundation
Opera Opera Software
TinyLine TinyLine
* Adobe SVG Viewer 3 works in Internet Explorer 7 but is no longer supported by Adobe Systems Inc.


Notes on Using Adobe SVG Viewer


Notes on Using Mozilla Firefox

The SVG Universal Printers and the Output That They Create

The following table lists the SAS SVG Universal Printers.

SVG produces SVG 1.1 documents.
SVGt produces SVG 1.1 documents that are transparent (no background).
SVGnotip produces SVG 1.1 documents without tooltips.
SVGZ produces compressed SVG 1.1 documents.
SVGView produces SVG1.1 documents with navigational controls when the SVG file contains multiple pages.

SVG prototype printers are available in the SAS Registry under CORE\PRINTING\PROTOTYPES. You can define your own SVG printer using the PRTDEF procedure. For more information, see The PRTDEF Procedure in Base SAS Procedures Guide.

Setting the Environment to Create Stand-alone SVG Documents


Overview of Setting the Environment to Create Stand-alone SVG Documents

As shown in Fundamentals of Creating SVG Documents Using Universal Printers, an SVG Universal Printer must be specified either as the printer value using the PRINTERPATH= system option or the ODS Printer statement. You can set any of the SVG system options when SAS is invoked in a SAS program by using the OPTIONS statement, or by using the SAS System Options window.

SAS SVG documents can be created easily by using default values for SVG system options (except for the PRINTERPATH= system option) that establish the SVG environment. This section explains the SVG system options and how they effect stand-alone SVG documents.


SAS System Options that Affect Stand-alone SVG Documents

You can use the following SVG system to set the environment for creating SVG documents:

SAS System Options That Affect SVG Documents
Task System Option
Set the paper size to use for Universal Printing. PAPERSIZE=
Specify the name of an SVG printer to create a stand-alone SVG document. PRINTERPATH=
Set the height of the SVG document. If the SVG document has embedded SVG documents, the height value affects only the outermost SVG document. SVGHEIGHT=
Set the width of the SVG document. If the SVG document has embedded SVG documents, the width value affects only the outermost SVG document. SVGWIDTH=
Set the x-axis coordinate for the lower, left corner of an embedded SVG document. SVGX=
Set the y-axis coordinate for lower, left corner of an embedded SVG document. SVGY=
Specify the X and Y coordinates, and the width and height that are used to set the viewBox for the outermost SVG document; specify the coordinates of the area of the document that is displayed in the viewport. SVGVIEWBOX=
Specify whether to force uniform scaling of an SVG document. SVGPRESERVEASPECTRATIO=
Set the title that appears in the title bar of the SVG document. SVGTITLE=
Specify whether to display navigational controls in a multi-page SVG document. SVGCONTROLBUTTONS


Setting the SVG Universal Printer

You set the SVG Universal Printer by setting the PRINTERPATH= system option to one of the SVG Universal Printers. You can set the PRINTERPATH= system option at any time. The following OPTIONS statement sets the Universal Printer to create compressed SVG documents: 

options printerpath=svgz;

If the UPRINT system option is specified when SAS starts, the value of the PAPERSIZE= system option is set to the default value of 600 x 800 pixels.

For more information, see the following topics:


Scaling an SVG Document to the Viewport

To scale an SVG document to the viewport, you can use the default value of null for the SVGHEIGHT= and SVGWIDTH= system options. A null value equates to the value of 100%, which scales the SVG document to the size of the viewport. In addition, the value of the SVGVIEWBOX= system option must be null.

For more information, see the following system option in SAS Language Reference: Dictionary:


Setting the ViewBox

The viewBox attribute on the <svg> element is a set of four numbers: the starting X coordinate, the starting Y coordinate, the height of the SVG document, and the width of the SVG document. SAS sets the viewBox attribute value from the value of the SVGVIEWBOX= system option. If that option has no value, SAS uses the value of the PAPERSIZE= system option to set the height and the width arguments of the viewBox attribute. The starting coordinate values are set to 0.

When the SVGVIEWBOX=, SVGHEIGHT=, and SVGWIDTH= system options have a null value (the default value for each of these system options), the SVG document scales to the size of the viewport. If you specify a value for the SVGVIEWBOX= system option, the SVG document is scaled to the dimensions specified in the SVGVIEWBOX= option.

If you specify the SVGHEIGHT= option and the SVGWIDTH= option using percentage units, the SVG document scales to the size of the browser window whenever the browser window changes size. If these options are specified using units other than percentage, such as in, cm, or px, the SVG document is a static size and does not scale to the browser window when the window changes size.

For more information, see the following topics:


Interaction between SAS SVG System Options and the SVG Tag Attributes

SAS uses the values of the SVGHEIGHT=, SVGWIDTH=, SVGVIEWBOX=, SVGPRESERVEASPECTRATIO=, SVGX=, and SVGY= system options as values for their respective attributes on the outermost <svg> element: height, width, viewBox, and preserveAspectRatio. For example, if you specify SVGWIDTH="400" and SVGHEIGHT="300", SAS creates the <svg> element with the attributes width="400" and height="300". The values of the SVGX= and SVGY= system options are used only on embedded <svg> tags for the x and y attributes.

All of these system options have a null default value. When the SVGVIEWBOX= system option is null, SAS determines the viewBox size based on the value of the PAPERSIZE= system option. Therefore, if you do not specify a value for any of these system options, the only <svg> attribute that SAS sets is the viewBox attribute using the SAS SVG system options. Other <svg> attributes, such as version and xmlns are set by SAS and not by using system options.

SAS creates the following <svg> tag when all of the SAS SVG system options are set to their default values: 

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http:://www.w3.org/1999/xlink"
     xml:space="preserve" onload='Init(evt)' 
     version="1.1" baseProfile="full" viewBox="0 0 800 600">

The SVGPRESERVEASPECTRATIO= system option is used to set the preserveAspectRatio attribute in the <svg> tag and has an effect only when the viewBox attribute has also been specified in an SVG document. By default, SVG documents produced by SAS contain a viewBox attribute that is set to scale to the size of the paper size of the SVG printer.

Negative values can be specified for the values of SVG options. However, if a negative value is specified for the SVGHEIGHT= option or the SVGWIDTH= option, or the height or width arguments in the SVGVIEWBOX= option, the SVG document is not rendered by the browser. I can be useful to specify negative values for the x and y arguments of the SVGVIEWBOX= option to place the origin of the SVG document. A negative argument in the SVGVIEWBOX= option shifts the output to the right. A negative value of the SVGVIEWBOX= option shifts the placement of the document downward.


Creating a Static viewBox

A static viewBox is a viewBox that cannot be changed. When the viewport changes, such as when you resize your browser window, the viewBox remains the same size. To create a static viewBox, you specify the same width and height values for the PAPERSIZE=, SVGWIDTH=, and SVGHEIGHT= system options. The PAPERSIZE= system option sets the viewBox. The SVGWIDTH= and SVGHEIGHT= system options set the size of the SVG document. IF the SVGHEIGHT= and SVGWIDTH= options are specified using percentage unit, the SVG document scales to the size of the browser window when the browser window changes size. A Static Viewbox shows a static viewBox created by using the following system options: 

options printerpath=svg papersize=("8cm" "5cm") svgwidth="8cm" svgheight="5cm"
        svgtitle="SVG Cowboy Hat";

A Static Viewbox

[A Static Viewbox]

To reset the SVGWIDTH=, SVGHEIGHT=, and SVGPRESERVEASPECTRATIO= system options to null, specify two single quotation marks or two double quotation marks with no space between them: 

options printerpath=svg svgwidth="" svgheight="" svgpreserveaspectratio="";


Preserving the Aspect Ratio

When you change the size of the viewBox, you can use the SVGPRESERVEASPECTRATIO= system option to specify whether you want to preserve the aspect ratio of the SVG document and how to place the SVG document in the viewport. You can set this option by using one of the following assignments:

SVGPRESERVEASPECTRATIO=align | meetOrSlice | NONE | ""
SVGPRESERVEASPECTRATIO="align meetOrSlice"

The first argument, align, specifies whether to force uniform scaling by specifying the alignment method to use. For example, you can use the xMidYMid value to align the midpoint X value of the viewBox to the midpoint X value of the viewport, which centers the document horizontally.

The second argument, meetOrSlice, specifies how to scale the SVG document to the viewBox. The value for this argument can be either meet or slice. If you specify meet, the SVG document is scaled up as much as possible while meeting other criteria. The viewport displays some unused space. If you specify slice, the SVG document is scaled down as much as possible while meeting other criteria. In the latter case, some of the SVG document appears to be cut off. The SVG document is still complete, but you cannot see all of it in the viewport. You can use your browser controls to move the SVG document around in the viewport.

For more information, see the SVGPRESERVEASPECTRATIO= System Option in SAS Language Reference: Dictionary.


Adding a Title to an SVG Document

You use the SVGTITLE= system option to add a title to the title bar of a window when the browser displays only the SVG document. If the SVG document is embedded in an HTML page, the svgtitle attribute on the <svg> tag has no effect. The static viewport example in the previous topic shows a title in the browser title bar.

For more information, see the SVGTITLE= System Option in SAS Language Reference: Dictionary.

Creating Stand-alone SVG Documents Using the ODS PRINTER Destination


Creating an SVG Document

To create an SVG document, the least you need to do is set the PRINTERPATH= system option to an SVG Universal printer and specify the ODS PRINTER statement in your SAS program, or specify the PRINTER= option in the ODS PRINTER statement: 

options printerpath=svg;
ods listing close;
ods printer;
data hat;
   do x=-5 to 5 by .25;
      do y=-5 to 5 by .25;
         z=sin(sqrt(x*x+y*y));
         output;
      end;
   end;
proc g3d data=hat;
   plot y*x=z/ctop=red;
   title 'Cowboy Hat with G3D';
run;
quit;
ods printer close;
ods listing;

In this example, no specific SVG system option values were set to size the SVG document; therefore, the viewBox is the default size specified by the PAPERSIZE= system option. The SVG document scales to the viewport because no value was specified for the SVGWIDTH= and SVGHEIGHT= system options. The following is the <svg> tag that SAS creates: 

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
     onload='Init(evt)' version="1.1" baseProfile="full" viewBox="0 0 850 1100">

SAS creates a single SVG document named sasprt.svg and stores it in a specific location, depending on your operating environment. Under Windows, the file is stored in the current directory. Under UNIX and OpenVMS, the file is stored in your home directory. Under z/OS, the file is stored as a z/OS UNIX System Services Hierarchial File System (HFS) file, or as a z/OS data set. If the SVG file is written to a z/OS data set, it is written to PDSE library userid.SASPRT.SVG. You can use the FILE= option in the ODS PRINTER statement to specify a different filename.

The following figure is the SVG file that was created for the Cowboy Hat program using the Adobe Acrobat SVG plug-in for Microsoft Internet Explorer:

Cowboy Hat as an SVG File

[Cowboy Hat as an SVG File]

When you use the SVG, SVGnotip, SVGt, SVGView, and SVGZ Universal Printers, SAS creates a single SVG document. Depending on the size of the SVG document, the browser might display the complete SVG document. Check the documentation for your browser to determine whether your browser has controls for viewing SVG documents. In the Adobe SVG Viewer plug-in for Internet Explorer, you can press the Alt key and the left mouse button to pan and move to different pages in a continuous, multi-page SVG document.


Multi-Page SVG Documents in a Single File

When a DATA step or procedure creates a new page in the output, a new SVG page is created in an SVG document. SAS creates either one file with multiple pages or multiple SVG files with one file for each SVG document page. The SVGCONTROLBUTTONS system option and the NEWFILE= option in the ODS PRINTER statement control whether a multi-page SVG document is one continuous file (with controls to navigate the pages in the file) or multiple SVG files.

SAS creates a single file, multi-page SVG document with navigational controls when the NEWFILE= option of the ODS PRINTER statement is a value other than PAGE and one of the following set of system options is specified:

The SVGView Universal Printer sets the SVGCONTROLBUTTONS system option.

If the SVGCONTROLBUTTONS system option is not specified or the Universal Printer is not SVGView, the SVG document is created in a continuous-page layout. To navigate the document, you would use your browser controls.

The navigation controls enable you to go to the next page, the previous page, the first page, or the last page; to display an index of all pages; or to hide or show the controls.

First Page of a Multi-page SVG File With Navigation Controls

[First Page of a Multi-page SVG File With Navigation Controls]

To display an index of all pages in the SVG file, select the Index button. To go to a specific page from the index, select the thumbnail image of the page.

Index of a Multi-page SVG File With Navigation Controls

[Index of a Multi-page SVG File With Navigation Controls]

You can hide the control buttons by selecting the SVG Controls button. The tooltip displays when the cursor is over the control. To show the navigation controls again, click in the top area of the output when you see the tooltip Click to toggle SVG control button bar. This is useful when you want to print a page in the document without the SVG controls.

A Multi-page SVG File That Hides the Navigational Controls

[A Multi-page SVG File That Hides the Navigational Controls]

For information about the NEWFILE= option, see ODS PRINTER Statement in the SAS Output Delivery System: User's Guide.


Creating Separate Files for Multi-Page SVG Documents

You can create a separate file for each page in an SVG document by specifying the NEWFILE=PAGE option in the ODS PRINTER statement. A new page is created when a procedure explicitly starts a new page and not when the page size is exceeded. The first file is named sasprt.svg. Subsequent filenames have a number appended, starting with the number 1: sasprt1.svg, sasprt2.svg, and so on.

The following code creates two files: sasprt.svg, which contains the CONTENTS procedure output; and svgprt1.svg, which contains the PRINT procedure output: 

options printerpath=svg;
ods listing close;
ods printer newfile=page;

data school;
   input Name $ Y Grade Class $ SSN;
datalines;
Phillip 1 85 Math 234107589
Jose 1 90 English 190873452
Cameron 2 70 Math 257902348
Tia 2 71 English 234567823
Johanna 3 98 French 876345290
Frauke 3 75 History 231987222
Carlotta 4 89 PE 87654321
;
run;

proc contents data=school out=schout(drop=crdate modate);
   title 'School Dataset';
run;

proc print data=schout;
run;

ods printer close;
ods listing;

For information about the NEWFILE= option, see the ODS PRINTER Statement in SAS Output Delivery System: User's Guide.


Creating Overlaid Transparent SVG Documents

You use the SVTt Universal Printer to create a transparent SVG document in which the pages are transparent and can be overlaid. The following is a SAS program that overlays a bar chart on a map of the United States: 

%let name=map069;
filename odsout '.';

data bardata;
   input x y;
   datalines;
1 3
2 5
3 8
4 12
;
run;
 
goptions reset=all;
ods listing close;
options  printerpath=svgt nodate nonumber;
ods printer file='map069.svg';


goptions border;

goptions gunit=pct htitle=5 htext=3 ftext="arial" cback=lightblue;
pattern1 v=s c=cornsilk;
title "SAS/Graph gmap and overlaid gchart with printerpath=svgt";
proc gmap data=maps.us map=maps.us ;
   id state;
   choro state / levels=1 nolegend coutline=graycc
    des="" name="&name"; 
run; 

quit;    

goptions dev=svgt hsize=3 vsize=1.5 horigin=2 vorigin=2 autosize=on cback=white; 

/* you must use the default ods style, for transparency to work */

title;
goptions gunit=pct htext=12 ftext="arial/bo";
pattern1 v=s c=red;
axis1 label=none value=none major=none minor=none style=0;
axis2 color=blue label=none offset=(7,7) value=(color=blue);
proc gchart data=bardata;
   vbar x / discrete
   type=sum sumvar=y
   descending
   raxis=axis1
   maxis=axis2
   width=9
   space=5
   coutline=blue
   noframe
   des="" name="&name.b"; 
run;

quit;
 
ods printer close;

This code creates the following image:

[untitled graphic]

Embedding and Linking Stand-alone SVG Documents in HTML Documents


Embedding SVG Documents in HTML Documents

When you embed SVG documents in an HTML document, the height and width attributes of the <EMBED> tag become the dimensions of the viewport. If you use the default values for the SVG system options when you create your SVG document, the SVG document scales to the size of the viewport. This is because there is no default value of the SVGHEIGHT= and SVGWIDTH= system options, which effectively equates to specifying a value of 100%. A value of 100% for these system options scales the SVG document to 100% of the viewport.

If you do not specify height and width attributes on the embed tag, the viewport dimensions are determined by the browser, and the embedded document might not render as you expected it to render.

For information about embedding SVG documents in HTML documents using the ODS HTML destination, see SAS/GRAPH: Reference.


Linking to an SVG Document

If you link to an SVG document in an HTML document and are using the default values for the SVG system options, the SVG document opens in the browser window and scales to the size of the viewable area in the window.


An Example HTML Document That Links and Embeds a Stand-alone SVG Document

The following simple HTML document links and embeds the cowboy hat SVG document: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
        <title>Linking and Embedding an SVG Document in an HTML Document</title>
</head>
<body>
<p>Linking to an SVG document:</p>
<a href="sasprt.svg">Cowboy Hat</a>
<p>Embed the SVG document:</p>
<embed src="sasprt.svg" type="image/svg+xml" height="400" width="300">
</body>
</html>

Microsoft Internet Explorer with the Adobe SVG Viewer 3 displays the HTML documents with the link and the embedded SVG document:

An HTML Document Displaying a Link to a Stand-alone SVG Document and an Embedded SVG Document

[An HTML Document Displaying a Link to a Stand-alone SVG Document and an Embedded SVG Document]

The viewport has a height of 400 pixels and a width of 300 pixels. Because the default SVG system option values were used, the SVG document scales to 100% of the viewport.

If you click on the Cowboy Hat link, the browser displays the following SVG document:

A Stand-alone SVG Document Displayed as a Result of Clicking an HTML Link

[A Stand-alone SVG Document Displayed as a Result of Clicking an HTML Link]

The viewport is the displayable area in the browser window and the SVG document scales to 100% of the viewport.
Images in SVG Documents

When you create an SVG document that contains an image, the image is created as a PNG file. The filename has the form printer-destination-filename_counter.png. The counter is an integer that is incremented each time a new image is created. For example, if the printer destination filename is sasprt.svg, the first image is named sasprt_1.png. The second image is named sasprt_2.png, and so on.

When a .png file for an SVG document is saved, SAS writes a note in the SAS Log indicating the path to the image.

Printing an SVG Document from a Browser

SVG document printing is controlled by the browser. The browser prints only what is displayed in the browser window.

Previous Page | Next Page | Top of Page

Copyright © 2010 by SAS Institute Inc., Cary, NC, USA. All rights reserved.