Introduction to Jasc WebDraw

ElShaddai Edwards
Jasc Software, Inc.
7905 Fuller Road
Eden Prairie, Minnesota
55344 USA
e-mail: eedwards@jasc.com
fax: +1 952 930 9172
webpage: http://www.jasc.com

Keywords: Authoring Tools, IDE, Graphics, Animation

Abstract

Jasc WebDraw is a new SVG graphics and animation authoring tool built by the makers of Jasc Paint Shop Pro®, one of the Web's first popular image editors. Using the SVG specification as a native editing format, WebDraw provides Web designers and developers with a unique combination of graphics design and source code editing tools.

Introduction

SVG is a vector graphics format and a Web development language. Created to meet the needs of both visual Web designers and Web coders, one of SVG's greatest advantages and benefits is its flexibility. This flexibility is an inherent advantage and allows many different types of applications and many different types of users to use SVG in many different types of ways. Just as there is no "one right" way of using SVG, there is no "one true" type of SVG user. Certainly the diversity of topics and attendees at this conference is testimony to this.

SVG is a vector graphics format

Traditional and popular design programs such as Adobe Illustrator and Corel DRAW have begun adding SVG to their list of supported data formats. This support opens SVG up to a large existing base of users who have been using these programs for print, multimedia and Web design work. Other vector graphics programs have also begun support for SVG, including technical illustration and CAD tools.

However, while these programs contain an amazing variety of creative tools and editing options, they do not support SVG content to a level that anyone involved in code-level development would find useful. Shapes are exported as generic <path> objects. Rich stylistic features of SVG such as gradients, patterns and scalable filter effects are often exported as bitmap objects.

Also, none of the "major" Web animation products -- Macromedia Flash or Adobe LiveMotion -- support SVG at this time, though there certainly have been hints and intimations to that effect, at least for the latter product.

In effect, only a fraction of the benefits of SVG are being taken advantage of by current graphics editors; SVG is "just" one more file format for these users -- and one with limited perceived benefits.

SVG is a Web development language

Ironically, the flip side of the coin is that the full range of SVG content can be created without even touching a graphics editor. As an XML language, a developer only needs a copy of Notepad and perhaps the SVG specification to code usable SVG content. That said, text-based SVG support should be reasonably trivial to add to a decent XML editor -- future versions of traditional HTML and XML development tools such as Altova XML Spy and Adobe GoLive should be able to support extended SVG code authoring in their syntax-rich code editors.

However, while these programs feature robust code development tools and a number of integration options with other standard Web technologies, they do not support WYSIWYG editing of SVG content. Changes must be made on a code level and manually previewed in a Web browser. Perhaps not a huge issue, but again, it is a scenario in which the full benefit of SVG is not exploited. Very few Web development languages have the so obvious benefit of SVG of being able to see your results visually and make changes accordingly.

In essence, to take full advantage of the benefits and flexibility of SVG using traditional Web products, a user must purchase and use at least two different applications -- a graphics editor and a code development tool -- and, even then, there remain workflow issues in which content must be passed back and forth between products, resulting in significant data loss.

Back to the future

For better or worse, HTML is also a visual document format and a Web development language. And recalling the early days of HTML development reveals a similar dichotomy in available products. There were many source code-editing programs that excelled at providing coders with tools and tricks for more efficient HTML "word processing". For a few years, coders ruled the HTML world (and some will claim they still do).

As time progressed, though, purely visual editing programs were introduced for the rest of us who were basically traditional graphic designers trying to learn a new medium. The skill set for producing HTML suddenly was very different, though with a cost -- as anyone who has had to edit HTML generated by a Microsoft application will tell you.

Eventually products started to implement bits and pieces of both types of tools and the hybrid Web editor -- part WYSIWYG design program, part source code editor -- emerged and captured the market. Today, the vast majority of Web designers use a hybrid program, whether it's a high-end product, like Microsoft InterDev or Macromedia Dreamweaver or Adobe GoLive, or something more appropriate for personal and small business designers, like Microsoft FrontPage or Namo WebEditor.

In a similar manner, we see the opportunity and preference for hybrid SVG development tools -- tools that take on the dual benefits of WYSIWYG design programs and text-based source editors -- to give Web designers and developers the most useable and flexible access to the power and flexibility of the SVG format.

Jasc WebDraw is one of these new hybrid tools. On one hand a WYSIWYG editor with a full set of drawing and animation tools, WebDraw uses SVG as its native format -- meaning that all graphics are created as "pure" SVG and stored in the SVG format -- and provides developers with full authoring access to the underlying source code.

Product Overview

Jasc WebDraw is a desktop SVG authoring tool, providing an integrated development environment (IDE) of WYSIWYG drawing and animation tools, source code editing and Web browser preview functions.

Integrated design and editing

The first development environment is a WYSIWYG canvas where designers can directly draw and animate graphics objects, change their properties, import raster images, etc. The second development environment is an integrated text editor, where you can edit changes to the SVG source code by hand. The third development environment is the browser preview, where the content is rendered as a final document and where scripting and animation effects are applied. All three views are synchronized at all times, allowing for transparent editing and viewing in hand-coding and WYSIWYG modes.

canvas

Figure 1: WebDraw User Interface

