User login

Raphael – Introduction by

Raphael: vector graphics.

Browser support for everything from IE6 (really) to Android (post Honeycomb).

20kb gzipped Javascript.

Completely different thing from HTML5 <canvas>.

Raphael has a low z-index, other things will appear in front of it, by default.

Can select by ID.

Can even use the JQuery selector.

Fonts

Can get fonts with Cufon. [Hmm. I think i'd avoid putting any fonts in here, a drawing program, and avoid Cufon in favor of @fontface anyway.)

[Ahh, clarified later in the Q&A: The Cufon tool converts fonts to SVG, and so Raphael can then take them and also use them in animations and such. Other font tools may also export SVG.]

Animation/Effects

Set of effects comparable to Flash.

Making objects interactive

Every object has a 'node' in it which is the DOM reference.

Showed an amazing image of a tiger. Admitted it was probably 200KB because, of course, every

You could call it three times, wouldn't add any other weight.

Very responsive animations

Questions & Answers

Q: Similarities to Processing?
There's also JQuery SVG,

Processing.js is awesome, but it uses the HTML5 canvas.

Q: (me) Can you allow a visitor to zoom?
Yes, you'd have to make that user interface for them.

Tom Turnball had the OpenLayers mapping and Raphael question directed to him: Would be hard, but people are trying, saw them in IRC.

Next session: Integrating Raphael with Drupal.

Searched words: 
raphael.js rapheal

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.