Overview of Smart Graphics
 

Graphics sold the Web - pure and simple. Now eMail enthusiasts and HTML aficionados might beg to differ - citing the continued drawing power of all sorts of variations on simple email systems like web conferencing, instant messaging and whiteboarding as proof of the power of the communication media. And HTML aficionados will cite the simplicity but growing power vested in hyperlinks and XML based Namespaces, Pointers and Paths as being the one true way. But Web Graphics will just say tut.tut. The Web in the late 1980's and early 1990's was growing at a respectable 15-25% in various parts of the world with email, and hyperlinked newsnet, and other early progenitors of HTML grabbing interest particularly in the university and research communities.. But it wasn't until the emergence of the Mosaic browser, with its ability to easily incorporate graphics, that the Web absolutely took off. Growth rates of 30-40% per month were experienced in those heady first few quarters after the introduction of the graphics browser.

And why not ? Psychologists have proved over and over the adage that a picture is worth a thousand words. Our visual memory and consequent learning is much more powerful than auditory, symbolic, or other sense modalities alone. True, combining methods - such as audio-visual or action based kinesthetic with visual produces even better learning and/or retention rates. And this becomes important because objects are coming to the Web.

Objects = Smart Graphics

Not just any objects, but smart objects and smart graphics have already started to permeate the Web. Okay what are smart objects ? Object oriented programming's key idea is to encapsulate or embed with data (any data structure) all of the processing power needed to use that data. So embedded with graphics, a very complex data structure of of circles, lines, colors , directions, and other components - comes the code or instructions to put it all together. Smart objects or graphics know how to display themselves, move, animate, change and interact with other smart graphics.

You have seen the animated banners ads, the video display boxes, the animations that cavort across a web page - these are all smart graphics. But just the beginning. Cars will have screens that explain themselves - touch/click on the hood and the engine is revealed. Click on the carburetor and a pop screen video explaining how the carburetor works is shown. Click on a sparkplug - and an animation which you can pause , roll back and and roll forward shows the steps needed to remove and replace it. Click on insurance form - and an audio-visual presentation pops above any of the fields on the form your customer needs more information about. Smart objects, and many of them are smart graphics objects, are coming to the web in a big way. Our overview of demo software is another example of the smart graphics revolution coming to the Web.

Many technologies are competing for critical roles in the smart graphics revolution. the two leading technologies are Macromedia's Flash, and the W3C's open XML-based technology, SVG-Scalable Vector Graphics Both technologies have at their base the ability to produce and manipulate both vector and bitmap graphics usually in an animated format. In fact they share a number of common capabilities. Now some will argue that the two technologies can work together and are complimentary. However, perusal of the Table 1 below shows that the technologies are rivals as much as compliments (yellow highlight indicates a critical advantage).

Table 1 - Comparison of Flash and SVG Technologies
Category
Flash
SVG
Functionality - remarkably similar in core animation, vector graphic, bitmap image support, diverge in other media
Animations - scripting, transformations, effects full, both IDE designer and scripting full, scripting and predefined functions
Bitmap/raster image support gif, jpg, contained internally gif, jpg, png, externally linked
Multimedia support Better audio with edits, control, scripting; better video with control and scripting; uses more audio, video, and graphic file formats
audio, video support through SMIL; 3D support through VRML a few tools just adding these interfaces
3D modeling many 3rd party converters and tools VRML and some 3rd party converters
Fills, line types, curves 3 types of fills &lines, quad bezier curves a few more fills, line, and curves - more basic primitives
Font and text manipulation Much improved in Flash Mx; font reuse & styling, glyph manipulation and program control Most of Flash + text on path, dynamic kerning, searchable text, more transformers; CSS, XSLT support
Basic dynamic draw functions Simple point, line, and gradient fill Much richer set of functions, options
Filters and effects Strong in designer, weak dynamically Broad set of functions
Design tools Very good designer,good code/debug No official tool
3rd party tools Many very good designers and support tools Good designers and code/debug tools
     
