If you’re looking to draw vector graphics on your website then you’re in luck, Raphael is a JavaScript library that will simplify your work with vector graphics on the web. If you’re looking to create a chart, rotate or crop an image then this clever JavaScript library will help you do just that quickly and easily.
Raphael uses SVG W3C Recommendation and a VML base for creating vector images on websites. So you can basically create shapes on your web page and these shapes are all DOM objects that can be controlled by JavaScript. You can even animate your images once you have drawn them. It’s quite a powerful and relatively simple tool and it’s cross browser compliant too which means that you can use it in your website projects without having to worry about browser compatibility.
How to use it:
Download and include raphael.js into your HTML page, then use it as follows:
// Creates canvas 320 × 200 at 10, 50 <strong>var</strong> paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 <strong>var</strong> circle = paper.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00) circle.attr(<em>"fill"</em>, <em>"#f00"</em>); // Sets the stroke attribute of the circle to white circle.attr(<em>"stroke"</em>, <em>"#fff"</em>);
Adham Dannaway
Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!
There is a good article written by Raphael JS Author at http://dev.opera.com/articles/view/raphael-a-javascript-api-for-svg/
FYI, Raphael JS is part of Sencha Library.
This is awesome!