Home Techy Search Techy Search   Go Search Techy Search Home
Vector Graphics SVG VMLVector Graphics SVG VMLVector Graphics SVG VML

Website Archive:-This page is no longer updated. Access the latest code and info at the New Page.

   This is an additional resource for Raphael, the JavaScript Vector Library, which provides a seamless coding layer so that vector graphics can be rendered in browsers that both support and do not support SVG.

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.


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.

Small Page Logo

Small Page Logo

Small Page Logo

Visit the SVG Converter

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.

The BIG picture (Associated Technology).

You need some basic knowledge to follow this article, having said that beginners should read it also.
The topics included in Brian Suda's article can be broadly summarised as follows.

  • The Raphael library over other big libraries requiring graphics plugins.
  • Avoid locking up your data in Pixels.
  • Raster images do not scale up or down very well.
  • Deriving data from html.
  • A small, useful project involving maps that you might want to implement yourself.
  • SVG is a specification it's not software and why is this advantageous.

See the article
SVG with a little help from Raphael

Brian Suda is a respected author of internet technologies.

Big project decision,
why Raphael won out.

The developer here had to make a decision on what was best to achive the objectives of the project.
Products considered:

  • jQuery.
  • Raphael.

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

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 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).

Visit this feature Visit this feature Visit this feature
Visit this feature Visit this feature Visit this feature
Visit this feature Visit this feature Visit this feature
Visit this feature Visit this feature Visit this feature
Visit this feature Visit this feature Visit this feature
Visit this feature Visit this feature Visit this feature
Visit this feature Visit this feature Visit this feature
Custom Rap Logo
Back to Raphael