From setting the degree of rounded corners on rectangles to the number of points on a star to the font for a text object to the number of revolutions of a spiral, the Tool Options palette includes all the options needed for the drawing and layout tools. The Overview palette displays an overview of the entire canvas and quick navigation controls for moving from one part of the document to another, especially useful when working at high zoom levels.

The Document Object Model palette is a tree-based hierarchical view of a document's collection of SVG objects, including graphics and non-graphical elements. Designers can easily access and select any type of object for editing on the Properties palette. The contents of the DOM palette are duplicated on the Animation Timeline palette for efficiency in selecting and animating SVG objects.

The Properties palette is a designer's one-stop resource for editing SVG objects selected on the canvas or DOM palette. All valid SVG attributes and properties are editable directly on the Properties palette rather than hiding them in a dialog box. Create more efficient code and smaller file sizes by eliminating default or unused attributes with property selection options.

Graphics design tools

WebDraw includes a set of drawing and layout tools that look and behave like the tools that designers are already using in other graphics applications. From an industry-standard pen tool to basic shape types to object alignment and distribution options, WebDraw delivers familiar tools designed to get users up and running fast.

toolpalette

Figure 2: Tool Palette

Standard drawing and shape tools allow designers to create any of the basic SVG shape types, including <rect>, <ellipse>, <circle>, <polygon>, <polyline>, <line>, and <path>. The Text tool provides SVG <text> creation options, including basic formatting options. The Image tool allows designers to add external bitmap images and SVG files as new <image> objects on the current canvas.

The Spiral and Freehand tools allow for creative drawing options, while the Preset Shapes tool allows users to select from pre-made SVG shapes for use as design elements. User-created graphics can be saved for use with the Preset Shapes tool. The Symmetric Shapes tool can be used to create unique symmetrical polygons, including stars and Spirograph®-style geometric drawings.

The Selection tool is used to select, move and transform objects on the canvas, including rotation around a movable center point. Edit objects' path and point data with the Node Edit tool. Designers can use the Zoom and Hand tools to easily navigate the document canvas.

Animation tools

WebDraw features an Animation Timeline that is built on the SVG DOM, allowing virtually any attribute or property of any type of object -- shapes, lines, text, images, gradients, filter effects, etc. -- to be selected and animated at any point in time.

Start and end-points, as well as the duration of animations can be easily edited directly on the timeline using drag-and-drop editing. Animation "keytime" markers are inserted whenever an object attribute or property is animated and can be dragged to automatically adjust animation timing effects.

The Point-in-Time indicator automatically updates the appearance of the canvas to reflect the effect of ctive animations. Expand or contract the time scale to see a longer or shorter amount of time on the timeline. Record new animations with the push of a single button. Use the Preview view to play animations in real-time.

timeline

Figure 3: Animation Timeline

Creative effects

Add bitmap-style filter effects to SVG objects for rich design options. Choose from simple blurs and drop shadows to advanced textures and lighting effects -- all in a non-destructive editing environment that preserves original objects. Effects can be edited and customized, allowing for individual creative effects beyond the many preset filters included with WebDraw.

Use gradients and patterns as design options to enhance shapes and drawings. Create your own gradient or choose from any of the predefined styles. Choose from a variety of predefined pattern styles. As 100% SVG effects, gradients, patterns and filter effect definitions can be edited in the WYSIWYG view or directly in the source code. Creative effects can even be animated -- giving graphics an extra touch of "cool".

gradient pattern

filter transparency

Figure 4: Gradients, Patterns, Filter Effects and Transparency Effects

Source code editing

WebDraw uses SVG as its native file format, allowing designers and developers unprecedented access to the underlying source code of their graphics files. Unlike other graphics programs that convert SVG files into proprietary internal data formats, WebDraw preserves the original data structure of imported files as SVG, allowing designers to import and edit files with confidence that their custom data will not be destroyed.

sourcecode

Figure 5: Source editor

The Source view allows users to view and edit SVG source code. Users unfamiliar with the SVG specification will find it helpful to be able to directly edit the source code and view the resulting changes on the canvas or in a Web browser. Customizable syntax highlighting clearly identifies different types of source data, such as SVG keywords, object attributes and XML declarations, helping designers new to SVG learn how their graphics are defined in SVG markup.

WebDraw automatically validates source code changes and identifies errors for you. This can eliminate the frustration of searching for errors in hundreds of lines of source code and ensures that you will always create code that conforms to the SVG specification.

WebDraw features a number of source formatting options for custom control over your file's final source code, giving you the ability to format your file to match any code style guidelines. Enter color values as hex code, RGB values or just type in the name of the color. For object styles, designers can choose from standard XML presentation values, inline CSS styling or mix-and-match either option. Format your code with custom indentation options, making it easy to identify and edit nested objects.

Extensible resources

In addition to using SVG as its native file format, WebDraw stores all of its creative resources as SVG files as well. Preset shapes, gradients, patterns and filter effects are all saved as SVG or XML files and can be edited at any time. New resource files can be added as well for a customized work environment.

Conclusion

WebDraw 1.0 is the first step in providing users with a full-featured IDE for interactive SVG graphics and animation content creation and editing. While there are many features of SVG currently implemented in WebDraw, we'll be the first to admit that there are holes too. Future versions of the program will focus on providing users with more complete support for the SVG specifications, as well as more flexible authoring tools for designers and coders alike.

If you have an interest in WebDraw and have an idea for a future version, please contact me via the information provided above. I definitely would like to hear from you.


Valid XHTML 1.0!