Programming Support- Flash has the early lead due to 3rd party support, but native XML support confers advantages on SVG
Client-side support JavaScript embed native JavaScript, Java applets, C/C++
Server side support ActionScript, Cold Fusion, PHP, Perl Java, JavaScript, PHP, Perl, C/C++
Scripting language ActionScript (JavaScript subset) JavaScript, Java, any DOM/XML supporting
Add new objects via scripts yes yes
Supported events mouse, keyboard, timeline, frame, load mouse, time in SMIL, scroll, zoom, resize, load
Components yes, many 3rd party simple in SVG GUI shared code examples
GIS support simple broad
Database connections yes yes
XML support 2 predefined, but proprietary XML objects native
     
Deployment - options vary the most here starting with proprietary, binary versus open, text based
Deliverable file format proprietary, binary file format .swf open, text-based file format .svg
Standalone executable .exe for Win, Mac, Linux, some PDAs user responsible for creating .exe with C/C++
Encryption, compression only binary format, specialized compressors XML Encryption, GZ zip mime standard
Browser support plugin for all browsers on Linux, Mac, Solaris, PDAs, Symbian, several Unix versions many plugin sources, Adobe the most advanced supports Linux, Mac, Solaris, Wins
Plugin penetration 90%++ of all browser users 10-20% of all browser users
Plugin size, ease of install 200K, very easy and fast varies with plugin - about 2MB; not as easy or fast
Interoperability XML gateways, swf API DOM, XML native

Flash versus SVG- the Tradeoffs

As can be seen in each major category, each of the two smart graphics systems have some advantages and disadvantages. A clear cut winner from a technical and programming stand point is hard to come by. But in the area of deployment Flash has some clear advantages at this time relative to SVG. We shall look at each category in turn.

The functionality category attempts to assess the overall design and development capabilities built into the Flash and SVG respectively. Its interesting to follow their histories. Flash was intended as a file format for containing other media beyond the new gif and jpeg support available in the Mosaic and Netscape browsers. Flash was a lite version of the Macromedia Director files and it has retained a competitive advantage by constantly delivering the smallest possible mix of media files in its .swf format. Flash would not have initially the scripting and advanced animation features of Director-produced files. Audio, then more bitmap graphics, and finally video and ActionScripting came along in later versions. Compact animations are at Flash's original core.

The same single original purpose is true for SVG. Scalable Vector Graphics is at its core is a way to express in XML, the sizing and positioning of vector graphics- animation and raster support came along as side effects of being able to pan, zoom, and resize vector graphics. And in fact the animation features of SVG really play second fiddle to their more advanced control/functionality in SVG's XML cohort spec, SMIL-Synchronized Multimedia Integration Language. And this is the key to the functionality comparison.

Functionality: Flash = SVG + SMIL + XForms

The equation is not exact; but in the engineering sense it is a practical comparison. In handling bitmap and vector graphics Flash and SVG take different approaches but deliver comparable functionality. SVG, as can be seen from Table 1 has the advantage of more vector graphic primitives and functions; but both systems deliver strong scripting support. ActionScript, a subset of JavaScript in the case of Flash and JavaSCript itself in the case of SVG. And in fact, SVG supports any language that supports the W3C DOM and XML specs - which is quite a broad range of languages.In addition, SVG supports CSS directly and some nice GIS-Geographical Information System mapping features.

So on first blush, SVG appears to have some distinct functionality advantages over Flash. But remember Flash's roots, multimedia. Flash supports directly audio and video features that are simply absent from the SVG spec - in fact they are parts of the SMIL XML spec of the W3C. So where the W3C chose to split multimedia from animation and vector graphics, Macromedia united them in Flash. And to a certain extent there is an advantage because video is just animations going at a faster frame rate - usually, 24 frames per second or faster and are made up of successive bitmap images. Animations typically fall in the 8-16 frames per second rate and are made up of vector graphic, text, and bitmap elements.

