Mission Statement

This website covers all aspects of Raphael including Syntax, Animation, charts and cartography examples.
Also visit the Rap examples and techniques section which has now been expanded (September 22nd 2010).

Made with Raphael
Zach's Web-to-print Website.
The above website used the SVGTOHTML Converter to produce this work more quickly.
Advanced Websites.
Advanced Websites.
Joshua's Shiney Record.
Neven's Canada Job Site.
Rob's Aquarium Monitor.
Sunil's segmented clock.
Ruwan's example guage.
Ruwan's control set.
Phil is making a calender.
Dave's Smart charting tool.
Eneko's Animated colour wheel.
John's World map.
Monkeydom's fun with circles.

Games

Emin's Simple Puzzle Came.
Game by Dave F & Dmitry.
David L equals Flash Game.
David L card (pairs) Game.
David L put a path Game/Utility.

SVG to HTML converter
Visit the SVG to HTML converter page.
Autocode:-Easily code path in uploaded SVG.
February 13th 2011 0.602.
Static help and IE9 update.
March 5th 2011 0.603
Classes are recognised.
April 12th 2011 0.604.
Included embedded images.
April 23rd 2011 0.605.
Please report bugs here.

Massive SVG's easily converted for code.

With the latest release of the converter it is possible to translate SVG's so large that some SVG editors cannot show them.

• Circuit board
  (250 Kilobytes with paths too big for the version of the editors tested).

Both the SVG and the SVGTOHTML files were almost the same size,this must increase (Still further) the possibilities of SVG / Raphael for future use in (even more) major applications.
The above is before we even consider the possibilities of Zooming within the browser content for example.

Regards Charles.
Note: The above converted file cannot be reproduced on this server as it was done on a development server. Currently getting the service provider for IRMW hosting to jack up their hardware.
January 29th 2011 0.6.
Contact.

SVG tools meet Raphael

Build some SVG with a portable or machine installed SVG Editor.
Here are some applications of SVG in Raphael:
Todd F's (full code excursion!) animated paths.
Josep's Raphael code from SVG.
Above tool not compatible with IE.
Version 0.16

Online SVG editors
(Built using Raphael)
Shakthi's portable SVG Editor.
Kevin's portable SVG Editor.
Project info and contacts here.

Other related sites

Tim introduced Mass-Spectrometry fragments in tree.
The library source.
Oleg's online collaborative whiteboard is evolving.
The google project page is located here.
Marcin's Animated Diagram Example with Raphael.How to do it.
Samir's 3D Demo.Samir's page.
dashasalo's Image zooming and panning.How did she do it?
Martin's population pyramid.
Steffen's Playground Calculator.
Daniel's Detexify2 - LaTeX symbol classifier.
Chris's Web Physics Demonstrator.
Demonstrating physics and computer graphics algorithms written in Raphael/Javascript.
Robert's Raphael Live.
Learn Raphael even quicker!
Library uses jQuery.js additionally.
Dmitry is mobile.
Dmitry's Standard Raphael icons.
Ben B's Export SVG from Raphael JS to create a PNG bitmap tutorial and code is here.
Includes PHP server side code too.
Gregory and Paul's

ABC music notation library.
Joshua's Development Blog.
Jerod's collaborative blackboard.
Tool uses jQuery.js and JSON.js additionally.
Josep's Colour harmonies.
Wait for the sequence to watch all the variations of colour.

Extended Raphael

Wout's Q.Picker color picker.
Tool uses Prototype.js additionally, and is one of many "add value" tools available on that site.
Wout's Zoom Plugin.
Clifford's Extended Drag & Drop
Documentation and source linked on the demo.
Just nominate objects that need to be dragged and your done. Module uses jQuery.js additionally.
Add your methods to canvas.
Add your methods to elements.
Add your custom attributes/methods.
Jonas's Dragging Sets.
Zevens's ScaleRaphael
Enables changing sizes of your Raphael paper.
Vinicius's Draw polygon function.
Nothing Insightful's arrow sets.
Top flight's arrow sets.

Raphael with YQL

Lachlan's suggesting using this cool public service (From Yahoo) so that the web can be used as a database.
Dispay the returning data dynamically using Raphael. Raphael was made for this!

Charting

Charting libraries are fun!
Use them at work or personal pages. Developer productivity is high and link them to data easily.

One way to do this is to use an easy method to link to text or php datasources. The hybrid implemenstation/demonstration example of linking using Ajax is here.

Mason's Bar and Pie Charts getting started demo which is additional to whats here.
Jean's Ico charting library. Jean's library reference is here.
Kilian's charting library. Kilian's library reference is here.
Library uses Prototype.js additionally.
Ben's simple javascript line graph examples.

SVG Resources Section

Since the release of Raphael 1.0 RC1 we can now use pure SVG syntax/Metadata.

Raphael does it's best to support SVG but what about the promise SVG originally had when it was assumed all browsers would support it? There's no doubt that incomplete, cross browser support is less of an issue with more people and products supporting it every day.

The best reasons for using SVG can be found here. Tools for editing pure SVG and importing SVG so that it works cross browser can be found here. Jonas has extended the SVG into Raphael extension originally provided by Wout for code monkeys.

Raphael Examples and Techniques.

There are 2 categories of examples below.

If you want to go to the interactive examples (TYPE 1) where you can play with code, click on the image buttons that have RED backgrounds. The remaining examples are individual examples showing a specific technique (TYPE 2) have BLACK backgrounds.

If you want to Search through all TYPE 1 examples then use the search engine at the top of this webby page.
(The one between the 2 magnifying glasses).