Chapter 1. The Basic SVG Tool Set

CONTENTS

In this chapter:

•  Creating and Editing SVG
•  Text Editors
•  Vector Drawing Packages
•  SVG Viewers

Creating and Editing SVG

To get started creating and viewing Scalable Vector Graphics images, you need two types of tools something to create SVG with and something that allows you to view SVG onscreen.

You can, when you understand SVG syntax, create SVG documents or images with a text editor. An alternative way to produce SVG images, and perhaps the one you will initially find more convenient, is to use a vector graphics drawing package capable of handling SVG. Throughout this book, I use hand coding because that technique helps me bring out the techniques or points I want you to understand and that help you build up a range of knowledge and skills in SVG.

In this chapter, I describe for you the tools you need in order to create SVG and the software you need to install to view SVG.

Text Editors

Thinking that you can use a simple text editor to create sophisticated, animated, and interactive SVG graphics may be something of a shock to you. But, if you sufficiently understand the syntax of SVG, a text editor may be all you need. All the SVG in this book was hand coded. You could even use Windows Notepad, if you want.

You can use a simple text editor, but you can realize some advantages from using a text editor that has some awareness of XML and its need for being well formed, which is a requirement for all languages created using XML syntax. Scalable Vector Graphics, or SVG, is one of those languages. If your code is not well formed, an SVG viewer is not likely to render it properly and perhaps not at all.

The following simple SVG document is also a complete description of a simple SVG image. The text-based markup completely describes the image that results when the SVG source code is rendered by an SVG viewer.