So Flash has some distinct advantages over SVG because there has not yet appeared on the market a tool that combines extensive SVG+SMIL support. In addition, Flash Mx has added components, that allows developers to supply basic forms controls like pulldown boxes, radio buttons, tree controls, etc. Open and 3rd party Flash components have just exploded in the year since their introduction. Thus Flash = SVG + SMIL + XForms. But just to play devil's advocate one more time, some of the GIS, draw and native XML features of SVG make it better suited towards a fairly broad class of 2D applications. As well the new SVG 1.2 standard includes a number of SMIL and XForms specs itself.

Now Content Management owners would prefer SVG over Flash interface because the XML interface is highly interoperable in comparison to the proprietary SWF API. In addition, the attributes and text of SVG files are readily indexed and searched in contrast to Flash's binary SWF format. Finally SVG's strong XML programming support plus the inherent extensibility of XML allows development of strong server-based dynamic graphics delivery capabilities. For example, SVG is the basis of Corel's Smart Graphics system.

Also the primitives and strong native draw commands functions in SVG are perfect for advanced presentation and GIS systems. So as it turns out, neither Flash nor SVG dominate from a functionality perspective - because each has specific riches, there are niches that each can expect to win market advantages such that neither should prevail on functionality alone.

Programming Support and Deployment

Developers like SVG programming support because it has strong client side capabilities - specifically JavaScript with full DOM plus, Java and C/C++ bindings . In contrast, ActionScript, Flash's scripting language is a subset of JavaScript and it depends on HTML embed statement or very specific bindings to JavaScript. Interestingly, the best IDE for JavaScript is probably Adobe GoLive which is just a few notches ahead of the Flash Mx IDE - solid, but missing such amenities as code completion, color coding, wizard driven coding aids, remote debugging, project window, database connector etc. In contrast, the Corel Smart Graphics supplies many of these capabilities but is primarily a server-side development environ. Of course, Visual Studio has JScript.NET with all the bells and designer whistles that implies including generating decidedly proprietary code with no provision for a switch to emit W3C standard code.

So developers working with SVG may be inclined to switch to one of the many very substantial Java or C/C++ IDEs. With the DOM and SVG APIs well defined this is not quite as tedious as it sounds - particularly for programmers already familiar with JAXP, SAX, and DOM facilities used in XML and other web processing. However, there are two interrelated problems. The events model of SVG awaits the approval of SVG 1.2 to bring keyboard and timeline events on board in a standard way and to match existing capabilities in Flash. As well, SVG is still moving very fast so key feature are just appearing in development environs.

Flash developers, as noted, would benefit from a major upgrade to the IDE - both on the client and server-side including editor, debugger, properties and project management that can access and debug resources both locally and remotely. For example, there is a flourishing set of components which currently overwhelm the Flash developer working environ. Corel SGS with its Template Builder for JavaScript+SVG+DOM is a move in the right direction. Although both Flash and SVG have duplicate problems elsewhere. For example, database connections, the IDE for making those connections easy including use of components are still rough in both camps. So SVG starts out looking pretty good in the programming arena; but lacking a good cross platform development environ(Apache batik, Corel Smart Graphics, and BitFlash Brilliance are rapidly changing that) makes this a horse race with Macromedia Flash catching up with Firefly database connections plus recently delivered Flash Server and enhanced Remote capabilities.

However, on the distribution and deployment side, Flash inherits a very strong position - probably for being the first entrant to combine a popular set of media together in one file format with absolute compact size for over the web delivery being the number one priority. In addition, Macromedia added progressively more scripting smarts and made a splendid choice in using JavaScript as its template for a full scripting language. The reason is simple - javaScript offers a robust set of But also Macromedia courted resolutely Microsoft and got its plugin to be a default install. But Macromedia was agnostic and gets its player as default install on all the major browsers. This has translated into a 90%++ penetration of Flash players on browsers - way ahead of SVG.

