Vector graphics are geometric modeling which represents illustrations. Because its just geometric data, the amount of data usually needed to draw a image is smaller compare to bitmaps. This technique is used when doing illustrations, doesn’t make sense to use for photos since photos represent more scattered out pixels and usually are without solid shapes or forms. There usually is a lot of interest in manipulating image data which you can do with Vector graphics since its just data vs. regular images which are bitmap, because definition for each pixel and is nearly imposable to reprogram over and over with high speeds in the browser.
You see Vector graphics more then you probably realize, in ads or any Flash animations. The beauty / power of Flash comes from being able to do vector graphics, and since the data coming from the server is very small … animations drawn by the flash plug-in in your browser or computer are much more bang for your buck then traditional animation using bitmaps. Usually if you want vector for the web you would use Flash, since its the most commonly supported format across many OS and browsers. But in order for something to be streamlined on the web it needs to be programmable / automatable. Flash how ever doesn’t do that out of the box.
Wait I know what you are going to say. Yes there is Flex, which is bi product of Flash, developed by macromedia or now Adobe. Flex does allow you to write a very straight forward XML document in their own XML schema for MML (Macromedia Markup Language). When the request comes in, that XML gets interpreted by the Flex server, which on the fly generates SWF (”Scalable Web File” and “Shock Wave Flash” usually people like my self who used director remembers as latter). Then client’s browser player / plug-in plays SWF just as if was outputted by flash. So with this … yes there is a way to steam line vector applications, but not quite graphics. To read more on Flex go to -> adobe.com/products/flex/. Please do check out the “Flex Explorer“. Open it up and see sample working Flex code, which shows how trivial it is to get so much interactivity with so little code.
But of course there are a lot of people who don’t want to pay the millions of dollars in licensing flex per processor. For those people there is some thing called “Laszlo”. What is Laszlo you may ask? Well Laszlo is open source project equivalent to Flex, works on the same principals as Flex but a bit better since it creates rich applications in flash code as well as DHTML. To read more on Laszlo go to -> openlaszlo.org. Also do check out their “Laszlo Explorer“. Take a look around you will find working sample of Laszlo code to show you what it can do.
Flex and Laszlo are great, both ultimately uses SWF for outputting vector based applications, but they do not do justice for charting unless you happen to know how to build your own extensions. Neither do any of them actually create artistic imagery with vector graphics. If you are in the market for only charts, then there is another hybrid solution called “Fusion Charts”. Fusion Charts allows the users to have stunning vector based charts with high quality animations. How does that work you may ask? Basically fusion charts are a set of flash files which you purchase. Each of the flash file has been programmed to read a specific type of XML file to display the out put. So you include the reference to flash file on your HTML page with additional parameter for XML file location. Flash file then does a HTTP request and down loads the XML file, and reads its nodes as set of instructions and shows / hide components while changing some of them all together. This basically gives you a super sexy chart with out you having to add any additional server processes and extra mess. All you need is purchase flash files and drop them on the server, create the xml file and then reference xml and flash file in your HTML … voila, you are done. To read more on Fusion Charts go to -> fusioncharts.com. Also do check out their samples of cool looking charts. It is a cool product but doesn’t really scale very well, if you have massive amount of data it simply takes the flash file way too long to draw.
Even thought having full blown applications and charts are really cool, there is also some need to for pure vector imagery. For past couple of years Internet Explorer has supported VML or Vector Markup Language. Personally I think VML is great, it’s a simple xml instructions to draw lines and object in Internet Explorer. You don’t see people bragging about it because it only works in Internet Explorer. To read more on VML go to MSDN at -> msdn.microsoft.com it contains useful documentation, references and a VML generator. Also checkout this web-based VML generator at dynamic drive -> dynamicdrive.com.
W3C, Adobe and many other have been trying to standardize vector imagery in form of SVG or Scalable Vector Graphics. The problem with this is to get everyone signed on with the standards. Currently only Internet Explorer, FireFox 1.5 and Opera 9 has adopted the support for SVG, even with that Firefox approach and Internet Explorer approach for SVG is still not exact, both has have some major differences. Thus making it even harder to have a unified vector graphics format. But there is a lot of promises for this technology in the future, many mobile devices have started using SVG to draw on phone and small PDA’s. Also Adobe has a browser plug-in which shows SVG documents in the browser without the native browser support for SVG. Also many products like Visio have also been outputting in SVG as an alternative format. To read more on SVG go to W3C documentation. Firefox also has additional information regarding SVG at -> http://www.mozilla.org/projects/svg/ You can download SVG plug-in by Adobe.
Of course one last item to mention in this mix is the Canvas Tag. What is Canvas you may ask? Well Canvas is a non compliant HTML add-on initiated by Apple. Besides pissing off W3C and others, It basically is a alternative to VML and SVG, but more powerful. Basically Canvas in other words gives you working area, where using javascript and canvas objects API, you can draw really cool vector objects easily. Want to read more about Canvas? Here are few links you might find useful. Apple Developer Connection. Mozilla development center. Canvas tutorial from Mozilla developer center.
Check out this Doom like game using Canvas and VML abrahamjoffe.com.au/ben/canvascape/ Yes … Yes it looks like crap and probably is choppy but the purpose of this demonstration by Joffe Benjamin is to demonstrate the power of Canvas + JavaScript.
Add A Comment