Listing 1.1 (SimpleRect.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg>  <rect    x="10"    y="20"    width="100"    height="100"    style="fill:none; stroke:#000099; stroke-width:4;"/>  </svg> 

I hope that you can see the similarity in editing HTML or XHTML source code. Perhaps the fact that you can describe graphics in this way is a little surprising. If you can visualize the final graphic, editing the source code can be fairly straightforward. The ability to visualize the resulting graphic, including animations, is something I found difficult initially, but, with increasing practice on my part, simple graphics or animations are not a problem. For complex animations, some planning and a diagram or two are helpful.

In case you have not already guessed, the SVG image is of a square with a deep blue outline and a totally transparent interior. (Yes, SVG has transparency that can be adjusted from totally transparent to totally opaque or anywhere in between.) The square onscreen looks pretty much like Figure 01.01.

Figure 01.01. A simple SVG square with a transparent interior.

If you plan to use a text editor, you may be asking which one you should use.

XML Writer

Many XML editors are on the market. One that I have used for some time is XML Writer, now at version 1.2.1. Further information about XML Writer is available at http://www.xmlwriter.com/. You can download a 30-day, fully functional evaluation copy of XML Writer from http://www.xmlwriter.com/download.shtml. I am not saying that XML Writer is better than any other product, but it has color coding of the code, can check for "well-formedness" (ensuring that the XML syntax is correct), works well for a beginner, is fairly cheap, and just doesn't "get in the way." From my point of view, it does a good job on small- to medium-size documents.

An important advantage of an XML editor like XML Writer is the color coding it can provide. This feature is useful when you are trying to locate where you have made some minor typing mistake or other syntax error. If you miss a quotation mark around the value of an attribute or make another simple syntax error within an SVG element, XML Writer is likely to produce an unusual color pattern onscreen that, if you focus on where the odd colors start, can help you find where the error is situated.

In addition, XML Writer can check your SVG document or image for well-formedness and to see whether it complies with the DOCTYPE declaration at the beginning of a piece of SVG code:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd"> 

Many other XML editors are now available. Some, like XML Writer, are relatively cheap. Some are free. Some are expensive. In Appendix A, I list some useful Web sites where you can access further information on XML and XML tools.

When the SVG image is a simple one, spotting any mistake you have made is often easy. When an SVG image includes complex or sophisticated nested SVG elements with perhaps several animations in each SVG fragment, however, spotting well-formedness problems with the naked eye can become difficult. I cover this type of debugging issue in Chapter 14, "When Things Go Wrong."

Many, but not all, syntax errors in an SVG image are likely to cause the specific SVG element not to be displayed. Also, not all the other, later, SVG elements in the SVG document may be displayed. A simple syntax error at the beginning of a document can cause a total failure of the display of your carefully crafted image.

Vector Drawing Packages

A number of vector graphics packages are already available that can be used to produce sophisticated SVG images. Some have simply added a facility to export or save SVG created in the normal way. Others have the ability to both open and save SVG images. At least one allows you to see both the image you have drawn and the corresponding SVG source code with changes that are made in either the drawing or the code reflected in the other in real-time. When you are trying to learn the details of SVG, the latter approach has real advantages. In practice, the drawing program you use to produce SVG may well be influenced by the one you already own.

Adobe Illustrator is arguably one of the Big Three vector drawing packages. Of the other two major packages, Corel Draw 10 has useful SVG functionality (see the following section), whereas Macromedia Freehand seems, at least for the moment, to lack SVG functionality.

First, take a look at a new SVG-dedicated package, Jasc WebDraw, that lets you draw in the traditional way as well as tweak the SVG source code as you go along.

Jasc WebDraw

Jasc is perhaps best known for its inexpensive bitmap editor, Paint Shop Pro. Paint Shop Pro, although it is a bitmap package, has significant vector drawing capabilities. Jasc has harnessed its understanding of vector drawing to produce a dedicated SVG-oriented vector drawing package named WebDraw (now in Preview Release version 4b, see Figure 01.02). I won't be surprised if the WebDraw final release adds significant support for SVG animations.

Figure 01.02. Jasc WebDraw (Preview Release) shows one of its sample SVG images. Note the tabs for Canvas and Source.

Further information on Jasc WebDraw is available at http://www.jasc.com/webdraw.asp?. (Yes, the URL has a question mark at the end.) You can download an evaluation copy of WebDraw, which at the time this chapter was written was a preview release, from http://www.jasc.com/wdrawdl.asp. Although WebDraw is in preview release form, it has been stable, in my experience. However, when using any preview release software, think carefully about whether you have any data that is important to back up.

You can use WebDraw as you would use any other vector drawing package. For example, to create a simple rectangle in the preview release, click on the rectangle tool, choose the properties of the rectangle in the Tool Options palette, click on the canvas to define the upper-left corner of your rectangle, and then drag outward to define its lower-right corner. User interface changes are likely in a final release.

So far, nothing is new. However, if you click on the Source tab within WebDraw, you see the SVG source for the simple rectangle you have just created. It looks something like this:

Listing 1.2 (WebDrawRect.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="500" height="500">           <rect x="192" y="93" width="142" height="78"           rx="0" ry="0" style="stroke-miterlimit:4;           stroke-linejoin:miter;stroke-width:3;           stroke-opacity:1;stroke:rgb(0,204,255);                     fill-opacity:1;fill:rgb(204,204,204);                     opacity:1"/>  </svg>  <!-- Generated by Jasc WebDraw PR4(tm) on 04/03/01  11:31:54 --> 

In WebDraw, you can alter the image on the Canvas tab by either drawing on the canvas or altering the SVG source code in the Source tab (as shown in Figure 01.03). The code, which is accessible on the Source tab, has some color coding to assist you in editing it.

Figure 01.03. The source tab in Jasc WebDraw shows the source code for Listing 1.2.

You may notice that when Listing 1.2 was reloaded, WebDraw changed the date on which the file was generated and reformated the code. This change can be irritating because if you have carefully formatted your SVG source, WebDraw unceremoniously mangles it. However, the facility to swap from the Canvas tab to the Source tab is useful. I understand that Jasc hopes to have addressed this problem in the final release so that when you load code, you can have what I call round-trip SVG.

If you want to give your rectangle a psychedelic yellow-green stroke rather than a pale blue one, you would, on the Source tab, change the stroke property of the style attribute from

stroke:rgb(0,204,255); 

to

stroke:rgb(204,255,0); 

If you then click on the Canvas tab, you see the color change for the stroke (outline) of the rectangle rendered as a striking (or horrible) yellow-green color.

When you have made your minor change to the source code, you can return to the Canvas tab to see the change reflected onscreen.

WebDraw has many more useful features already in place, and others are hinted at for a final release. The likely SVG animation functionality will doubtlessly attract lots of interest. It is already a competent SVG drawing and editing tool.

Adobe Illustrator

Adobe Illustrator is a powerful vector drawing package that has added SVG export capabilities in version 9.

You can find further information on Adobe Illustrator at http://www.adobe.com/products/illustrator/main.html. You can usually download from the Adobe site an evaluation copy of Illustrator (with, unfortunately, all SVG functionality disabled and also globally save-disabled).

The Adobe Web site, http://www.adobe.com/svg/, has a significant number of nice demos of using Illustrator to produce SVG. For example, to see some SVG animations that can be created using Illustrator, take a look at http://www.adobe.com/svg/illustrator/interactivity_palette/index2.html.

Corel Draw

Corel Draw is a powerful vector graphics drawing package that introduced an SVG export filter in version 9. If you are using Corel Draw 9, be aware that the SVG export filter for it is based on the March 2000 Working Draft of SVG and that a few pieces of syntax have changed since then. Corel Draw 10 has the capability to "round-trip" SVG (it can export SVG and open SVG files).

Historically, Corel Draw has been, at least in my opinion, a bit slow to adopt the mindset of design for the Web. However, the implementation of SVG functionality, together with changes in workflow within the application, make Corel Draw 10 a useful and powerful SVG drawing package.

Mayura Draw

The Mayura Draw shareware package, available for download from http://www.mayura.com, is a fairly basic vector drawing package. To create SVG using Mayura Draw, you must export the graphic. SVG is one of several graphics file formats available as export options.

This program does not achieve the functionality of the Canvas and Source tabs in Jasc WebDraw. Mayura Draw can save images as SVG files, but is unable to open or insert SVG files. Mayura Draw is therefore a vehicle to create simple SVG cheaply; because it does not have any round-trip functionality, I cannot recommend it for serious work.

Macromedia Freehand

I mention Freehand for two reasons. First, it is one of the major vector drawing packages. Second, at the time this chapter was written, Freehand offered no SVG functionality. One can only speculate whether that situation relates to Macromedia ownership of the Flash vector drawing environment. Because Flash is probably a significant part of the Macromedia revenue stream, the company, quite understandably, may not want to acknowledge the existence of a competing and arguably, superior vector drawing standard.

It does seem shortsighted for Macromedia to fail to support such an important standard as SVG.

SVG Viewers

Full SVG support hasn't been built-in yet to the standard editions of any of the main Web browsers (Internet Explorer 5.x, Netscape 6, and Opera 5). Limited native SVG support is in the development versions of the Mozilla browser (get further information at http://www.mozilla.org/projects/svg/), but none is in the released version of Netscape 6.0. To view SVG using any of the major HTML browsers, you need to download an SVG viewer. A number of SVG viewers are available.

The available SVG viewer downloads are significantly larger in size than, for example, the Flash viewer download. That statement isn't too surprising because SVG has more functionality than Flash does.

In addition to the plug-in for HTML browsers, a number of stand-alone SVG viewers are available, some focused only on SVG and others with exciting capabilities to display combinations of SVG with XSL-FO, SMIL, or XForms. In the short term, SVG images may be embedded in primarily HTML or XHTML Web pages. However, in the not-too-distant future, multi-namespace XML browsers with SVG display functionality may open up display possibilities that HTML and XHTML browsers find difficult to match. In addition, SVG Web pages can be produced and then viewed in HTML Web browsers with the Adobe plug-in.

Adobe SVG Viewer

The Adobe SVG Viewer has the best overall functionality in displaying SVG. Adobe SVG Viewer version 2 provides good display functionality for the basic SVG graphic shapes (see Chapter 3, "Creating Static Graphics Elements"), SVG text (see Chapter 4, "Using Text in SVG"), gradients (see Chapter 6, "Creating SVG Gradients"), filters (see Chapter 7, "Using SVG Filters"), and animation (see Chapter 8, "Animation: SVG and SMIL Animation"). The Adobe Viewer is an excellent SVG viewer, but does have a few important limitations. Because of a bizarre (in my opinion) design decision, scroll bars were omitted from the SVG viewer; in stand-alone large SVG images, therefore, no scroll bars are displayed in the browser window. You can circumvent the problem by embedding the SVG image in an HTML shell, as explained in Chapter 10, "Embedding SVG in HTML or XHTML Pages." In response to user pressure, Adobe has promised to look seriously at the possibility of adding scroll bars in a future release. In addition, among other features in the SVG specification yet to be implemented is the ability to import other freestanding SVG images using the <image> element and the ability to include other types of content using the <foreignObject> element. Both those facilities would provide enormous scope for facilitating visual components in SVG.

I have not listed the current deficiencies of the Adobe SVG viewer because I think that the Adobe Viewer is poor but only because it still has farther to go. I think that it is already excellent, but its already impressive facilities have whetted my appetite, and that of other interested users, to see even more of the exciting capabilities of SVG.

You can download the Adobe viewer by visiting http://www.adobe.com/svg. From that page, a link may enable you to download the current version of the SVG viewer. Quite sensibly, Adobe has decided to focus, in this initial phase, on Internet Explorer and Netscape 4 browsers on the Windows and Macintosh platforms. Check this URL to find out whether further support has been added. Adobe also provides downloadable documentation that describes in detail which features of SVG a particular version of the SVG viewer supports.

NOTE

You can install the Adobe SVG Viewer if you use the Netscape 6 or Opera 5 browsers, although neither of those browsers is officially supported. However, to do that, you need either Internet Explorer or Netscape 4 installed. Install the Adobe SVG Viewer for either of the supported browsers, and then copy the following files (for the current version) to the plug-ins directory of Netscape 6 or Opera 5, as appropriate: SVGViewer.zip, SVGView.dll, and NPSVGVw.dll. Netscape 6.01 seems to have a problem using the Adobe plug-in, although it works well with Netscape 6.0.

If you want to get full enjoyment from this book and you have a suitable browser installed on your machine, be sure to use the Adobe SVG Viewer and enjoy the images and animations to their full potential.

CSIRO SVG Viewer

The CSIRO SVG Viewer is a Java-based SVG viewer that can be used on operating systems on which the Adobe SVG Viewer is not now supported. You can find information on the CSIRO SVG Toolkit at http://sis.cmis.csiro.au/svg/.

The CSIRO SVG Toolkit now has a more limited implementation of SVG than does the Adobe SVG Viewer. Unless you want to explore the parts of the CSIRO SVG Toolkit other than the viewer for desktop machines, therefore, you should focus on the Adobe Viewer.

CSIRO also has an SVG viewer under development for the Pocket PC. Information on that topic is available on the CSIRO Web site.

X-Smiles viewer

The X-Smiles viewer is probably the most experimental of the SVG viewers listed here, but is also one of the most exciting. In fact, the X-Smiles viewer is not simply an SVG viewer; it can display SVG and can also display XSL-FO, SMIL, and XForms, thus opening up a glimpse of new avenues for the use of SVG with other XML-based technologies. The kind of capability that X-Smiles is now capable of delivering is something that you will quite likely take for granted in the future.

Get further information on the X-Smiles viewer from http://www.x-smiles.org/. You can download the X-Smiles viewer from http://www.x-smiles.org/download.html. X-Smiles is now available as Preview Release version 0.33.

The X-Smiles viewer, a Java-based application, is in development, so check the X-Smiles site for any changes to the following installation instructions. Download the zipped Java executable to a suitable temporary directory. If you have WinZip (http://www.winzip.com/ )or a similar program, unzip X-Smiles into a suitable directory, such as c:\XSmiles. When you are unzipping, make sure that the Use Folder Names option is checked. If you unzip without creating the appropriate folder hierarchy, X-Smiles doesn't run the folder hierarchy is essential.

To run X-Smiles, you need to have a Java Virtual Machine (JVM) installed on your computer, version 1.2 or higher. If you do not already have a Java SDK or JRE installed, visit http://java.sun.com and look for Java SDK Standard Edition. Either version 1.2 or 1.3 works with X-Smiles.

If you have a suitable JVM installed, your CLASSPATH set up correctly, and the X-Smiles executable unzipped, you are ready to run the X-Smiles viewer (see Figure 01.04).

Figure 01.04. A simple SVG graphic shape displayed in the X-Smiles multi-namespace viewer.

Batik

The Batik Java-based SVG viewer is part of the many XML-related projects under the auspices of the Apache Foundation (see Figure 01.05). General information on Batik is available at http://xml.apache.org/batik/index.html. You can download the Batik SVG Toolkit, of which the Batik SVG viewer is a part, from http://xml.apache.org/batik/dist/. The current version is Batik 1.0. Check this URL for the latest version if you want to use it. Installation instructions for Batik are available at http://xml.apache.org/batik/install.html.

Figure 01.05. A cubic Bezier curve displayed in the Batik SVG viewer.

CSIRO SVG Viewer for Pocket PCs

If you are interested in getting a glimpse of the potential of SVG on various browser platforms, not simply on the traditional desktop PC, take a peek at the SVG viewer for Pocket PCs, now under development at CSIRO. Further information is available at http://www.cmis.csiro.au/sis/SVGpocket.htm.

IBM SVGView

IBM developed an SVG viewer that appears not to have been updated to reflect the developments in the SVG specification. Information is available at http://www.alphaworks.ibm.com/tech/svgview.

Amaya

W3C produces the Amaya Web browser and authoring environment. Amaya has limited SVG display facilities. I have tried the Amaya browser and authoring environment on several occasions, only some related to SVG, and have always been disappointed. I know that others are enthusiastic about the potential of Amaya, but my own opinion is that it is not easy to use. I hope that, in time, some of its claimed potential will be realized. Until then, I mention Amaya only for completeness, but can't recommend it now as a useful SVG viewer. To check on further progress of Amaya, visit http://www.w3.org/Amaya/. Amaya version 5 has improved SVG support.

In summary, I recommend that you download and install the Adobe SVG Viewer, assuming that you are using a Windows or Mac platform. The implementations of SVG in Batik and X-Smiles are generally less complete than the implementation in the Adobe viewer.

So what will the serious players in the vector graphics market do as they jostle for position?

My guess is that Macromedia will try, for as long as possible, to publicly ignore SVG as a serious vector technology. By doing that, the company may hope to minimize awareness of SVG within the Flash community. Because SVG is, I believe, a superior technology to Flash particularly for a Web that is increasingly XML based Flash may in some future version provide at least a minimum of SVG export and run on a slogan that exclaims, "Use the authoring tool you know to produce exciting, new XML-based SVG graphics."

Adobe has perhaps the greatest investment in seeing SVG succeed. SVG provides a potentially powerful competitor to Flash as the Web vector technology. I would expect Adobe to improve SVG authoring and round-trip support for SVG in Illustrator and provide powerful SVG animation authoring in LiveMotion. Just as Adobe had two separate products in Photoshop and ImageReady, which are now closely integrated, the company may make a similar move to provide static and animated SVG functionality with Illustrator and LiveMotion, respectively.

Don't overlook Jasc WebDraw, which is already a competent SVG vector drawing tool. With the likely addition of SVG animations, WebDraw could become a useful tool indeed.

The superiority of SVG over Flash isn't the only issue. The usability of Illustrator and LiveMotion (or some new secret SVG product?) and WebDraw will have an impact on the penetration of SVG into the graphics market. It is too early to tell who the winners will be, but these three companies are all worth watching in the SVG space.

CONTENTS