This slide deck is from the presentation I gave at the Bmore on Rails meetup on August 10th.

1. Raphaël http://github.com/VinylFox/JSMag/tree/master/2010/May

2. What is Raphaël?

3. Miguel Rafael Martos Sánchez

4. No, Really We can make crooked lines

6. VML (some other shit)

8. FF 3+

9. Safari 3+

10. Opera 9.5+

11. Chrome?

13. Inconsistent API

14. No pixels

15. jQuery for Vector graphics

16. Using Raphaël var paper = Raphael ( 'hangman' , 600 , 600 ); paper . rect ( 1 , 1 , 50 , 20 ) ;

17. The Markup VML: <v:rect style=&quot;width:50;height:20&quot; strokeweight=&quot;1&quot; /> SVG: <rect width=&quot;50&quot; height=&quot;20&quot; style=&quot;fill:white;stroke:black&quot; x=&quot;1&quot; y=&quot;1&quot;/>

18. Using Raphaël var paper = Raphael ( 'hangman' , 600 , 600 ); paper . rect ( 1 , 1 , 50 , 20 ); X & Y top left of rectangle

19. Using Raphaël var paper = Raphael ( 'hangman' , 600 , 600 ); paper . rect ( 1 , 1 , 50 , 20 ); X & Y top left of rectangle Width & Height Of rectangle

21. Circle

22. Ellipse

23. Path

24. Play Along http://raphaeljs.com/playground.html

25. Rectangle var paper = Raphael ( 'hangman' , 600 , 600 ); paper . rect ( 1 , 1 , 50 , 20,10 ); X & Y top left of rectangle Width & Height Of rectangle Corner radius

27. Circle var paper = Raphael ( 'hangman' , 600 , 600 ); paper . circle ( 100 , 100 , 50 ); X & Y center Of circle Radius

29. Ellipse var paper = Raphael ( 'hangman' , 600 , 600 ); paper . ellipse ( 100 , 120 , 50,100 ); X & Y center Of ellipse Radius X Radius Y

31. Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z'); Move/Start point M X Y cubic Bézier options Multiple control points and an end

32. Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z'); Move/Start point M X Y cubic Bézier options Multiple control points and an end cubic Bézier End point cubic Bézier Conrol point cubic Bézier Conrol point

33. Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z'); Move/Start point M X Y cubic Bézier options Multiple control points and an end cubic Bézier End point cubic Bézier Conrol point cubic Bézier Conrol point cubic Bézier End point cubic Bézier End point cubic Bézier Conrol point cubic Bézier Conrol point

34. Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z'); Move/Start point M X Y cubic Bézier options Multiple control points and an end cubic Bézier End point cubic Bézier Conrol point cubic Bézier Conrol point cubic Bézier End point cubic Bézier End point cubic Bézier Conrol point cubic Bézier Conrol point Close path

35. Command Driven M = Move to without drawing L = Draw while moving to new point H, V, Z are other straight line commands Lowercase/Uppercase = Relative/Absolute http://www.w3.org/TR/SVG/paths.html#PathData

36. M - Move

37. L - Line

38. H, V & Z H – Move horizontally only V – Move vertically only Z – Close path to start point

39. Straight Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105');

40. Straight Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105'); Move/Start point M X Y

41. Straight Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105'); Move/Start point M X Y Line to L X Y

42. Straight Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105'); Move/Start point M X Y Line to L X Y Move again M X Y

43. Straight Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105'); Move/Start point M X Y Line to L X Y Move again M X Y Draw more lines L X,Y X,Y X,Y

45. Command Driven C/S = Cubic Bézier curve Q/T = Quadratic Bézier curve A = Arc Lowercase/Uppercase = Relative/Absolute http://www.w3.org/TR/SVG/paths.html#PathData

46. Curved Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ( 'M100,200 C100,50 350,50 350,200' ) . attr ( { stroke : '#ff0000' , &quot;stroke-width&quot; : 2 } ); paper . path ( 'M110,200 C110,60 340,60 340,200' ) . attr ( { stroke : '#00ff00' , &quot;stroke-width&quot; : 2 } );

47. Curved Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ( 'M100,200 C100,50 350,50 350,200' ) . attr ( { stroke : '#ff0000' , &quot;stroke-width&quot; : 2 } ); paper . path ( 'M110,200 C110,60 340,60 340,200' ) . attr ( { stroke : '#00ff00' , &quot;stroke-width&quot; : 2 } ); Starting point X Y

48. Curved Paths var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ( 'M100,200 C100,50 350,50 350,200' ) . attr ( { stroke : '#ff0000' , &quot;stroke-width&quot; : 2 } ); paper . path ( 'M110,200 C110,60 340,60 340,200' ) . attr ( { stroke : '#00ff00' , &quot;stroke-width&quot; : 2 } ); Starting point X Y cubic Bézier options Two control points and an end

50. Text var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ( 'M100,200 C100,50 350,50 350,200' ) . attr ( { stroke : '#ff0000' , &quot;stroke-width&quot; : 2 } ); paper . path ( 'M110,200 C110,60 340,60 340,200' ) . attr ( { stroke : '#00ff00' , &quot;stroke-width&quot; : 2 } ); paper . text ( 225 , 200 , 'Double Rainbow - whoa' );

52. Control Points? var paper = Raphael ( 'hangman' , 600 , 600 ); paper . path ( 'M100,200 C100,50 350,50 350,200' ) . attr ( { stroke : '#ff0000' , &quot;stroke-width&quot; : 2 } ); paper . path ( 'M110,200 C110,60 340,60 340,200' ) . attr ( { stroke : '#00ff00' , &quot;stroke-width&quot; : 2 } ); These little fuckers

53. Cubic Bézier control points M100,200 C100,50 350,50 350,200

54. We can cheat SVG

55. Export to SVG <path style=&quot;fill:none&quot; d=&quot; m 26.683,48.446 c 0,0 3.118,-2.598 4.417,-0.39 &quot; />

56. Inkscape or Illustrator Hide your kids, hide your wife

57. On to the live code demo...