SVG's great hope is that once Mozilla 1.5 comes out with native support for SVG that will prompt the other browser vendors to follow suit. And with Microsoft having dropped out of the stand alone browser game all together - this might be the feature that tips the scales towards a growth in the rival browser fortunes as IE6 stagnates and the other browsers add nifty features like tabbed windows, mouse gestures, popup controls, download managers well beyond IE's capabilities. However, if inertia takes hold, then SVG whose plugins are much bigger and more clunky to load is presented with a serious distribution/deployment problem. This is only compounded by the fact that Flash has a very fast, compact and reliable utility that creates standalone Flash executables that run in Mac, Linux and Windows. SVG has no equivalent that I know of. Mark my words - the success of SVG will depend on how well these potential showstopper issues are resolved by SVG players.

Smart Graphics Not Just Flash and SVG

Although our coverage of smart graphics has been centered on the two main contenders, this is by no means a two horse race - particularly in the graphics world. Viewpoint has integrated 3D modeling (covering all the major 3D packages including Alias maya thru Discreet 3ds max to Softimage), plus Flash and SVG plus 2d graphics (all the majors including Adobe, Corel, Macromedia, Ulead for bitmaps and vector graphic files) plus audio/video support through a conversion from .avi, .mov, and .mpg to Viewpoints functionally more integrated and compressively advanced .mts format). In short, Viewpoint is major aspects a superset of both Flash and SVG in that it is able to integrate their formats into a general graphic format driven primarily by its VMP-Viewpoint Media Player and JavaScript code.

And to make things even more interesting, ViewPoint gives away its key development tools for free to developers and only charges for the runtime VMP-Viewpoint media Player and server components. The primary tools are the SceneBuilder, media Publisher and ViewPoint Slice of Life - but there are well over a dozen components in the system with online documentation and tips freely available from the Viewpoint website.

ViewPoint has become the smart graphics delivery vehicle of choice for automotive, medical, and high end consumer electronics. Like SVG, the availability of its plugin is a hindering factor - Opera and Mozilla and latest netscape browsers are not accepted yet by VMP. As well, the sheer complexity of the all the development options gives developers a sometimes daunting tasks after rapid movement with the Zoomview Helper or ViewPoint Talknow - so progress on a ViewPoint project can be bumpy, especially when needing to interface to multiple databases for dynamic, data driven systems. But for sheer power of graphic expression, ViewPoint is a step ahead.

However, lurking a few steps behind is Microsoft Windows Media Player. All the smart graphics players were served notice by Microsoft when it announced that no more editions of the Internet Explorer would be released - and the existing IE editions would be subject to a Byzantine schedule of security and update fixes. First, this means if you have problems with your plugin in IE better get on the the extended support plan for IE real quick now. Second, if something is not in IE 6.0 like JPG2000 or SVG or mpg3 - do it yourself, because Microsoft will not be. Third, Microsoft reserves the right to do everything in its powers to make Longhorn, the next version of its desktop OS due out in 2005, a blockbuster seller - and this clearly includes adding smart graphics capabilities tied to its Windows Media Player in any fashion (open to, closed to, let a few friends-of-the effort in) as it deems maximally profitable. But hey, you knew your were playing hardball when you got into the IT major leagues.

Windows Media Player 9 supports 2D bitmap and vector graphics, Flash animations, embedded HTML, movie and audio files with very impressive quality to size compression ratios. It runs only on Windows and only Windows 2000 and XP for full services. As well, WMP files can contain embed ed scripts and has available a number of SDK which Microsoft is encouraging developers to use: WM Encode SDK, WM Format SDK, WM Player SDK, WM Services SDK with language support for VC++, VC#, Visual Basic, VBScript and Perl. Free MSDN online documentation and examples are available and the licensing terms for incorporating the WMP into your application appear practicable. Already there is a growing third party plugins, skins and visualization community encouraged with awards, websites and seed money from Microsoft. Also the entertainment community is interested in the streaming broadcast and digital rights management capabilities being offered in Windows Media. In sum, it would be smart to not count Microsoft out of the smart graphics game despite its only-Windows-and the-latest-version tactics.

