Hack 46 Print to SVG

Create SVG as easily as PDF using pstoedit, and then embed it into your web page .

Scalable Vector Graphics (SVG) is an emerging web standard for describing vector drawings with XML (http://www.w3.org/Graphics/SVG/). It behaves more like PostScript than PDF. In fact, you can transform PostScript into SVG using pstoedit's SVG filter. Close the loop by wiring these tools into one of our virtual printers and you'll have "Print to SVG"!

You can also create SVG using vector-editing programs such as Adobe Illustrator, Corel Draw, or Karbon.

4.16.1 Tool Up

SVG viewers are freely available. Visit http://www.adobe.com/svg/ or http://www.corel.com/svgviewer/ to download an SVG plug-in for your web browser. Visit http://xml.apache.org/ batik /svgviewer.html to learn about Squiggle, the SVG browser.

Follow [Hack #39] to install Ghostscript and our other virtual printer components . Pstoedit requires Ghostscript.

Download the pstoedit installer from http://www.pstoedit.net/pstoedit/. This installer includes the shareware SVG filter. During installation, make sure to select this optional component. pstoedit is free software, but this SVG filter is not. The filter distorts its output by altering colors and scrambling text until you purchase and install a registration key. The pstoedit web site has a link to where you can purchase this key.

pstoedit also includes an alternative, free SVG filter. To use this free filter, replace -f svg with -f plot-svg in the configurations, discussed shortly.

4.16.2 Using pstoedit

Test your installation by running pstoedit from the command line:

 pstoedit -f svg c:\gs\gs8.14\examples\tiger.eps c:\tiger.svg 

Open tiger.svg in your viewer and you should find this classic character snarling at you. Without its registration key, the SVG filter will deliberately upset tiger's colors, so she might appear blue instead of orange. Try using the plot-svg filter instead to see her true colors:

 pstoedit -f plot-svg c:\gs\gs8.14\examples\tiger.eps c:\tiger.svg 

After using this command, I edited the SVG file. I changed the g tag's transform attribute to get all of the tiger back into view for the screenshot in Figure 4-17.

Figure 4-17. Tiger in SVG

4.16.3 Create an SVG Printer

The procedure for creating an SVG printer is the same as the procedure for creating the PDF printer in [Hack #39] . The configuration is just a little different.

Follow the PDF Printer instructions, except:

1. Name the new printer SVG Printer instead of GS Pdf Printer .

2. Name the new Redirected Port RPTSVG : instead of RPTPDF :.

3. When configuring this new Redirected Port, name the log file C:\gs\svg_printer.log and configure the port with the settings shown in Table 4-10.

Table 4-10. RedMon port properties

Field	Value
Redirect this port to the program:	C:\pstoedit\ pstoedit.exe
Arguments for this program are:	- f svg - "%1"
Output:	Prompt for Filename
Run:	Minimized

Print a test page to see how it works. If the page isn't created, review the log file and double-check your settings. When you look at the SVG test page you will find that TrueType text has lost its encoding and doesn't display properly. This is an unfortunate limitation in the pstoedit SVG filter.

4.16.4 SVG on the Web

Use a belt-and-suspenders approach to adding SVG to your web pages. If the client ignores the OBJECT tag, it can fall back to the enclosed EMBED tag. For example:

 <object type="image/svg+xml" data="tiger.svg"  title="Roar!" width="400" height="400">   <embed type="image/svg+xml" src="tiger.svg"   width="400" height="400"   pluginspage="http://www.adobe.com/svg/viewer/install/"> </object> 

Adobe specifically recommends against using the OBJECT tag when embedding SVG in an HTML page. For details, visit http://www.adobe.com/svg/viewer/install/.