RaphaelJS library overview, OdessaJS conference, 2013

1. Raphaël
magic
Ксения Редунова

2. Чего хочет заказчик?

4. SVG Canvas
Does all the job Complete control
DOM elements Lots of work
Vector graphics Pixel perfect

5.  Scalable Vector Graphics
SVG 

XML
DOM elements
 JS events
for IE6 – 8
VML  “VML пока поддерживается лишь
немногими программами, среди
которых Internet Explorer 5.0+ и
Microsoft Office 2000+” © Wikipedia
 Google Maps использует VML для
визуализации векторов на IE

6. Firefox -SVG
<div id="mypaper" class="paper">
<svg height="302" version="1.1" width="302"
xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative; left: -
0.5px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs/>
<circle cx="150" cy="150" r="50" fill="#ff0000"
stroke="#ffffff" style="" stroke-width="3"/>
</svg>
</div>

7. <div class="paper" id="mypaper"> IE8 - VML
<div style="left: 0px; top: 0px; width: 302px; height: 302px; overflow: hidden; display:
inline-block; position: relative; cliptop: 0px; clipright: 302px; clipbottom: 302px; clipleft: 0px;">
<span style="left: -9999em; top: -9999em; line-height: 1; padding-top: 0px; padding-
right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom:
0px; margin-left: 0px; position: absolute; ">
</span>
<shape class="rvml" style="left: 0px; top: 0px; width: 1px; height: 1px;
position: absolute;" raphael="true" raphaelid="0">
<stroke class="rvml"></stroke>
<skew class="rvml"></skew>
<fill class="rvml"></fill>
</shape>
</div>
</div>

8. Raphael for SVG
is like
jQuery for DOM
API and Reference

9. Basic Demos
Кружочек
Много квадратиков

10. SVG paths
"M 250 250 l 0 -50
l -50 0l 0 -50 l -50 0
l 0 50 l -50 0 l 0 50 z"

11. SVG paths syntax
SVG path reference

12. SVG icons
http://raphaeljs.com/icons/
M1,1v30h30V1H1zM17.326,24.398c0,2.92-1.712,4.248-
4.209,4.248c-2.255,0-3.564-1.168-4.229-
2.576l0,0l0,0l0,0l2.296-
1.391c0.443,0.777,0.846,1.442,1.812,1.442c0.926,0,1.511-
0.354,1.511-1.771V14.77h2.819V24.398zM23.992,28.646c-
2.618,0-4.311-1.248-5.135-2.879l2.295-
1.328c0.604,0.979,1.39,1.711,2.779,1.711c1.168,0,1.904-
0.584,1.904-1.396c0-0.966-0.766-1.311-2.054-
1.865L23.08,22.58c-2.034-0.865-3.383-1.953-3.383-
4.249c0-2.114,1.604-3.726,4.128-
3.726c1.792,0,3.081,0.625,4.008,2.254l-2.19,1.406c-0.479-
0.861-1.006-1.209-1.812-1.209c-0.825,0-1.353,0.521-
1.353,1.209c0,0.852,0.521,1.188,1.729,1.711l0.704,0.309c2.
396,1.021,3.746,2.07,3.746,4.43C28.664,27.259,26.671,28.6
46,23.992,28.646z
Leaf icon demo

13. Transformation
"t100,100r30,100,100s2,2,100,100r45s1.5"
// translate 100, 100, rotate 45
el.transform("t100,100r45");
Paper.set() var st = paper.set();
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"});

14. Animation
Basic animation demo
Easing demo

15. Drag’n’Drop example
r.drag(move, start, up);
Drag-n-drop demo

16. From the scratch to web
animation with Raphael
Spline morphing demo

17. Convert any SVG to
Raphael object
SVG to Raphael Converter
Demo - cat
Cats morphing

18. Demo – world map
http://raphaeljs.com/world/

19. Free Transform
mydeco.floorplanner.com/rooms/moodboard

20. RaphaelJS
http://raphaeljs.com
Dmitry Baranovsky
http://dmitry.baranovskiy.com/
SVG paths reference
http://www.w3.org/TR/SVG/paths.html
SVG paths to Raphael converter
http://toki-woki.net/p/SVG2RaphaelJS/

21. Q&A
Ксения Редунова
@Katidotk