Third Parties

As Microsoft well knows one of the keys to success beyond technical prowess and full distribution/deployment is to have a following army of third party developers filling in the gaps and advancing the product with promotions and specialized applications. In this regard, it is interesting to compare the two major contenders Flash and SVG as shown in Table 2.

Table 2 - Third Party Support
Browser support Flash - plugin available for all the major browsers on most desktop OS plus some PDA and mobile platforms
SVG - plugins available from Adobe, Apache, Corel and others on wide set of OS desktops , PDA and mobile platforms - but no one source. Mozilla 1.5 will support SVG natively.
Export File format Flash - strong presence all the major vendors in 2D graphics Adobe, Corel, Deneba,Ulead many of the 3D vendors Cagliari, Cue-Vision, discreet, Swift3D, ToonBoom, etc, etc and quite a number of others eHelp, MDM, Qarbon, Wilson, etc, etc.
SVG - distinctly less but rapidly growing with Adobe, CADStd, Corel, Deneba, GraPL, Ilog Jview, IsoDraw, Okino, SVGMaker, Viewpoint plus a host of educational sources.
Native IDE Support Flash - along with Macromedia's own Flash Mx, a number of vendors support complete Flash development including ActionScript including Adobe Live Motion, Corel Rave, Swish 2 etc
SVG -is gaining presence with the likes of bitFlash Brilliance, Corel Smart Graphics, in-gmbh Sphinx SVG, Jasc WebDraw and again educational software.
Again, Flash has a distinct lead, particularly in the number and range of tools that export .SWF file format ( a few like eHelp's RoboDemo also export in .FLA format so users can directly edit their Flash movies in FLash Mx). Flash is doing very strongly in the cartoon, elearning and demo/training segments. In contrast, SVG has a bout a quarter of the number of programs supporting it as direct exports but is gaining as SVG picks up mobile and GIS users. In fact, the GIS community is a relatively strong supporter of SVG format.

Summary

Rich media and graphics originally "sold the Web" to the public. Smart graphics will help to sustain and direct the Net into compelling applications. for example, even communications and broadcasting, will see such smart graphics as whiteboarding and embedded polling ("How many people use Linux on the desktop?", and a popup appears on your desktop. If you respond the popup is replaced by a live graph of responses updated every minute until the change is less than 1%), and IM chat with other attendees of the presentation. Training will be downloadable on demand and will, based on pop quizzes, add more or less background material dynamically depending on the accuracy of your answers. Another example, he same basic presentation will be adapted automatically for highspeed desktop, PDA, and mobile phone players Graphic demos will allow much more user interaction and control of what features are to be shown and how.

Smart Graphics is already here and with broadband and computing power of immense capacity available and sure to increase over the next few years - smart graphics wall become embedded in computing as much as scalable fonts and bitmap graphic displays. Which technologies will lead the way is harder to call. I suspect by the very complexity and therefore trade-offs associated with graphics - quality versus size versus speed of processing versus diversity of devices, smart graphics may support a number of players for quite some time.

Resources:

SVG at W3C - all the news fit to print on SVG, the specs, test suites, and new candidate recommendations
SVG vs Flash
- Cartographic comparison in French dynamic mapping system which uses both Flash & SVG
SVG vs Flash File Formats - compares the file format capabilities, not programming or developer functionality
Corel Smart Graphics Studio - The first complete SVG IDE
Macromedia - Flash Mx and Flash Remote information for developers

 Top of Page  Open Home Flash Tips & Tutorials  
©Imagenation 2001-2004