Sunday, December 18, 2005

the vector is mightier than the bitmap

Nice slogan from inkscape, wish I had thought of it myself.

Scalable Vector Graphics (SVG) have come of age, it is time to incorporate them into the school curriculum. I can't wait for 2006, back to school, well I exaggerate slightly.

Up until now there has been a problem with the viewer not being embedded into the browser, meaning that many users would not see the SV graphics on your webpage unless they had gone to the trouble of downloading the Adobe viewer. It is still worthwhile for users / schools to do that so the SV graphics can be viewed in IE, which, no surprise, is lagging behind the times, yet again.

But the viewer problem has been solved for those who use Firefox. SVG is now native to Mozilla firefox, no plugin required.

SVG offers a relevant, exciting, rich learning environment for both students and teachers. Graphics can be styled, animated and scripted. This practice can be combined with the exploration of:
  • XML - SVG graphics are text based (eXtensible Markup Language)
  • CSS - they can be styled (Cascading Style Sheets)
  • SMIL - they can be animated (synchronised multimedia integration language)
  • JavaScript and DOM - they can be scripted (Document Object Model)
Also raster graphics (JPEG, PNG) can be embedded into vector graphics, so you can have the best of both worlds.

It all comes together in a really nice way.

For an editor I would recommend Inkscape, if you want a free one. Xara is in the process of releasing an open source Linux editor but you will still have to pay for their Windows version.

There are some great examples at http://www.croczilla.com/svg/samples/

Here are some examples to illustrate the range of what can be done:

http://www.croczilla.com/svg/samples/opacity1/opacity1.xml
xml file, svg graphics, style in the header, JavaScript (functions, buttons, event handlers)

http://www.croczilla.com/svg/samples/lion/lion.svg
sophisticated svg drawing of a lion

http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg
too good!! tetris game programmed in SVG and JavaScript (inspirational example)

Don't forget, you'll need a recent version of firefox or the Adobe plugin to view these.

1 Comments:

Anonymous Chris said...

Sodipodi

You might find Openclipart useful.

3:53 PM  

Post a Comment

Links to this post:

Create a Link

<< Home